• css3中的动画 @keyframes animation


    动画的运用比较重要。接下来我希望针对我自己学习遇到的问题,再总结一下这个属性的使用方法。

      创建一个动画:

        @keyframes 动画名 {样式}

      引用自己创建的动画

        animation:动画名  时长(执行多长时间)  效果  开始时间(多久之后开始);

              其中 效果 开始时间是可以省略的。

      举个栗子:div获得鼠标焦点时会改变宽度

     1 <div class="dh1"></div>
     2 
     3 <style>
     4         div{
     5             border: 1px solid black;
     6             width: 100px;
     7             height: 100px;
     8         }
     9         /*创建一个动画myDongHua1 内容是在不同时间段改变div的宽度*/
    10         @keyframes myDongHua1 {
    11             0%{width: 300px;}
    12             50%{width: 200px;}
    13             100%{width: 600px;}
    14         }
    15         /*调用动画效果 animation: 动画名 执行时间长度;*/
    16         .dh1:hover{
    17             animation:myDongHua1 1s;
    18         }
    19 </style>

      再举个栗子:当div获得鼠标焦点时 颜色会从yellow变成blue

        

     1 <div class="dh2"></div>
     2 
     3 <style>
     4         div{
     5             border: 1px solid black;
     6             width: 100px;
     7             height: 100px;
     8         }
     9         /*创建一个动画myDongHua2 内容是分阶段改变div颜色*/
    10         @keyframes myDongHua2{
    11             from{background:yellow;}
    12             to{background:blue;}
    13         }
    14         /*调用动画效果 animation: 动画名 执行时间长度;*/
    15         .dh2:hover{
    16             animation:myDongHua2 3s;
    17         }
    18 </style>

      

      再再举个栗子:当div获得鼠标焦点会出发 CD的旋转动画效果

     1 <div class="CDtum">
     2     <img src="img/cd.png" alt=""/>    <!--此处引入一个CD的圆形图片-->
     3 </div>
     4 
     5 <style>
     6 
     7         /*cd旋转实例*/
     8         .CDtum{
     9             width: 200px;
    10             height: 200px;
    11         }
    12         .CDtum img{
    13             width: 200px;
    14             height: 200px;
    15             border-radius: 100%;
    16         }
    17         /*设置动画从0度旋转到360度*/
    18         @keyframes CDtum{
    19             from{transform:rotate(0deg)}
    20             to{transform:rotate(360deg)}
    21         }
    22         /*调用动画 3秒内完成 linear:匀速 3表示只进行三次动画    可以用infinite 来无限执行*/
    23         .CDtum img:hover{
    24             animation:CDtum 3s linear 3 ;
    25         }
    26 </style>
    
    
    
  • 相关阅读:
    远程调用丢失请求头与定义RequestInterceptor
    RabbitMQ 高级特性
    注解@ConfigurationProperties使用方法
    Redisson
    分布式缓存
    DEA 无法显示 Run Dashboard 的解决方法
    node多版本切换
    springboot整合amazonS3,封装上传文件接口
    Maven报错:The packaging for this project did not assign a file to the build artifact
    Nodejs介绍及npm工具使用
  • 原文地址:https://www.cnblogs.com/Lin-Yi/p/6799250.html
Copyright © 2020-2023  润新知