css动画基础环形移动

最新推荐文章于 2022-10-07 00:51:09 发布

2333!!!!!

最新推荐文章于 2022-10-07 00:51:09 发布

阅读量264

点赞数

文章标签： css 动画 css3

本文链接：https://blog.csdn.net/weixin_46564011/article/details/122177568

版权

本文介绍了如何使用CSS实现一个方块绕圈移动的动画效果。通过@keyframes定义omove动画，设置不同阶段的transform属性实现位移，结合animation属性控制动画的持续时间、延迟、循环次数和方向。当鼠标悬停在方块上时，动画暂停。此示例详细展示了CSS动画的基本用法和关键属性。

摘要由CSDN通过智能技术生成

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css动画基础</title>
    <style>
        /*他是利用了动画进行位移 @keyframes 动画关键字 omove动画方法名*/
        @keyframes omove {

            /*方块绕圈移动*
            /*0%是初始状态   状态进度用%表示 from表示0% to表示100%  */
            0% {
                transform: translate(0, 0);
                /*transalte分开参数要带逗号忘记动画不会触发*/
            }

            25% {
                transform: translate(1420PX, 0);
            }

            50% {
                transform: translate(1420px, 600px);
            }

            75% {
                transform: translate(0px, 600px);
            }

            100% {
                transform: translate(0, 0);
            }
        }

        .ct {
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            animation-name: omove;
            /*调用动画名*/
            animation-duration: 5s;
            /*动画持续时间*/
            animation-delay: 1s;
            /*动画延迟开始时间:animation-delay*/
            animation-iteration-count: infinite;
            /*动画循环次数 1就是一次 infinite是无限循环*/
            animation-direction: alternate;
            /*direction方向:normal就是正常 reverse会从开始一直逆向运动
             alternate 在正常行驶一次后下一次反向运行
             alternate-reverse可以自行体会
            */
            animation-timing-function: ease;
            /*动画的时间曲线ease就是正常*/
            animation-fill-mode: backwards;
            /*没有用到这个属性其实每次都会回到原点
            这个fill-mode属性时结束时元素所在的位置forward是动画结束的位置
            backwards是动画结束回到原点
            */
        }

        .ct:hover {
            animation-play-state: paused;
            /*使动画元素的方块暂时停止*/
        }
    </style>
</head>

<body>
    <div class="ct"></div>
</body>

</html>