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

写在前面

今天我们练习一个简单的弹窗效果&＃xff0c;具体效果如下&＃xff1a;

HTML代码&＃xff1a;

CSS代码&＃xff1a;

*{margin: 0;padding: 0;box-sizing: border-box;font-family: &＃39;Poppins&＃39;, 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: &＃39;&＃39;;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: &＃39;&＃43;&＃39;;font-size: 2.5em;color: #fff;
}

写在最后

以上就是【每日一练】的全部内容&＃xff0c;希望今天的小练习对你有用&＃xff0c;如果你觉得有帮助的话&＃xff0c;请点赞我&＃xff0c;关注我&＃xff0c;并将它分享给你身边做开发的朋友&＃xff0c;也许能够帮助到他。

我是杨小爱&＃xff0c;我们明天见。

学习更多技能

请点击下方公众号