【H5/CSS】CSS动画

  • 【H5/CSS】CSS动画已关闭评论
  • 18 次浏览
  • A+
所属分类:Web前端
摘要

CSS动画:
就是指元素从一种样式逐渐过渡为另一种样式的过程。实现方式实现无限循环的伸缩动画


What

CSS动画:
就是指元素从一种样式逐渐过渡为另一种样式的过程。

实现方式

  • transition 实现渐变动画
  • transform 实现转变动画
  • animation 实现自定义动画

实现方式

transition 实现渐变动画

思维导图

【H5/CSS】CSS动画

案例

【H5/CSS】CSS动画

点击查看代码
<!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8" />     <meta http-equiv="X-UA-Compatible" content="IE=edge" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <title>Document</title>     <script type="text/javascript" src="../js/vue.js"></script>   </head>   <body>     <style>       .base {         width: 50px;         height: 50px;         display: inline-block;         background-color: red;         border-width: 5px;         border-style: solid;         border-color: black;         transition-property: width, height, background-color, border-width;         transition-duration: 2s;         transition-timing-function: ease-in;         transition-delay: 500ms;       }       .base:hover {         width: 100px;         height: 100px;         background-color: black;         border-width: 10px;         border-color: red;       }     </style>     <div class="base"></div>   </body> </html> 

transform 实现转变动画

思维导图

【H5/CSS】CSS动画

案例

【H5/CSS】CSS动画

点击查看代码
<!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8" />     <meta http-equiv="X-UA-Compatible" content="IE=edge" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <title>Document</title>     <script type="text/javascript" src="../js/vue.js"></script>   </head>   <body>     <style>       .base {         width: 50px;         height: 50px;         display: inline-block;         background-color: red;         border-width: 5px;         border-style: solid;         border-color: black;         transition-property: width, height, background-color, border-width;         transition-duration: 2s;         transition-timing-function: ease-in;         transition-delay: 500ms;       }       .base2 {         transform: none;         transition-property: transform;         transition-delay: 5ms;       }       .base2:hover {         transform: scale(1, 1.5) rotate(10deg) skew(10deg)           translate(100px, 25px); /* 上下,左右 */       }     </style>     <div class="base base2"></div>   </body> </html>  

animation 实现自定义动画

思维导图

【H5/CSS】CSS动画

案例

实现无限循环的伸缩动画
【H5/CSS】CSS动画

除了可以用百分比来表示变化,还可以用from to。

点击查看代码
<!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8" />     <meta http-equiv="X-UA-Compatible" content="IE=edge" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <title>Document</title>     <script type="text/javascript" src="../js/vue.js"></script>   </head>   <body>     <style>       .anima {         /* 动画名称 */         width: 100px;         height: 100px;         animation-name: likes;         /* 动画在奇数次(1、3、5...)正向播放,在偶数次(2、4、6...)反向播放。 */         animation-direction: alternate;         animation-timing-function: linear;         animation-delay: 0s;         /* 动画播放次数,infinite:一直播放 */         animation-iteration-count: infinite;         /* 动画完成时间 */         animation-duration: 1s;       }        @keyframes likes {         0% {           transform: scale(1);         }         25% {           transform: scale(0.9);         }         50% {           transform: scale(0.85);         }         75% {           transform: scale(0.9);         }         100% {           transform: scale(1);         }       }     </style>     <image class="anima" mode="widthFix" src="./my_view.jpg" alt="【H5/CSS】CSS动画"></image>   </body> </html>