【每日一练】35—一个简单的弹出框效果的实现

每日一练1年前 (2023)更新 admin
1,866 0

我们今天练习一个简单的弹窗效果,具体效果如下:

【每日一练】35—一个简单的弹出框效果的实现

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前端开发】的公众号与视频号,更多精彩内容与您一起来分享。

© 版权声明

相关文章

暂无评论

暂无评论...