运用CSS3实现钟摆效果

来源：互联网发布：宏知乎编辑：程序博客网时间：2024/04/28 12:37

目的：利用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>

效果图
钟摆动画

阅读全文

0 0