时间:2021-07-01 10:21:17 帮助过:36人阅读
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视频教程!
相关推荐:
php公益培训视频教程
CSS在线手册
CSS3在线手册
div/css图文教程
css3特效代码大全
以上就是CSS3动画@keyframes图片变大变小颜色变化的详细内容,更多请关注Gxl网其它相关文章!