介绍
小编给大家分享一个CSS3动画@keyframes图片大小和颜色变化的例子。 希望您读完本文后有所收获。 让我们一起来解释一下吧！
html:
& lt; body> ,,,& lt; p 类=癱olor"祝辞& lt;/p> ,,,& lt; img 类=癱hange", src=https://www.yisu.com/zixun/" img/dongtai.png "/>
原理是这样的：body相对定位，.change绝对定位在.color里面，大小和.color一样，第一次刷新先显示.color，然后。 透明度的变化是逐渐变化的css3从小变大，同时两者的大小也在CSS发生变化
身体{
位置:,相对;
}
.color{宽度:308 px;高度:174 px; background:, lightskyblue;}
.change {
位置:绝对的;
顶部:0;
左:0;
animation-name: mychange;/*动画的名字*/动画:1000毫秒;/*定义动画完成一个周期所需要的时间,以秒或毫秒计*/animation-iteration-count:无限;/*定义动画的播放次数,这里是无限播放*/动画方向:备用;/*定义是否应该轮流反向播放动画,这里是动画轮流播放*/}
.color {
animation-name: mycolor;
动画:1000毫秒;
animation-iteration-count:无限;
动画方向:备用;
}
@keyframes mychange {/* mychange是动画的名字上面有用到*/0%,{
透明度:2;
宽度:308 px;
身高:174 px;
}
100%,{
透明度:1;
宽度:358 px;
身高:202 px;
}
}
@keyframes mycolor {
0%,{
宽度:308 px;
身高:174 px;
}
100%,{
宽度:358 px;
身高:202 px;
}
}
.颜色和. 尺寸从宽度：308px、高度：202px、- 到宽度：358px、高度：174px。
读完这篇文章，相信你对“CSS3动画@keyframes图像大小改变示例”有了一定的了解。 如果您想了解更多css3从小变大，请关注行业资讯频道，感谢您的阅读！
CSS3动画@keyframes图像变大变小颜色变化的例子
