其他
【每日一练】35—一个简单的弹出框效果的实现
写在前面
<!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>*{ 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;}写在最后
以上就是【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
学习更多技能
请点击下方公众号