• 动画


    首先创建一个动画
    @keyframes move(这是动画的名字){
          from{
                                            }    
             to{                    
                                            }

         0%{
                     }
          50%{
                       }
            100%{
                        }----------动画移动到时间的0% 50% 100%时的效果;------------
    }
    然后设置这个动画的宽高,及其他:
         width:
         height:
         background:
        top:
        left:
        animation:move(动画的名字)3s(动画运行的时间)1;(动画运行的次数;infinite是重复)

    animation:move 3s  infinite;可以分解为
     
                                              animation-name:move;------动画的名字
                                              animation-duration:3s;-------设置动画播放的时间;
                                              animation-iteration-count;---------动画的播放次数;
                                               ------------------------------
                                              animation-timing-function:linear;----设置动画的速度曲线;
                                              animation-delay:1s; -----设置动画的延长时间;
                                              animation-direction:alternate;-----设置是否反向运动;
                                              animation-fill-male:farwards;-----设置动画执行反停在那种状况下;
                                              animation-play-state:paused;------设置当前动画播放状态;
     
                                             transform:rotate(360deg);-----旋转;
                                             transform:scale(.5);-----缩放;
                                             transform:translate(600px);--------平移;
                                             transform:skew(45deg);-------------倾斜;
                                             如果运用的transform属性较多那么就写在一起,否则下面的属性会覆盖上面的属性。
                                        
  • 相关阅读:
    MySQL中如何使用布尔类型【转】
    你所不知道的Android Studio调试技巧【转】
    设计模式之工厂模式(factory pattern)【转】
    layuiadmin+tp5后台内容管理系统【转】
    PHPStorm怎么修改选中的背景颜色呢?【转】
    PHP保留两位小数的几种方法【转】
    jquery的css()函数同时设置多个css属性值
    Flutter text设置行间距【转】
    Flutter入门-布局Container、Padding、Align、Center【转】
    redis下载地址
  • 原文地址:https://www.cnblogs.com/cntt/p/6418152.html
Copyright © 2020-2023  润新知