几个简单有趣的CSS动画

在 css 中，@keyframes 定义动画的关键帧，css 样式将会根据定义好的关键帧播放动画。

.a {
	width: 200px; height: 200px; background-color: red;
	/* 动画的名称 */
	animation-name: resize;
	/* 动画播放的事件长度 */
	animation-duration: 5s;
	/* 动画播放的次数 */
	animation-iteration-count: 2;
	}
	
@keyframes resize {
	0% { width: 10px;height: 10px; }
	100% { width: 200px; height: 200px;}
}

在 css 中可以使用 rgba 或者 opacity 来设置透明度.

呼吸灯

<style>
	span {
		width: 10px;
		height: 10px;
		display: inline-block;
		border-radius: 50%;
		background-color: green;
	}
    
	.r {
		background-color: red;
		animation-name: lig;
		animation-duration: 1s;
		animation-iteration-count: infinite;
	}
    
	.y {
		background-color: orange;
		animation-name: lig;
		animation-duration: 1s;
		animation-iteration-count: infinite;
	}
    
	@keyframes lig {
		0% { opacity: 0.1; }
		100% { opacity: 1; }
	}
</style>

<span></span> 绿灯常亮：一切正常
<hr>
<span class="r"></span> 红灯闪烁：出现异常
<hr>
<span class="y"></span> 黄灯闪烁：出现警告

进度条

<style>
	.box {
		width: 600px; height: 30px;
		border: 1px solid red;
	}
    
	.bar {
		width: 0px; height: 30px; background-color: green;
		animation-name: pb;
		animation-duration: 3s;
		animation-iteration-count: 1;
		/* forwards 当动画播放结束后，停留在最后的状态
		   backwards 当动画播放结束后，还原为最初的状态 */
		animation-fill-mode: forwards;
		}
    
	@keyframes pb {
		0% { width: 0%; }
		100% { width: 100%; }
	}
</style>

<div class="box">
<div class="bar"></div>
</div>

Loading

<style>
    img {
        animation-name: trans;
        animation-duration: 0.4s;
        animation-iteration-count: infinite;
    }
    @keyframes trans {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
</style>

<img  src="https://oss.gaojie.cc/tedurefrush.png"/>