css变化代码

时间:2023-03-08 15:41:47

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .clear{
                clear: both;
            }
            #div{
                width: 200px;
                height: 200px;
                border: 1px solid transparent;
                background-color: white;

  -------相对于原位置移动-------
                position: relative;

                -------动画:名称;完成全部运动的时间;循环播放;交互循环-------
                animation: a 10s infinite alternate;
            }

--------------------------------------------动画内容:名称所对应的div-------------------------------------------------------
            @keyframes a{

--------------------------------------------运动至0%时所产生的变化-------------------------------------------------------
                0% {
                    background-color:blueviolet ;

--------------------------------------------边框变圆角:15%-------------------------------------------------------
                    border-radius: 15%;

--------------------------------------------盒子阴影:右侧阴影大小;下侧大小;颜色-------------------------------------------------------
                    box-shadow:-10px 10px slategrey;
                    left: 0px;
                    top:80px
                }
                25% {
                    /*width: 0px;
                    height: 0px;
                    border-top: 100px solid cornflowerblue;
                    border-left: 100px solid transparent;
                    border-right: 100px solid transparent;*/
                    background-color:cornflowerblue ;
                    border-radius: 30%;
                    box-shadow:-15px 0px 3px slategrey;
                    left: 600px;
                    top:80px
                }
                50% {
                    background-color: chartreuse;
                    border-radius: 50%;
                    box-shadow: 0px -10px 3px slategrey;
                    left: 600px;
                    top: 300px;
                }
                75% {
                    background-color: orange;
                    border-radius: 30%;
                    box-shadow: 10px 0px 3px slategrey;
                    left: 0px;
                    top: 300px;
                }
                100% {
                    background-color: blueviolet;
                    border-radius: 15%;
                    box-shadow: -10px 10px slategrey;
                    left: 0px;
                    top: 80px;
                }
            }
        </style>
    </head>
    <body>
        <div id="div"></div>
    </body>
</html>