首页 > 代码库 > css动画属性--小球移动

css动画属性--小球移动

2024-10-31 13:02:39   206人阅读

主体只有一个div

<body>
    <div></div>
</body>

样式部分(测试:目前的浏览器还是需要加前缀才能兼容)

<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    div {
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        height: 100px;
        border-radius: 50px;
        border: 2px solid red;
        background: -webkit-radial-gradient(80px 80px, circle, #fff, #00f);
        background: -ms-radial-gradient(80px 80px, circle, #fff, #00f);
        /* 动画名字 */
        animation-name: move;
        /* 动画时间 */
        animation-duration: 3s;
        /* 动画的类型 */
        animation-timing-function: linear;
        /* 动画播放次数 */
        animation-iteration-count: infinite;
        /* 动画是否允许反向 */
        animation-direction: normal;
        /* 简写为 animation: move 2s linear 0s infinite normal;*/

    }
    
    @-webkit-keyframes move {
        0% {
            left: 0px;
            top: 0px;
        }
        25% {
            left: 150px;
            top: 150px;
        }
        50% {
            left: 300px;
            top: 300px;
        }
        75% {
            left: 450px;
            top: 450px;
        }
        100% {
            left: 600px;
            top: 600px;
        }
    }
    
    @-ms-keyframes move {
        0% {
            left: 0px;
            top: 0px;
        }
        25% {
            left: 150px;
            top: 150px;
        }
        50% {
            left: 300px;
            top: 300px;
        }
        75% {
            left: 450px;
            top: 450px;
        }
        100% {
            left: 600px;
            top: 600px;
        }
    }
    </style>

如有不足之处,请广提意见,诚恳学习.

css动画属性--小球移动


联系
我们