zoukankan      html  css  js  c++  java
  • 有关动画的总结

    1)如果按照从本身位置开始移动,则translate3d使用百分比,如0%~300%;如果按照页面中的位置尺寸移动,则使用具体的px值。比如该元素开始在100px处,使用动画

    translate3d(0, 15px, 0),则该元素先移动到15px处;(注意该元素要设置position:absloute;)
    @include keyframes(arrow-move, webkit){
        0% {
          opacity: 1;
          @include transform(translate3d(0, 0, 0));
          visibility: visible;
        }
        50% {
          opacity: 1;
          @include transform(translate3d(0, 150%, 0));/*百分比是相对本身尺寸而言的*/
        }
        100% {
          opacity: 1;
          @include transform(translate3d(0, 300%, 0));/*里面的参数是移动到哪个长度位置,而不是移动的长度*/
        }
    };

    2)

    .cloud{
        width:187px;
        height:92px;
        background: url('./i/cloud.png');
        &.fd-move{/*&.fa-move相当于和cloud同等级别的类,一般用于js中addClass作用*/
            /*infinite动画无限运动,或者设置为n,n为运动的次数*/
                @include animation(arrow-move 1s infinite linear);
            }
    }

    3)使用scss中段样式的方法来化简css

    @mixin center{
        background:red;
        border:2px solid green;
    }
    .line{
            position: absolute;
            width: 100%;
            height: 10px;
            top: 368px;
            @include center;
        }
    
    .ceshi{
            position: absolute;
            width: 100%;
            height: 100px;
            top: 400px;
            @include center;
    }

    这样相当于line和ceshi中都引入了样式center

    4)

    //文字动画
    @include keyframes(txt-move-sr, webkit){/*该div的高度由小到大*/
        0% {
          height: 0;
        }
        100% {
          height: 1.55rem;
        }
    };
  • 相关阅读:
    MongoDB对比关系型数据库
    Swagger 打开时自动折叠
    更改Linux定时任务crontab启动基目录
    linux系统/etc/init.d目录下的开机自启脚本
    vue 中新窗口打开vue页面 (this.$router.resolve)
    树莓派4B如何手动固定IP地址
    树莓派无显示器设置WiFi、开启ssh、开启VNC
    递归
    学习-HTML5
    只是为了表示我还有在敲代码
  • 原文地址:https://www.cnblogs.com/xiaozhumaopao/p/5901034.html
Copyright © 2011-2022 走看看