今天这个练习是一个广告弹窗效果,在页面加载完后,会自动弹出来一个广告,这个效果,是很多电商网站上比较常见的功能之一,其主要目的就是为了促销产品。现在,我们一起来看一下它的最终效果:
HTML代码:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>【每日一练】141—一款自动弹窗广告的实现</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="popup">
<div class="contentBox">
<div class="close"></div>
<div class="imgBx">
<img src="gift.png">
</div>
<div class="content">
<div>
<h3>今日特惠</h3>
<h2>50<sup>%</sup><span> Off</span></h2>
<p>今日所有电子产品&办公用品</p>
<a href="http://www.webqdkf.com">马上购买</a>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var popup = document.querySelector('.popup');
var close = document.querySelector('.close');
window.onload = function() {
setTimeout(function() {
popup.style.display = "block";
}, 2000);
// 页面加载 2 秒后自动显示弹出窗口
}
close.addEventListener('click', () => {
popup.style.display = "none";
})
</script>
</body>
</html>
CSS代码:
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body
{
min-height: 100vh;
background: #b1e7a1;
}
.popup
{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
display: none;
}
.contentBox
{
position: relative;
width: 600px;
height: 400px;
background: #fff;
border-radius: 20px;
display: flex;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.popup .imgBx
{
position: relative;
width: 300px;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
}
.popup .imgBx:before
{
content: '';
position: absolute;
width: 250px;
height: 250px;
background: #e7ffe0;
border-radius: 50%;
}
.popup .imgBx img
{
position: relative;
max-width: 250px;
z-index: 1;
}
.popup .content
{
position: relative;
width: 300px;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
}
.popup .content h3
{
color: #333;
line-height: 1em;
font-size: 2em;
font-weight: 300;
}
.popup .content h2
{
font-size: 4em;
line-height: 1em;
color: #333;
color: #ff4d54;
}
.popup .content h2 span
{
color: #333;
font-size: 0.75em;
text-transform: uppercase;
}
.popup .content p
{
font-weight: 300;
}
.popup .content a
{
display: inline-block;
padding: 10px 20px;
background: #ff4d54;
color: #fff;
margin-top: 15px;
text-decoration: none;
border-radius: 10px;
}
.close
{
position: absolute;
top: 20px;
right: 20px;
width: 40px;
height: 40px;
background: #f3f3f3 url(close.png);
background-repeat: no-repeat;
background-position: center;
background-size: 10px;
border-radius: 50%;
cursor: pointer;
z-index: 10;
}
@media (max-width: 768px)
{
.contentBox
{
width: 300px;
height: auto;
flex-direction: column;
}
.popup .imgBx
{
height: 200px;
transform: translateY(-50px);
}
.popup .imgBx:before
{
background: #fff;
}
.popup .content
{
height: auto;
text-align: center;
padding: 20px;
padding-top: 0;
}
.close
{
top: -50px;
right: -10px;
background: #fff url(close.png);
background-repeat: no-repeat;
background-position: center;
background-size: 10px;
}
}
写在最后
以上就是每日一练的全部内容,希望今天的小练习对你有用,如果你觉得有帮助的话,请点赞我,关注我,并将它分享给你身边做开发的朋友,也许能够帮助到他。
我是杨小爱,我们明天见。
推荐阅读
学习更多技能
请点击下方公众号