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

小编给大家分享一下CSS3动画@keyframes图片变大变小颜色变化的示例,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

成都创新互联公司是一家专业提供广陵企业网站建设,专注与成都网站设计、网站制作、外贸营销网站建设H5页面制作、小程序制作等业务。10年已为广陵众多企业、政府机构等服务。创新互联专业网站制作公司优惠进行中。

html:


    

    

原理是这样的: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动画@keyframes图片变大变小颜色变化的示例”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


网页名称:CSS3动画@keyframes图片变大变小颜色变化的示例
文章地址:http://myzitong.com/article/gojsdc.html