我们今天练习一个简单的弹窗效果，具体效果如下：
HTML:
<!DOCTYPE html><html><head><title>【每日一练】35—一个简单的弹出框效果的实现</title><link rel=”stylesheet” type=”text/css” href=”style.css”></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:
@import url(‘https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap’);*{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;}
写在最后
以上就是【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
欢迎关注【web前端开发】的公众号与视频号，更多精彩内容与您一起来分享。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
【web前端开发】一个专业而懂你的前端开发技术研究学习交流平台，每天不定时分享前端技术内容与案例，编程图书与课程，前端开发工具等学习资源，我们坚持每天学习一点点，每天进步一点点，关注我们，一起学习成长进步。
同名公众号【web前端开发】
