使用 CSS 实现摆动动画效果

百变鹏仔 3个月前 (09-20) #CSS

文章标签效果

摆动效果以小幅快速运动移动或导致上下或左右移动。

示例

您可以尝试运行以下代码来实现winggle动画效果 -

Live Demo

<html>   <head>      <style>         .animated {            background-image: url(/css/images/logo.png);            background-repeat: no-repeat;            background-position: left top;            padding-top:95px;            margin-bottom:60px;            -webkit-animation-duration: 10s;            animation-duration: 10s;            -webkit-animation-fill-mode: both;            animation-fill-mode: both;         }         @-webkit-keyframes wiggle {            0% { -webkit-transform: skewX(9deg); }            10% { -webkit-transform: skewX(-8deg); }            20% { -webkit-transform: skewX(7deg); }            30% { -webkit-transform: skewX(-6deg); }            40% { -webkit-transform: skewX(5deg); }            50% { -webkit-transform: skewX(-4deg); }            60% { -webkit-transform: skewX(3deg); }            70% { -webkit-transform: skewX(-2deg); }            80% { -webkit-transform: skewX(1deg); }            90% { -webkit-transform: skewX(0deg); }            100% { -webkit-transform: skewX(0deg); }         }         @keyframes wiggle {            0% { transform: skewX(9deg); }            10% { transform: skewX(-8deg); }            20% { transform: skewX(7deg); }            30% { transform: skewX(-6deg); }            40% { transform: skewX(5deg); }            50% { transform: skewX(-4deg); }            60% { transform: skewX(3deg); }            70% { transform: skewX(-2deg); }            80% { transform: skewX(1deg); }            90% { transform: skewX(0deg); }            100% { transform: skewX(0deg); }         }         .wiggle {            -webkit-animation-name: wiggle;            animation-name: wiggle;            -webkit-animation-timing-function: ease-in;            animation-timing-function: ease-in;         }         .animated.wiggle {            -webkit-animation-duration: 0.75s;            animation-duration: 0.75s;         }      </style>   </head>   <body>      <div id="animated-example" class="animated wiggle"></div>      <button onclick="myFunction()">Reload page</button>      <script>         function myFunction() {            location.reload();         }      </script>    </body></html>

文章推荐

使用 CSS 实现摆动动画效果

示例

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写