欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

CSS transition、transform、animation

程序员文章站 2024-03-24 23:09:46
...

css transition

1.过度
.redDiv{
    margin: 100px auto;
    width: 30px;
    height: 50px;
    background-color: red;
    /*过度时间*/
    transition-duration: 2s;
    /*过度属性 希望那些样式变化的时候有过度效果 多个属性用逗号隔开 默认是all*/
    transition-property: height,background-color;
    /*过度的运动方式
    linear 匀速
    ease 先慢再快
    ease-in 变快
    ease-out 变慢
    ease-in-out 先快再慢 
    */
    transition-timing-function: ease;
    /*过度延时*/
    transition-delay: 1s;
    /*复合写法:*/
    transition: all 1s 2s linear;
    /*兼容性*/
    /*谷歌 - webkit内核*/
    -webkit-transition: all 1s 2s linear;
    /*火狐*/
    -moz-transition: all 1s 2s linear;
    /*IE*/
    -ms-transition: all 1s 2s linear;
    /*欧朋*/
    -o-transition: all 1s 2s linear;
    transition: all 1s 2s linear;
}
.redDiv:hover{
    height: 360px;
    background-color: blue;
}

css transform

2.形变 
    穿件几个div
    <div class="rotate">旋转</div>
    <div class="translate">平移</div>
    <div class="scale">缩放</div>
    <div class="skew">倾斜</div>
    使用transform属性 产生旋转 平移 缩放 倾斜的效果
    div{
        width: 200px;
        height: 200px;
        background-color: red;
        color: white;
        text-align: center;
        line-height: 200px;
        font-size: 30px;
        margin-left: 100px;
        float: left;
        transition: 1s linear;
    }
    .rotate{
        /*旋转*/
        transform: rotate(0deg);
    }
    .rotate:hover{
        transform: rotate(1800deg);
    }
    .translate{
        /*平移*/
        transform: translate(0px, 0px);
    }
    .translate:hover{
        transform: translate(10px, 10px);
    }
    .scale{
        /* 缩放 */
    /*  transform: scale(2);*/
        transform: scale(0.5,2);
    }
    .skew{
        /* 倾斜 */
        /*skewX skewY skew
        */
        transform: skewY(20deg);
    }

css animation

3.动画
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <style>
        .redDiv{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 0px;
            top: 0px;
            /*动画名字*/
            animation-name: run;
            /*动画时长*/
            animation-duration: 1s; 
            /*动画运动的方式*/
            animation-timing-function: linear;
            /*动画延时*/
            /*animation-delay: 1s;*/ 
            /*动画次数 infinite 无限*/
            animation-iteration-count: 1; 
            /*动画方向 reverse 反向
                      normal 正向
                      alternate 正向1/3/5 反向2/4/6 交替
                      alternate-reverse 
            */
            animation-direction: normal; 
            /*forwards 动画之后停留在当前位置
              backwards 
              在动画延时期间,元素的位置在动画起始的位置
              both 上面两个都有   
            */
            animation-fill-mode: both;
            /*animation: ; */
            /*-webkit-animation: ; */

        }
        @keyframes run{
            0%{
                left: 0px;
            }
            25%{
                left: 250px;
            }
            75%{
                left: 250px;
            }
            100%{
                left: 500px;
            }
        }
    </style>
</head>
<body>
    <div class="redDiv"></div>
</body>
</html>

上一篇： C# vb .net图像合成-多图片叠加合成

下一篇：

推荐阅读