从 0 开始教你做有假关闭按钮的澳门风网页弹窗广告（主要用CSS，少量原生 js）

本文链接：https://blog.csdn.net/m0_74102727/article/details/132793075

小白随机在互联网上乱丢一些赛博垃圾，还望拨冗批评斧正。

效果展示：

网页弹窗效果

一、图片素材准备

在做这个图片素材的时候我一直在发愁，究竟如何做出这样究极无敌爆炸土的印象派素材。

经反复尝试，我将目光锁定在了 word 文档上。

是的，只需要新疆 word 文档，通过新建文本框就可以做出下图效果。

具体来讲，拉出一个长条状的文本框后，复制几个竖着拼在一起，就能很轻易地把框架搭建好。

接下来我们要调整参数：

文本框：无边框，背景色通过吸取一些不良广告的素材来定下。部分背景需要设置渐变色。

文字：多数选择微软雅黑，第一行黄色边框是通过复制一层文字，将底层文字描边拉粗，再将正常文字覆盖在上面实现的。

形状拼接：右上角的三角，通过创建三角形拼在一起实现，下面两行多色效果只是新创建文本框然后覆盖在上面的效果。

做好之后截图保存，就得到印象派的广告素材啦！

下面是一些其他的抽象作品，供你取色和进行样式参考：

二、编写html文件

大体结构如下：

<body>
	<img src="CSDN上半.jpg" class="bgc">
	<img src="CSDN下半.jpg" class="bgc">
	<div class="main">
		<img src="广告示例.jpg" alt="nothing">
		<div class="header">
			<div class="left_top"></div>
			<a href="doc.html" class="right_down">关闭</a>
			<a href="doc.html" class="right_top"></a>
		</div>
	</div>
</body>

三、编写CSS样式

三个关闭按钮，按照位置不同，我们赋予他们 "left_top""right_top""right_down"的类名。

通过定位，将广告素材定位到.main盒子底部，再在其上方定位一个 header 盒子，把关闭按钮放到 header 中，用定位调整他们的位置。

此外，CSS还通过伪元素创建了关闭按钮，并实现了广告循环缩放动画以及鼠标悬浮到关闭上时的交互效果。

<style>
	* {
		margin: 0;
		padding: 0;
	}
	.main {
		position: relative;
		height: 325px;
		width : 336px;
		background-color: rgba(199,46,49,1.00);
		margin-top: -200px;
		z-index: 10;
		position:fixed;
		bottom:0;
		right:0;
	}	
	.main img{
		height: 300px;
		margin-top: 25px;
		z-index: 30;
		animation-name: brightness;
		animation-duration: 0.5s;
		animation-iteration-count: infinite;
	}
	.bgc {
		width:100%;
	}
	.left_top {
		height: 30px;
		width: 35px;
		z-index: 100;
		position: absolute;
		left: 10px;
		line-height: 27px;
		text-decoration: none;
		align-items: center;
        cursor: pointer;
	}
	.header {
		position: absolute;
		display: flex;
		align-items: center;
		left: 0;
		top: 0;
		height:25px;
		width:336px;
		background-color: black;
		z-index: 30;
		align-items: center;
	}
	.right_down {
		height: 30px;
		width: 35px;
		z-index: 100;
		position: absolute;
		right: 10px;
		line-height: 30px;
		text-decoration: none;
	}
	.left_top::before{
            position: absolute;
            content: '';
            width: 0.25vw;
            height: 1.5vw;
            background: white;
            transform: rotate(45deg);
            top: calc(50% - 0.7vw);
            left: 10%;
			filter:blur(1px);
        }

    .left_top::after{
        content: '';
        position: absolute;
        width: 0.25vw;
        height: 1.5vw;
        background: white;
        transform: rotate(-45deg);
        top: calc(50% - 0.7vw);
        left: 10%;
		filter:blur(1px);
       }
   .right_top::before{
        position: absolute;
        content: '';
        width: 0.20vw;
        height: 1.2vw;
        background: black;
        transform: rotate(45deg);
        top: calc(50% - 0.5vw);
		left:44%;
		filter:blur(0.5px);
    }

    .right_top::after{
        content: '';
        position: absolute;
        width: 0.20vw;
        height: 1.2vw;
        background: black;
        transform: rotate(-45deg);
        top: calc(50% - 0.5vw);
		filter:blur(0.5px);
		left:44%;
       }
	.left_top:hover::after,
	.left_top:hover::before {
		background-color: red;
	}
	.right_top:hover::after {
		transform: scale(1.1) rotate(-45deg);
	}
	
	.right_top:hover::before {
		transform: scale(1.1) rotate(45deg);
	}
	.right_top {
		height: 23px;
		width: 23px;
		z-index: 100;
		position: absolute;
		right: 0;
		top: -23px;
		line-height:23px;
		text-decoration: none;
		background-color: white;
		color:black;
		text-align: center;
		border-width: 1px 1px 0px 1px;
		border-color: black;
		border-style: solid;
	}
	@keyframes brightness{
 		0% {
 		   transform: scale(0.99);
  		}
  		100% {
    		transform: scale(1.0);
  		}
	}
	.right_top:hover {
		text-decoration:underline;
	}
	.right_down:hover {
		text-decoration:underline;
	}
	div a {
		color:rgba(255,255,255,1.00);
	}
	.main img:hover {
		transform: scale(1);
		filter: brightness(110%);
		animation-name: none;
	}
</style>

三、编写js（少量js实现最后小部分功能）

由于我们img的插入并不是放在<a>标签里的，并且真的关闭按钮的关闭功能实现通过 js 更加便捷，所以添加最后几行 js 代码实现最后两个功能。

<script>
	var open = document.querySelector('.main').querySelector('img');
	open.addEventListener('click',function() {
		window.location.href="doc.html";
	})
	var main = document.querySelector('.main');
	var close = document.querySelector('.left_top');
	close.onclick = function(){
		main.style.display = 'none';
	}
</script>