CSS 动画

Posted 2022-03-03 kikyoqiang

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS 动画相关的知识，希望对你有一定的参考价值。

1、CSS 动画2D3D转换

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>CSS 动画2D3D转换</title>
    <style>
        div 
            width: 100px;
            height: 100px;
            background-color: lightgray;
        

        .div3 
            transform: translate(200px,100px);
            -webkit-transform: translate(200px,100px); /*sagari chrome*/
            -ms-transform: translate(200px,100px); /*IE*/
            -o-transform: translate(200px,100px); /*opera*/
            -moz-transform: translate(200px,100px); /*firefox*/
        

        .div2 
            transform: rotate(180deg);
            -webkit-transform: rotate(180deg); /*sagari chrome*/
        

        .div3 
            transform: scale(1,2);
            -webkit-transform: scale(1,2); /*sagari chrome*/
        

        .div4 
            transform: skew(20deg,20deg);
            -webkit-transform: scale(1,2); /*sagari chrome*/
        

        .div5 
            transform: rotateX(200deg);
            -webkit-transform: rotateX(200deg); /*sagari chrome*/
        
    </style>
</head>
<body>
    <div>这是一个初始效果</div>
    <br />
    <div class="div5">改变后的效果</div>
</body>
</html>

2、CSS 动画过渡

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>CSS 动画过渡</title>
    <style>
        div 
            width: 100px;
            height: 100px;
            background-color: lightgray;
            -webkit-transition: width 2s,height 2s,-webkit-transform 2s;
            transition: width 2s,height 2s,transform 2s;
            -webkit-transition-delay:2s;
        

            div:hover 
                width: 200px;
                height: 200px;
                transform: rotate(360deg);
                -webkit-transform: rotate(360deg);
            
    </style>
</head>
<body>
    <div>效果展示</div>
</body>
</html>

3、CSS 动画效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>CSS 动画效果</title>
    <style>
        div 
            width: 100px;
            height: 100px;
            background-color: lightgray;
            position: relative;
            animation: anim 3s infinite alternate;
            -webkit-animation: anim 3s infinite alternate;
        
        @keyframes anim
            0% background-color:lightgray;left:0px;top:0px
            25%background-color:blue;left:200px;top:0px
            50%background-color:aqua;left:200px;top:200px
            70%background-color:red;left:0px;top:200px
            100%background-color:lightgray;left:0px;top:0px
        

    </style>
</head>
<body>
    <div>动画效果</div>
</body>
</html>

4、CSS 动画效果多列

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>CSS 动画效果 多列</title>
    <style>
        .div1 
            column-count: 4;
            -webkit-column-count: 4;
            -webkit-column-gap: 30px;
            column-gap: 30px;
            column-rule: 5px outset #ff0000;
            -webkit-column-rule: 5px outset #808080;
        
    </style>
</head>
<body>
    <div class="div1">
        大家好，我是渣渣辉，是兄弟就来砍我！
        大家好，我是渣渣辉，是兄弟就来砍我！
        大家好，我是渣渣辉，是兄弟就来砍我！
        大家好，我是渣渣辉，是兄弟就来砍我！
        大家好，我是渣渣辉，是兄弟就来砍我！
        大家好，我是渣渣辉，是兄弟就来砍我！
        大家好，我是渣渣辉，是兄弟就来砍我！
        大家好，我是渣渣辉，是兄弟就来砍我！
        大家好，我是渣渣辉，是兄弟就来砍我！
        大家好，我是渣渣辉，是兄弟就来砍我！
        大家好，我是渣渣辉，是兄弟就来砍我！
        大家好，我是渣渣辉，是兄弟就来砍我！
        大家好，我是渣渣辉，是兄弟就来砍我！
        大家好，我是渣渣辉，是兄弟就来砍我！
        大家好，我是渣渣辉，是兄弟就来砍我！
        大家好，我是渣渣辉，是兄弟就来砍我！
        大家好，我是渣渣辉，是兄弟就来砍我！
        大家好，我是渣渣辉，是兄弟就来砍我！
        大家好，我是渣渣辉，是兄弟就来砍我！
        大家好，我是渣渣辉，是兄弟就来砍我！
        大家好，我是渣渣辉，是兄弟就来砍我！
        大家好，我是渣渣辉，是兄弟就来砍我！
        大家好，我是渣渣辉，是兄弟就来砍我！
        大家好，我是渣渣辉，是兄弟就来砍我！
        大家好，我是渣渣辉，是兄弟就来砍我！
        大家好，我是渣渣辉，是兄弟就来砍我！
    </div>
</body>
</html>

5、CSS 动画效果瀑布流

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>CSS 动画效果 瀑布流</title>
    <style>
        img 
            width: 200px;
            /*height: 300px;*/
        

        .container 
            column-width: 200px;
            -webkit-column-width: 200px;
            -webkit-column-gap: 3px;
            column-gap: 3px;
        

            .container div 
                width: 200px;
                margin: 3px;
            
    </style>
</head>
<body>
    <div class="container">
        <div><img src="Scripts/img/beautiful/1.jpg" /></div>
        <div><img src="Scripts/img/beautiful/2.jpg" /></div>
        <div><img src="Scripts/img/beautiful/3.jpg" /></div>
        <div><img src="Scripts/img/beautiful/4.jpg" /></div>
        <div><img src="Scripts/img/beautiful/5.jpg" /></div>
        <div><img src="Scripts/img/beautiful/6.jpg" /></div>
        <div><img src="Scripts/img/beautiful/7.jpg" /></div>
        <div><img src="Scripts/img/beautiful/1.jpg" /></div>
        <div><img src="Scripts/img/beautiful/2.jpg" /></div>
        <div><img src="Scripts/img/beautiful/3.jpg" /></div>
        <div><img src="Scripts/img/beautiful/4.jpg" /></div>
        <div><img src="Scripts/img/beautiful/5.jpg" /></div>
        <div><img src="Scripts/img/beautiful/6.jpg" /></div>
        <div><img src="Scripts/img/beautiful/7.jpg" /></div>
        <div><img src="Scripts/img/beautiful/1.jpg" /></div>
        <div><img src="Scripts/img/beautiful/2.jpg" /></div>
        <div><img src="Scripts/img/beautiful/3.jpg" /></div>
        <div><img src="Scripts/img/beautiful/4.jpg" /></div>
        <div><img src="Scripts/img/beautiful/5.jpg" /></div>
        <div><img src="Scripts/img/beautiful/6.jpg" /></div>
        <div><img src="Scripts/img/beautiful/7.jpg" /></div>
    </div>
</body>
</html>

以上是关于CSS 动画的主要内容，如果未能解决你的问题，请参考以下文章