黑马程序员技术交流社区

标题: 杭州黑马前端6期技术交流贴--流星雨前端特效(附源码) [打印本页]

作者: 大萌新 时间: 2019-7-25 00:39
标题: 杭州黑马前端6期技术交流贴--流星雨前端特效(附源码)
本帖最后由大萌新于 2019-7-25 00:42 编辑

来黑马之前曾在b站看过几个up主写的前端小特效，当时觉得很漂亮，但苦于自己当时技术不够，不太能理解那些代码的含义。如今经过基础班的学习，我终于可以自己写出来了。

在此分享给大家。

//这里是css源代码

//一种很好看的灰色背景颜色


	html,
	body {
	height: 100%;
	background-color: #1e272e;
	} //给类名为wrap的div设置宽高
	.wrap {
	width: 100%;
	height: 100%;
	position: relative; //使用相对定位方便其子代以其绝对定位
	transform: rotatez(45deg); // z轴倾斜45度
	} //设置类名为star的div样式，使其被浏览器渲染为一个个的小流星
	.star {
	height: 2px; position: absolute; 以父级元素wrap绝对定位，由于流星很多此时先不设置定位坐标 border-radius: 50%;//使star显示为圆形 //linear-gradient 这是css3新增的颜色渐变属性用法如下 linear-gradient()属性值 <point> left：设置左边为渐变起点的横坐标值。 right：设置右边为渐变起点的横坐标值。 top：设置顶部为渐变起点的纵坐标值。 bottom：设置底部为渐变起点的纵坐标值。 <angle>：用角度值指定渐变的方向（或角度）。 <color-stop>：指定渐变的起止颜色。 <color-stop> <color>：指定颜色。请参阅颜色值 <length>：用长度值指定起止色位置。不允许负值 <percentage>：用百分比指定起止色位置。 //下面background使每个流星倾斜45度从第一章颜色渐变到另一种颜色
	background: linear-gradient(-45deg, #c7ecee, rgba(0, 0, 255, 0)); //使每个流星显示为
	filter: drop-shadow(o o 6px #c7ecee); //给每个流星设置模糊的小尾巴
	animation: scaling 3s ease-in-out infinite, moveTo 3s ease-in-out infinite; //这里定义了两个动画 scaling和moveTo来设置流星坠落的动画
	} //以下.star:nth-child(num) {}设置每个流星的坐标和动画(坠落特效)出现的时间
	.star:nth-child(1) {
	top: 40%;
	left: 30%;
	animation-delay: 1s;
	}
	.star:nth-child(2) {
	top: 40%;
	left: 30%;
	animation-delay: 1.3s;
	}

	.star:nth-child(3) {
	top: 50%;
	left: 35%;
	animation-delay: 2.1s;
	}

	.star:nth-child(4) {
	top: 60%;
	left: 40%;
	animation-delay: 2.5s;
	}

	.star:nth-child(5) {
	top: 35%;
	left: 35%;
	animation-delay: 3s;
	}

	.star:nth-child(6) {
	top: 45%;
	left: 25%;
	animation-delay: 2s;
	}

	.star:nth-child(7) {
	top: 55%;
	left: 25%;
	animation-delay: 1s;
	}

	.star:nth-child(8) {
	top: 65%;
	left: 25%;
	animation-delay: 1.5s;
	}

	.star:nth-child(9) {
	top: 65%;
	left: 35%;
	animation-delay: 1.8s;
	}

	.star:nth-child(10) {
	top: 60%;
	left: 29%;
	animation-delay: 3.5s;
	}

	.star:nth-child(11) {
	top: 60%;
	left: 20%;
	animation-delay: 4s;
	}

	.star:nth-child(12) {
	top: 50%;
	left: 20%;
	animation-delay: 5.5s;
	}

	.star:nth-child(13) {
	top: 55%;
	left: 45%;
	animation-delay: 1.2s;
	}

	.star:nth-child(14) {
	top: 45%;
	left: 45%;
	animation-delay: 3.8s;
	}

	.star:nth-child(15) {
	top: 38%;
	left: 25%;
	animation-delay: 3.4s;
	}

	.star:nth-child(16) {
	top: 40%;
	left: 40%;
	animation-delay: 0.5s;
	}

	.star:nth-child(17) {
	top: 50%;
	left: 50%;
	animation-delay: 5.3;
	}

	.star:nth-child(18) {
	top: 70%;
	left: 28%;
	animation-delay: 4.2s;
	}

	.star:nth-child(19) {
	top: 60%;
	left: 40%;
	animation-delay: 3s;
	}

	.star:nth-child(20) {
	top: 40%;
	left: 48%;
	animation-delay: 2s;
	} //这里通过keyframes关键帧设置了动画效果使每个流星从出现到消失经历了宽度从0变为100px再变为0消失的过程

	@keyframes scaling {
	0% {
	width: 0;
	}
	50% {
	width: 100px;
	}
	100% {
	width: 0;
	}
	} //这里定义了动画效果moveTo使每个流星在宽度变化的过程中在x轴拉长300px
	@keyframes moveTo {
	0% {
	transform: translatex(0);
	}
	100% {
	transform: translatex(300px);
	}
	}



	</style>
	<body>
	//这里使html结构
	<div class="wrap">
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	</div>

	</body>

这个前端小特效不难，分享出来希望大家感兴趣的话，尽可实现下，里面用到了属性linear-gradient、transform: translatex()、@keyframes name{}、animation…

TIM截图20190725003034.png (27.48 KB, 下载次数: 6)

star(后缀名改为html才可打开看到特效).txt

4 KB, 下载次数: 41

流星雨特效源文件下载后文件后缀名改为html即可正常打开

作者: 大萌新 时间: 2019-7-25 00:41
这个是截的效果图，不过是静态的

TIM截图20190725003034.png (27.48 KB, 下载次数: 4)

作者: 大萌新 时间: 2019-7-25 00:43
效果为小星星从页面左上角向右下角坠落拖着长长的尾巴很好看！

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2