css实现烟雾效果（css制作汽车尾气排放效果）

最新推荐文章于 2023-10-09 13:23:06 发布

XujiRe

最新推荐文章于 2023-10-09 13:23:06 发布

阅读量1k

点赞数 4

分类专栏： css 文章标签： css css3 html5 交互前端

本文链接：https://blog.csdn.net/XujiRe/article/details/122211865

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前段时间项目要求做一个汽车尾气排放的特效，在网上看到一个文字变烟的效果，经过修改终于有汽车尾气排放的效果了，感动ing~
效果网址：http://chechao.cloudqz.com?share_uid=3（使用微信浏览器打开）
注意：看汽车排气位置
请添加图片描述

代码部分
html：

<body>
	<p class="smoke">
		这里直接输入文字如：烟烟烟烟烟烟烟烟烟烟烟烟烟烟烟
	</p>
</body>
<!--这里要在body外加一段js，可以使单个文字飘起来-->
<script>
	var txt = document.querySelector(".smoke");
	txt.innerHTML = txt.textContent.replace(/\S/g,"<span class='smoke_p'>$&</span>");
	var arr = document.querySelectorAll(".smoke_p");
	arr.forEach(function(temp){
		temp.classList.add('move');
	})
</script>

css：

/* 烟 */
.smoke{
	position: absolute;
	bottom: 93px;
	right: calc(-2%);
	/*这里要定义好div的大小，决定烟团的大小*/
	width: 120px;
	height: 80px;
	text-indent: 2em;
	/*文字颜色，即烟的颜色*/
	color: rgb(255, 255, 255);
	font-size: 18px;
	cursor: pointer;
	user-select: none;
	text-align: justify;
}
.smoke span{
	position: relative;
	display: inline-block;
	transform-origin: bottom;
	text-indent: 0;
}
.smoke .move{        
	animation: up 3s linear infinite;
}
@keyframes up{
	0%{
	opacity: 0.1;
	/*这里使用高斯吗，模糊+透明度，使文字糊掉*/
	filter: blur(10px);
	/* transform: translate(600px,-100px) rotate(360deg) scale(5); */
	}
	20%{
		opacity: 0.5;
		filter: blur(5px);
	}
	50%{
		opacity: 0.8;
		filter: blur(10px);
	}
	100%{
		opacity: 0.2;
		filter: blur(20px);
		transform: translate(100px,-100px) rotate(360deg) scale(3);
	}
}

//因为这里刚进页面不显示  所以延时显示烟雾
$(".smoke").hide();
setTimeout(function() {
	$(".smoke").fadeIn();
}, 2000);

好了，这是小编的一些开发思路，如果各位大佬有更好的方法，麻烦在下方评论或者私聊小编哦~
让小编一起学习。

XujiRe

关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
css实现烟雾效果（css制作汽车尾气排放效果）

css实现烟雾效果（css汽车尾气排放效果），泉州云上字节信息技术有限公司开发引流微信H5，前端，html css
复制链接

扫一扫

专栏目录

css实现烟雾效果（css制作汽车尾气排放效果）

“相关推荐”对你有帮助么？