CSS3动画@keyframes图片变大变小颜色变化

互联网 18-10-10

在我做公司官网的时候也会帮着写一些游戏的静态页，今天产品要求为了突出一个按钮，他要有颜色的变化而且要变大变小，然后我就在网上搜了下呼吸灯和其他的案例，写了个小damo，看着还有些魔性嘞。

html：

<body>     <p class="color"></p>     <img class="change" src="img/dongtai.png"/> </body>

原理是这样的：body相对定位，.change绝对定位到.color上面，大小和.color一样，第一次刷新先显示.color，然后.change的透明度逐渐改变，与此同时，他们两个的大小也同时在改变

CSS

body{ 	position: relative; } .color{width:308px;height: 174px;background-color: lightskyblue;} .change{ 	position: absolute; 	top: 0; 	left: 0; 	animation-name: mychange;			/*动画的名字*/ 	animation-duration: 1000ms;		/*定义动画完成一个周期所需要的时间，以秒或毫秒计*/ 	animation-iteration-count: infinite;		/*定义动画的播放次数，这里是无限播放*/ 	animation-direction: alternate;			/*定义是否应该轮流反向播放动画，这里是动画轮流播放*/ } .color{ 	animation-name: mycolor; 	animation-duration: 1000ms; 	animation-iteration-count: infinite; 	animation-direction: alternate; } @keyframes mychange{　　　　/*mychange是动画的名字上面有用到*/ 	0% { 		opacity: .2; 		width: 308px; 		height: 174px; 	} 	100% { 		opacity: 1; 		width: 358px; 		height: 202px; 	} } @keyframes mycolor{ 	0% { 		width: 308px; 		height: 174px; 	} 	100% { 		width: 358px; 		height: 202px; 	} }

.color和.change的大小都是从宽：308px，高202px -->变化到宽358px，高174px。

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。更多相关教程请访问 CSS3视频教程！