铃铛抖动效果 css

最新推荐文章于 2025-03-07 09:30:54 发布

爱前端不爱恋爱

最新推荐文章于 2025-03-07 09:30:54 发布

阅读量1.5k

点赞数 2

分类专栏： html 文章标签： css css3

本文链接：https://blog.csdn.net/qq_33477377/article/details/116207405

版权

html 专栏收录该内容

4 篇文章

订阅专栏

// css
.helpTips {
      animation-name: upAnimation;
       transform-origin: center bottom;
       animation-duration: 2s;
       animation-fill-mode: both;
       animation-iteration-count: infinite;
       animation-delay: .5s;
 }
@keyframes upAnimation
    {
        0% {
            transform: rotate(0deg);
            transition-timing-function: cubic-bezier(0.215,.61,.355,1);
        }
        10% {
            transform: rotate(-12deg);
            transition-timing-function: cubic-bezier(0.215,.61,.355,1);
        }
        20% {
            transform: rotate(12deg);
            transition-timing-function: cubic-bezier(0.215,.61,.355,1);
        }
        28% {
            transform: rotate(-10deg);
            transition-timing-function: cubic-bezier(0.215,.61,.355,1);
        }
        36% {
            transform: rotate(10deg);
            transition-timing-function: cubic-bezier(0.755,.5,.855,.06);
        }
        42% {
            transform: rotate(-8deg);
            transition-timing-function: cubic-bezier(0.755,.5,.855,.06);
        }
        48% {
            transform: rotate(8deg);
            transition-timing-function: cubic-bezier(0.755,.5,.855,.06);
        }
        52% {
            transform: rotate(-4deg);
            transition-timing-function: cubic-bezier(0.755,.5,.855,.06);
        }
        56% {
            transform: rotate(4deg);
            transition-timing-function: cubic-bezier(0.755,.5,.855,.06);
        }
        60% {
            transform: rotate(0deg);
            transition-timing-function: cubic-bezier(0.755,.5,.855,.06);
        }
    100% {
            transform: rotate(0deg);
            transition-timing-function: cubic-bezier(0.215,.61,.355,1);
        }
    }

简单实用