杭州黑马前端6期技术交流贴-流星雨前端特效(附源码)【黑马web前端】

更新时间:2023年03月06日 11时29分51秒来源:黑马程序员论坛

来黑马之前曾在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, 下载次数: 0)

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

4 KB, 下载次数: 0

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

推荐了解热门学科

java培训	Python人工智能	Web前端培训	PHP培训
区块链培训	影视制作培训	C++培训	产品经理培训
UI设计培训	新媒体培训	产品经理培训	Linux运维
大数据培训	智能机器人软件开发

传智播客是一家致力于培养高素质软件开发人才的科技公司，“黑马程序员”是传智播客旗下高端IT教育品牌。自“黑马程序员”成立以来，教学研发团队一直致力于打造精品课程资源，不断在产、学、研3个层面创新自己的执教理念与教学方针，并集中“黑马程序员”的优势力量，针对性地出版了计算机系列教材50多册，制作教学视频数+套，发表各类技术文章数百篇。

传智播客从未停止思考

传智播客副总裁毕向东在2019IT培训行业变革大会提到，“传智播客意识到企业的用人需求已经从初级程序员升级到中高级程序员，具备多领域、多行业项目经验的人才成为企业用人的首选。”

中级程序员和初级程序员的差别在哪里?
项目经验。毕向东表示，“中级程序员和初级程序员最大的差别在于中级程序员比初级程序员多了三四年的工作经验，从而多出了更多的项目经验。“为此，传智播客研究院引进曾在知名IT企业如阿里、IBM就职的高级技术专家，集中研发面向中高级程序员的课程，用以满足企业用人需求，尽快补全IT行业所需的人才缺口。

何为中高级程序员课程?

传智播客进行了定义。中高级程序员课程，是在当前主流的初级程序员课程的基础上，增加多领域多行业的含金量项目，从技术的广度和深度上进行拓展。“我们希望用5年的时间，打造上百个高含金量的项目，覆盖主流的32个行业。”传智播客课程研发总监于洋表示。

黑马程序员热门视频教程【点击播放】

Python入门教程完整版（懂中文就能学会）	零起点打开Java世界的大门
C++\| 匠心之作从0到1入门学编程	PHP\|零基础入门开发者编程核心技术
Web前端入门教程_Web前端html+css+JavaScript	软件测试入门到精通

全国中心

杭州黑马前端6期技术交流贴-流星雨前端特效(附源码)【黑马web前端】

最新资讯

相关阅读