寫在前面
今天我們練習一個簡單的彈窗效果，具體效果如下：
HTML代碼：
<!DOCTYPE html>
<html>
<head>
<title>【每日一練】35—一個簡單的彈出框效果的實作</title>
</head>
<body>
<div class="container">
<div class="content">
<h2>web前端開發</h2>
<p>一個專注web前端開發技術學習與研究的平台，網址:www.webqdkf.com</p>
</div>
<div class="toggleBtn"></div>
</div>
<script>
let toggleBtn = document.querySelector('.toggleBtn');
let container = document.querySelector('.container');
toggleBtn.onclick = function(){
container.classList.toggle('active');
}
</script>
</body>
</html> CSS代碼：
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #1a242a;
}
.container
{
position: relative;
width: 0px;
height: 0px;
background: #37444b;
display: flex;
align-items: center;
justify-content: center;
border-radius: 25px;
transition: 0.5s;
}
.container::before
{
content: '';
position: absolute;
bottom: -15px;
width: 40px;
height: 40px;
background: #37444b;
border-radius: 5px;
opacity: 0;
transform: rotate(45deg);
transition: 0.5s;
}
.container.active::before
{
opacity: 1;
transition-delay: 0.5s;
}
.container.active
{
width: 400px;
height: 400px;
transition-delay: 0.5s;
}
.container .content
{
min-width: 400px;
padding: 40px;
color: #fff;
opacity: 0;
transition: 0.5s;
transform: scale(0);
}
.container.active .content
{
opacity: 1;
transition-delay: 0.5s;
transform: scale(1);
}
.toggleBtn
{
position: absolute;
bottom: -20px;
min-width: 60px;
height: 60px;
background: #0bcf9c;
border-radius: 50%;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s;
}
.container.active .toggleBtn
{
bottom: -90px;
transform: rotate(135deg);
background: #ff5a57;
}
.toggleBtn::before
{
content: '+';
font-size: 2.5em;
color: #fff;
} 寫在最後
以上就是【每日一練】的全部内容，希望今天的小練習對你有用，如果你覺得有幫助的話，請點贊我，關注我，并将它分享給你身邊做開發的朋友，也許能夠幫助到他。
我是楊小愛，我們明天見。