CSS动画笔记[旧]

2020 年 03 月 24 日

917 次浏览

5080字数

CSS动画笔记[旧]
来自2018/8/6
在线演示：demo

图片展示：静态图
代码展示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CSS动画</title>
    <style>
        body {
            background: #1FA2FF;
            /* fallback for old browsers */
            background: -webkit-linear-gradient(to right, #A6FFCB, 20%, #12D8FA, 20%, #1FA2FF 100%,);
            /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(to right, #A6FFCB, #12D8FA, #1FA2FF);
            /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ 
            
            
            https://uigradients.com/#Stripe
            
            
            
            */
            animation: body 2s infinite;
        }

        @keyframes body {
            0% {
                background: -webkit-linear-gradient(to right, #A6FFCB, 20%, #12D8FA, 20%, #1FA2FF 100%,);
            }
            50% {
                background: -webkit-linear-gradient(to right, #A6FFCB, 20%, #12D8FA, 50%, #1FA2FF 100%,);
            }
            100% {
                background: -webkit-linear-gradient(to right, #A6FFCB, 90%, #12D8FA, 20%, #1FA2FF 100%,);
            }

        }

        @keyframes re-1 {
            0% {
                width: 150px;
                height: 150px;
                transform: rotateZ(0deg);
            }
            50% {
                width: 170px;
                height: 170px;
            }
            80% {
                width: 160px;
                height: 160px;
            }
            100% {
                width: 150px;
                height: 150px;
                transform: rotateZ(360deg);
            }
        }

        @keyframes re-2 {
            0% {
                width: 100px;
                height: 100px;
                transform: rotateZ(0deg);
            }
            50% {
                width: 120px;
                height: 120px;
            }
            80% {
                width: 110px;
                height: 110px;
            }
            100% {
                width: 100px;
                height: 100px;
                transform: rotateZ(360deg);
            }
        }


        @keyframes re-3 {
            0% {
                width: 50px;
                height: 50px;
                transform: rotateZ(0deg);
            }
            50% {
                width: 70px;
                height: 70px;
            }
            80% {
                width: 60px;
                height: 60px;
            }
            100% {
                width: 50px;
                height: 50px;
                transform: rotateZ(360deg);
            }
        }



        #circle_bot {
            background-color: #00BCD4;
            width: 150px;
            height: 150px;
            margin: 0px 0 0 0px;
            position: absolute;
            left: 46%;
            margin: auto;
            margin-top: 370px;
            box-shadow: #44444440 10px 10px 30px 5px;
            animation-name: re-1;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;

        }

        #circle_mid {
            background-color: #EAA;
            width: 100px;
            height: 100px;
            margin: -125px 0 0 25px;
            position: absolute;
            left: 46%;
            margin: auto;
            margin-top: 370px;
            box-shadow: #2b2b2b45 10px 10px 30px 5px;
            animation-name: re-2;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }

        #circle_top {
            background-color: #ED9;
            width: 50px;
            height: 50px;
            margin: -75px 0 0 50px;
            position: absolute;
            left: 46%;
            margin: auto;
            margin-top: 370px;
            box-shadow: #00000024 10px 10px 30px 5px;
            animation-name: re-3;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }

    </style>
</head>

<body>

    <div id="circle_bot">
    </div>
    <div id="circle_mid">
    </div>
    <div id="circle_top">
    </div>

</body>



</html>

CSS动画笔记[旧]