CSS3烟囱冒烟动画效果

CSS3烟囱冒烟动画效果

点击查看演示

一、案例分析

1、每个烟囱 用一个无序列表li表示。

2、无序列表ul放置在页面下方transform: translateX(-50%)。

3、对li标签，进行奇，偶数配置，奇数向左飘，偶数向右飘。

4、对每个li标签，做单独配置，添加动画时间延迟animation-delay，我们的li标签，不断的向左蒸发，不断的向右蒸发。

二、HTML源代码

<ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>

三、CSS源代码

<style type="text/css">
	*{
		margin: 0;
		padding: 0;
		list-style: none;
		font-style: normal;
	}
	html,body{
		width: 100%;
		height: 100%;
	}
	body{
	        background-color: lightcoral;
		overflow: hidden;
	}
	ul{
		width: 80px;
		height: 80px;
		position: absolute;
		bottom: 0;
		left: 50%;
		outline: 1px dashed red;
		transform: translateX(-50%);
	}
</style>

在整个页面的正下方（屏幕中间最下方），预览效果：

接着，修饰li元素的样式：

	ul li{
		position: absolute;
		width: 80px;
		height: 80px;
		background-color: #fff;
		border-radius: 50%;
	}

预览效果如下所示：

接着，对li标签，进行奇，偶数配置，奇数向左飘，偶数向右飘。

css：

	ul li:nth-child(odd){
		animation: animateOdd 3s linear infinite;
	}
	ul li:nth-child(even){
		animation: animateEven 3s linear infinite;
	}
	@keyframes animateOdd{
		0%{
			transform: translate(0,0) scale(1);
			opacity: 1;
			filter: blur(8px);
		}
		100%{
			transform: translate(-100px,-500px) scale(3);
			opacity: 0;
			filter: blur(15px);
		}
	}
	@keyframes animateEven{
		0%{
			transform: translate(0,0) scale(1);
			opacity: 1;
			filter: blur(8px);
		}
		100%{
			transform: translate(100px,-500px) scale(3);
			opacity: 0;
			filter: blur(15px);
		}
	}

预览效果，如下所示：

对每个li标签，做单独配置，添加动画时间延迟animation-delay，我们的

li标签，不断的向左蒸发，不断的向右蒸发。

注意：这里的动画时间延迟需要添加在动画样式的的下面，不然样式会被覆盖，效果出不来。

css:

	ul li:nth-child(1){animation-delay: 0s;}
	ul li:nth-child(2){animation-delay: 0.4s;}
	ul li:nth-child(3){animation-delay: 0.8s;}
	ul li:nth-child(4){animation-delay: 1.2s;}
	ul li:nth-child(5){animation-delay: 1.6s;}
	ul li:nth-child(6){animation-delay: 2s;}
	ul li:nth-child(7){animation-delay: 2.4s;}
	ul li:nth-child(8){animation-delay: 2.8s;}
	ul li:nth-child(9){animation-delay: 3.2s;}

最后把最下面的 实体圆去掉，下面的宽高注释掉即可

ul{

/* width: 80px;

height: 80px; */

position: absolute;

bottom: 0;

left: 50%;

outline: 1px dashed red;

transform: translateX(-50%);

}

最终效果如下所示：