钟摆（圆锥摆）效果

最新推荐文章于 2023-09-25 17:55:32 发布

爱编程的兔子

最新推荐文章于 2023-09-25 17:55:32 发布

阅读量2k

点赞数

分类专栏： css css3+javascript实现各种效果文章标签： css3 动画

本文链接：https://blog.csdn.net/wjnf012/article/details/69388196

版权

css 同时被 2 个专栏收录

50 篇文章 2 订阅

订阅专栏

css3+javascript实现各种效果

7 篇文章 0 订阅

订阅专栏

实现思路

直接用CSS3就可以实现，首先将转换元素的位置设置为顶部居中，然后设置转换角度，还有一点需要注意：在设置animation的时候将时间设置为ease-in-out，否则钟摆在左右两个最高点有停顿，看着不是很舒服。

代码

好了，下面直接上代码（html的布局是可以调整的，我这里是项目中的）

<div class="int-entry-page-label">
    <span></span>
</div>

.int-entry-page-label{
    position: absolute;
    right: 0.1rem;
    top: 0;
    width: 0.8rem;
    height: 1.1rem;
    -webkit-animation: coneAnimate 2s ease-in-out infinite;
    -moz-animation: coneAnimate 2s ease-in-out infinite;
    -ms-animation: coneAnimate 2s ease-in-out infinite;
    animation: coneAnimate 2s ease-in-out infinite;
}
.int-entry-page-label:after{
    position: absolute;
    top: 0;
    right: 0.4rem;
    content: '';
    height: 0.4rem;
    border-right: 0.02rem solid rgba(255,255,255,0.22);
}
.int-entry-page-label span{
    position: absolute;
    top: 0.3rem;
    right: 0;
    width: 0.8rem;
    height: 0.8rem;
    z-index: 10;
}
.int-entry-pgs .int-entry-page-label span{
    background: url(../images/int-entry/int-page2-label.png) no-repeat center;
    background-size: 0.8rem 0.8rem;
}
@-webkit-keyframes coneAnimate{
    0%{
        -webkit-transform: rotate(10deg);
        -webkit-transform-origin: top center;
    }
    50%{
        -webkit-transform: rotate(-10deg);
        -webkit-transform-origin: top center;
    }
    100%{
        -webkit-transform: rotate(10deg);
        -webkit-transform-origin: top center;
    }
}
@-moz-keyframes coneAnimate{
    0%{
        -moz-transform: rotate(10deg);
        -moz-transform-origin: top center;
    }
    50%{
        -moz-transform: rotate(-10deg);
        -moz-transform-origin: top center;
    }
    100%{
        -moz-transform: rotate(10deg);
        -moz-transform-origin: top center;
    }
}
@-ms-keyframes coneAnimate{
    0%{
        -ms-transform: rotate(10deg);
        -ms-transform-origin: top center;
    }
    50%{
        -ms-transform: rotate(-10deg);
        -ms-transform-origin: top center;
    }
    100%{
        -ms-transform: rotate(10deg);
        -ms-transform-origin: top center;
    }
}
@keyframes coneAnimate{
    0%{
        transform: rotate(10deg);
        transform-origin: top  center;
    }
    50%{
        transform: rotate(-10deg);
        transform-origin: top  center;
    }
    100%{
        transform: rotate(10deg);
        transform-origin: top  center;
    }
}