使用HTML写动态图画

最新推荐文章于 2024-12-23 16:29:35 发布

原创最新推荐文章于 2024-12-23 16:29:35 发布 · 1k 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

HYYY77

关注

标签

#css #css3 #前端

分类前端开发

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>动画</title>
       <style type="text/css">
           /* 动画:
           1.创建关键帧:
           2.绑定动画：
           */
           .box1{
               width: 300px;
               height: 300px;
               background-color: pink;
               /* 2.绑定动画:
               animation:动画名称，持续时间
               infinite：无限的
               */
               animation: change 5s infinite;
           }
           /* 1.创建关键帧: */
           @keyframes change{
               from{ /* 开始帧 */
                   width: 300px;
                   height: 300px;
                   transform: rotate(0);
               }
               to{ /* 结束帧 */
                   width: 1200px;
                   height: 100px;
                   transform: rotate(360deg);
               }
               /* 百分比控制时间，在某一秒时的状态
               0%(0秒时){
                   width: ;
                   height: ;
                   transform: ;
               }
               30%（3秒时）{
                   width: ;
                   height: ;
                   transform: ;
               }
               50%，70%（5秒-7秒时，保持某种状态一段时间）{
                   width: ;
                   height: ;
                   transform: ;
               }
               100%{
                   width: ;
                   height: ;
                   transform: ;
               }
           */
           /*方便在各个网站运行
           @-webkit-keyframes name{
               from{}
               to{}
           }
           @-moz-document name{
               from{}
               to{}
           }
           @-ms-viewport name{
               from{}
               to{}
           } */
       </style>
   </head>
   <body>
       <div class="box1"></div>
   </body>
</html>