首页 > 其他 > 详细

##CS3动画效果

时间:2019-06-20 19:47:13      阅读:109      评论:0      收藏:0      [点我收藏+]

CS3动画效果

 

1 转换

 

? 转换的属性 :transform

 

? 属性值 : transform-function none

 

? 转换原点 旋转过程中 :默认是元素中心点处

 

? 属性:transform-origin

 

? 2 2 D 转换

 

? 位移: 位置的变化

 

? 缩放: 元素大小的变换 缩小 0-1 放大>1

 

? 旋转:安照一定角度 实现旋转 相当于方向改变

 

? 位移: 函数 translate(x)

 

? 缩放: 元素大小的变换 缩小 0-1 放大>1 scale(参数)

 

? 旋转:安照一定角度 实现旋转 相当于方向改变 rotate(ndeg) n为正 顺时针旋转

 

? 倾斜 skew(xdeg) skewY(20deg)

 

        /*偏移*/
            transform: translate(100px);
            /*如果是负值,那么就是反转,如果大于1,那么放大,如果是0-1之间,那么就是缩小*/
            transform: scale(-1);
            transform-origin: left;
            /*翻转*/
            /*transform: rotate(45deg);*/
            /*倾斜*/
            transform: skew(30deg);

 

 

? 3 3D转换

 

? perspective假定人眼投射到平面的距离

 

? 该属性必须定义在父元素上 其子元素能够实现3d转换的效果

 

? 注意浏览器兼容 -webkit-perspective

 

? 属性:transform

 

? 位移: transformZ(z);

 

? transform3D(x,y,z);

 

旋转: rotateY(ndeg);

 

? rotate(x,y,z,ndeg);

 

4 过渡

 

? 什么是过度

 

? css样式属性值在一段时间内平滑的过度

 

? 属性

 

? transition-property

 

? 取值:none

 

? all

 

? property

 

? 允许过度的属性: 颜色 取值为数值的属性 转换-transform 渐变属性 visibility

 

transition: border-radius 10s linear 0s,background 10s ease 10s;

 

 

5 过渡

 

? 属性 transition-duration 取值 s|ms

 

6 设置过度时间曲线函数

 

属性: transition-timing-function

 

? 取值: ease 匀速

 

? ease-in 加速

 

? ease-out

 

? ease-in-out

 

7 过度延迟

 

? transition-delay

 

8 动画效果

 

关键帧 控制动画的每一步

 

8.1 处理兼容性问题

 

? -moz-

 

-webkit-

 

-o-

 

-ms-

 

8.2 怎么来使用

 

? 1 生明动画

 

? 创建一个动画 并且指定名称 通过@keyframes 关键词生明动画的关键帧

 

? 2 为元素调用动画 动画名称

 

播放时间

 

、播放的次数

 

播放的方向

 

语法

 

@keyframs 动画名称{

 

from |0%{

 

//动画开始的动作 css样式

 

}

 

50%{

 

//动画中间的动作 css样式

 

}

 

to|100%{

 

//动画结束的动作 css样式

 

}

 

}

 

       /*给这个动画起个名字*/
            animation-name:color ;
            /*延迟的时间*/
            animation-duration:5s ;
            /*速度:匀速*/
            animation-timing-function: ease;
            /*设置播放次数*/
            animation-iteration-count:infinite ;/*无限播放次数*/
            /*动画播放的方向  normal  逆向播放reverse  轮流播放:alternate*/
            animation-direction:alternate ;
            /*animation-direction: normal;*/
            /*animation-direction: reverse;*/

            -webkit-animation-name: color;
            -webkit-animation-duration:5s ;
            -webkit-animation-timing-function: ease;
            -webkit-animation-iteration-count:infinite ;
            -webkit-animation-direction:alternate ;
        }
        .box:hover{
            animation-play-state: paused;
        }
        @-moz-keyframes color {
            0%{
                background-color: red;
                width: 100px;
            }
            25%{
                background-color: #42fff3;
                width: 100px;
            }
            50%{
                background-color: green;
                width: 200px;
            }
            75%{
                background-color: #ff27d6;
                width: 300px;
            }
            100%{
                background-color: blue;
                width: 500px;
            }
        }
        @-webkit-keyframes color {
            0%{
                background-color: red;
                width: 100px;
            }
            25%{
                background-color: #42fff3;
                width: 100px;
            }
            50%{
                background-color: green;
                width: 200px;
            }
            75%{
                background-color: #ff27d6;
                width: 300px;
            }
            100%{
                background-color: blue;
                width: 500px;
            }
        }
        @-o-keyframes color {
            0%{
                background-color: red;
                width: 100px;
            }
            25%{
                background-color: #42fff3;
                width: 100px;
            }
            50%{
                background-color: green;
                width: 200px;
            }
            75%{
                background-color: #ff27d6;
                width: 300px;
            }
            100%{
                background-color: blue;
                width: 500px;
            }
        }
        @-ms-keyframes color {
            0%{
                background-color: red;
                width: 100px;
            }
            25%{
                background-color: #42fff3;
                width: 100px;
            }
            50%{
                background-color: green;
                width: 200px;
            }
            75%{
                background-color: #ff27d6;
                width: 300px;
            }
            100%{
                background-color: blue;
                width: 500px;
            }

 

 

? 调用动画名称

 

? 属性 animation-name:

 

动画执行时间长度

 

? aanimation-duration

 

动画执行的曲线函数

 

? animation-timing-function 取值:ease

 

aniation

 

name duration timing-function delay

 

##CS3动画效果

原文:https://www.cnblogs.com/liurui-bk517/p/11060655.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!