运用CSS3实现钟摆效果_css3 闹钟摇摆效果-CSDN博客

本文链接：https://blog.csdn.net/primasie/article/details/77916239

目的：利用html5，css实现钟摆效果
知识点：
1）利用position/left/top和calc()实现元素的水平和垂直居中；
2）利用CSS3的animation/transform/transform-origin属性定义动画；
3）利用transform-origin实现旋转原点的圆心调整

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #box{
                width:300px;
                height:300px;
                border: 6px solid red;

                //实现元素的水平垂直居中
                position: absolute;
                top:calc(50% - 150px);
                left:calc(50% - 150px);
            }
            #innerCircle{
                width:0;
                height:0;
                border: 10px solid cornflowerblue;
                border-radius: 10px;

                //实现元素的水平垂直居中
                position: absolute;
                top:calc(50% - 10px);
                left:calc(50% - 10px);
            }
            #outerCircle{
                width:6px;
                height:6px;
                background-color: yellow;
                border: 20px solid cornflowerblue;

                //实现元素位于父元素bottom center位置
                position: absolute;
                top:calc(100% - 23px);
                left:calc(50% - 23px);
                animation: pendulum 4s infinite;

                //默认的origin为#outerCircle元素的左上角,即 0% 0%
                //本例中origin Y轴偏离量：
                // 300px/2 - 20px - 6px/2
                transform-origin: 50% -127px;
            }
            #rope{
                width:4px;
                height:150px;
                background-color: cornflowerblue;

                //布置#rope元素
                position:absolute;
                top: 50%;
                left: calc(50% - 2px);
                animation: pendulum 4s infinite;

                //同#outerCircle，需要调整origin坐标
                transform-origin: 50% 0;
            }
            @keyframes pendulum{
                0 {transform: rotate(0deg);}

                // 角度-负数为逆时针
                // 摆动右侧最高点
                25% {transform: rotate(-30deg);}
                50% {transform: rotate(0deg);}

                // 摆动左侧最高点
                75% {transform: rotate(30deg);}
                100% {transform: rotate(0deg);}
            }
        </style>
    </head>

    <body>
        <div id = "box">
            <div id = "innerCircle"></div>
            <div id = "outerCircle"></div>
            <div id = "rope"></div>
        </div>
    </body>
</html>

效果图
钟摆动画