首页 > 代码库 > 有关动画的总结

有关动画的总结

2024-08-14 11:37:05   222人阅读

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;    }};

 

有关动画的总结


联系
我们