web前端開發 - 【每日一練】35—一個簡單的彈出框效果的實現－鑽石舞台

寫在前面

今天我們練習一個簡單的彈窗效果，具體效果如下：

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;}

寫在最後

以上就是【每日一練】的全部內容，希望今天的小練習對你有用，如果你覺得有幫助的話，請點讚我，關注我，並將它分享給你身邊做開發的朋友，也許能夠幫助到他。

我是楊小愛，我們明天見。

學習更多技能

請點擊下方公眾號