写在前面
今天我们练习一个简单的弹窗效果，具体效果如下：
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;
} 写在最后
以上就是【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。