当前位置:Gxlcms > css > CSS3动画@keyframes图片变大变小颜色变化

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

时间:2021-07-01 10:21:17 帮助过:36人阅读

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

html:

  1. <body>
  2. <p class="color"></p>
  3. <img class="change" src="img/dongtai.png"/>
  4. </body>

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

CSS

  1. body{
  2. position: relative;
  3. }
  4. .color{width:308px;height: 174px;background-color: lightskyblue;}
  5. .change{
  6. position: absolute;
  7. top: 0;
  8. left: 0;
  9. animation-name: mychange;
  10. /*动画的名字*/
  11. animation-duration: 1000ms;
  12. /*定义动画完成一个周期所需要的时间,以秒或毫秒计*/
  13. animation-iteration-count: infinite;
  14. /*定义动画的播放次数,这里是无限播放*/
  15. animation-direction: alternate;
  16. /*定义是否应该轮流反向播放动画,这里是动画轮流播放*/
  17. }
  18. .color{
  19. animation-name: mycolor;
  20. animation-duration: 1000ms;
  21. animation-iteration-count: infinite;
  22. animation-direction: alternate;
  23. }
  24. @keyframes mychange{    /*mychange是动画的名字上面有用到*/
  25. 0% {
  26. opacity: .2;
  27. width: 308px;
  28. height: 174px;
  29. }
  30. 100% {
  31. opacity: 1;
  32. width: 358px;
  33. height: 202px;
  34. }
  35. }
  36. @keyframes mycolor{
  37. 0% {
  38. width: 308px;
  39. height: 174px;
  40. }
  41. 100% {
  42. width: 358px;
  43. height: 202px;
  44. }
  45. }

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

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

相关推荐:

php公益培训视频教程

CSS在线手册

CSS3在线手册

div/css图文教程

css3特效代码大全

以上就是CSS3动画@keyframes图片变大变小颜色变化的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行