CSS3 循环动画

发布时间:2020-10-03 发布网站:编程之家
编程之家收集整理的这篇文章主要介绍了CSS3 循环动画编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 200px;
            height: 200px;
            position: relative;
            margin: 150px auto;
            /* perspective: 1000px; */
            /* 将平面图形转换为立体图形 */
            transform-style: preserve-3d;
            /* transform: rotateY(20deg) rotateX(150deg); */
                        /* 动画名称 动画时长 延时时间 匀速 无限循环  逆播 */ 
            animation: changes 2s 0.2s linear infinite alternate;
        }
        .box:hover {
            animation-play-state: paused;/*鼠标放上去 暂停动画 */
        }
        @keyframes changes {
            from {
                transform: translateX(0)
            }
            to {
                transform: translateX(300px)
            }
        }
    </style>
</head>

<body>

    <div class="box">
        <div class="public one1"></div>
        <div class="public one2"></div>
        <div class="public one3"></div>
        <div class="public one4"></div>
        <div class="public one5"></div>
        <div class="public one6"></div>
    </div>

</body>

</html>

总结

以上是编程之家为你收集整理的CSS3 循环动画全部内容,希望文章能够帮你解决CSS3 循环动画所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入编程之家官方QQ群:1065694478