Result
回転しながらふわっと浮かび上がる、ちょっとモダンなエフェクトのモーダルウィンドウ
:target疑似クラスを使って実装されています
css
.container {
background-color: #9191E9;
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
}
.button {
text-decoration: none;
font-size: .875rem;
font-weight: 300;
text-transform: uppercase;
display: inline-block;
border-radius: 1.5rem;
background-color: #fff;
color: #9191E9;
padding: 1rem 2rem;
}
.popup {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.8);
bottom: -100vw;
right: -100vh;
z-index: 2;
visibility: hidden;
opacity: 0;
transition: .64s ease-in-out;
transform: rotate(32deg);
}
.popup:target {
bottom: 0;
right: 0;
visibility: visible;
opacity: 1;
transform: rotate(0);
}
.popup__close {
position: absolute;
right: -1rem;
top: -1rem;
width: 3rem;
height: 3rem;
font-size: .875rem;
font-weight: 300;
border-radius: 100%;
background-color: #0A0A0A;
z-index: 4;
color: #fff;
line-height: 3rem;
text-align: center;
cursor: pointer;
text-decoration: none;
}
|
html
<div class="container">
<a class="button" href="#popup">モーダルウィンドウ表示</a>
<div class="popup" id="popup">
<div class="popup-inner">
<div class="popup__photo">
<img src="https://picsum.photos/500/500" alt="">
</div>
<div class="popup__text">
<h1>foo bar</h1>
<p>hogehoge hogehoge hogehoge
</p>
</div>
<a class="popup__close" href="#">X</a>
</div>
</div>
</div>
|
via
Pure Css Popup
