HTML的动画

最新推荐文章于 2024-02-15 09:15:57 发布

接着看日落

最新推荐文章于 2024-02-15 09:15:57 发布

阅读量176

点赞数

文章标签： html html5

本文链接：https://blog.csdn.net/2301_77161151/article/details/133621341

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style type="text/css">
           .boss {
               width: 200px;
               height: 200px;
               border: 5px solid #000;
               /* margin: 200px auto 0 auto; */
               /* 透视 */
               /* perspective: 100px; */
           }
           .box1 {
               width: 200px;
               height: 200px;
               background-color: pink;
               font-size: 30px;
               /* 过渡 */
               transition: all 5s linear 2s;
               /* transition: css过渡样式过渡时间运动曲线开始时间;
                                   all       s|ms   ease s|ms */
               /* transition-property   指定CSS属性的name，transition效果
               transition-duration   transition效果需要指定多少秒或毫秒才能完成
               transition-timing-function   指定transition效果的转速曲线
               linear   匀速。
               ease   规定慢速开始，然后变快，然后慢速结束的过渡效果。
               ease-in   规定以慢速开始的过渡效果。
               ease-out   规定以慢速结束的过渡效果。
               ease-in-out   规定以慢速开始和结束的过渡效果。

               transition-delay   定义transition效果开始的时候 */
               /* transform-style: preserve-3d; */
           }
           /* 要创建 CSS3 动画，你需要了解 @keyframes 规则。 */
           /* animation: 选择器的关键名称动画时间运动曲线开始的时间播放次数
           是否反复播放是否运用最后一帧动画的样式是否暂停或播放;

           animation-name   指定要绑定到选择器的关键帧的名称
           animation-duration   动画指定需要多少秒或毫秒完成
           animation-timing-function   设置动画将如何完成一个周期
           animation-delay   设置动画在启动前的延迟间隔。
           animation-iteration-count   定义动画的播放次数。
           animation-direction   指定是否应该轮流反向播放动画。
           animation-fill-mode   规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
           animation-play-state   指定动画是否正在运行或已暂停。

           linear   动画从头到尾的速度是相同的。
           ease   默认。动画以低速开始，然后加快，在结束前变慢。
           ease-in   动画以低速开始。
           ease-out   动画以低速结束。
           ease-in-out   动画以低速开始和结束。

           infinite 无限播放

           normal   默认值。动画按正常播放。   测试 »
           reverse   动画反向播放。   测试 »
           alternate   动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。   测试 »
           alternate-reverse   动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。

           none   默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。
           forwards   在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。
           backwards   动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 "normal" 或 "alternate" 时）或 to 关键帧中的值（当 animation-direction 为 "reverse" 或 "alternate-reverse" 时）。
           both   动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。

           paused   指定暂停动画   测试 »
           running   指定正在运行的动画*/
           .box2 {
               width: 200px;
               height: 200px;
               background-color: red;
               animation: move 3s linear 0s 1 normal forwards;
           }
           @keyframes move{
               from{
                   width: 200px;
                   background-color: red;
               }
               to{
                   width: 500px;
                   height: 500px;
                   background-color: orange;
               }
           }
       </style>
   </head>
   <body>
       <button type="button" οnclick="func1()">按钮1</button>
       <button type="button" οnclick="func2()">按钮2</button>
       
       <div class="box2">11111111</div>
   </body>
   <script type="text/javascript">
       // var box1 = document.getElementsByClassName("box1")[0];
       var box2 = document.getElementsByClassName("box2")[0];
       function func1(){
           // box1.style.transform = "translate3d(0px,0px,200px)";
           // box1.style.transform = "rotate3d(0,0,100,30deg)";
           // box1.style.transform = "rotateX(30deg)";
           // rotate3d(x,y,z,angle)
           // box1.style.width = "500px";
           // box1.style.height = "500px";
           box2.style.animationPlayState ="paused";
       }
       function func2(){
           // box1.style.transform = "translate(0px,0px)";
           // box1.style.transform = "rotateY(30deg)";
           box2.style.animationPlayState ="running";
       }
   </script>
</html>

接着看日落

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
HTML的动画

这些都是 from 关键帧中的值（当 animation-direction 为 "normal" 或 "alternate" 时）或 to 关键帧中的值（当 animation-direction 为 "reverse" 或 "alternate-reverse" 时）。animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。animation-iteration-count 定义动画的播放次数。none 默认值。
复制链接

扫一扫