css3实现元素抖动效果

最新推荐文章于 2024-06-29 16:47:52 发布
最新推荐文章于 2024-06-29 16:47:52 发布
阅读量1.4w 收藏 4
点赞数 2
分类专栏： -----前端----- 文章标签： css3 前端

代码不多，不截图了，可自行尝试

说明

css部分比较冗余，是因为考虑到了适配情况。可酌情删减

-webkit-animation-name: shaky-slow;	// webkit内核
-ms-animation-name: shaky-slow;		// ie内核
animation-name: shaky-slow;		// 原生

animation-duration: 4s;			// 动画执行时间
animation-delay: 0s;			// 动画等待时间
animation-iteration-count: infinite;	// 动画执行次数，infinite为一直执行
animation-timing-function: ease-in-out;	// 动画执行速度
animation-delay: 0s;			// 动画延时时间
animation-play-state: running;		// 动画执行状态，一般没必要parse

元素标签

<p class="shaky">文字文字文字</p>

css部分

    .shaky {
        display: inline-block;
        padding: 1px;
        font-size: 12px;
        -webkit-transform-origin: center center;
        -ms-transform-origin: center center;
        transform-origin: center center;
        -webkit-animation-name: shaky-slow;
        -ms-animation-name: shaky-slow;
        animation-name: shaky-slow;
        -webkit-animation-duration: 4s;
        -ms-animation-duration: 4s;
        animation-duration: 4s;
        -webkit-animation-iteration-count: infinite;
        -ms-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-timing-function: ease-in-out;
        -ms-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        -webkit-animation-delay: 0s;
        -ms-animation-delay: 0s;
        animation-delay: 0s;
        -webkit-animation-play-state: running;
        -ms-animation-play-state: running;
        animation-play-state: running;
    }
    @-webkit-keyframes shaky-slow {
        0% {
            -webkit-transform: translate(0px, 0px) rotate(0deg);
        }
        2% {
            -webkit-transform: translate(-1px, 1.5px) rotate(1.5deg);
        }
        4% {
            -webkit-transform: translate(1.3px, 0px) rotate(-0.5deg);
        }
        6% {
            -webkit-transform: translate(1.4px, 1.4px) rotate(-2deg);
        }
        8% {
            -webkit-transform: translate(-1.3px, -1px) rotate(-1.5deg);
        }
        10% {
            -webkit-transform: translate(1.4px, 0px) rotate(-2deg);
        }
        12% {
            -webkit-transform: translate(-1.3px, -1px) rotate(-2deg);
        }
        14% {
            -webkit-transform: translate(1.5px, 1.3px) rotate(1.5deg);
        }
        16% {
            -webkit-transform: translate(1.5px, -1.5px) rotate(-1.5deg);
        }
        18% {
            -webkit-transform: translate(1.3px, -1.3px) rotate(-2deg);
        }
        20% {
            -webkit-transform: translate(1px, 1px) rotate(-0.5deg);
        }
        22% {
            -webkit-transform: translate(1.3px, 1.5px) rotate(-2deg);
        }
        24% {
            -webkit-transform: translate(-1.4px, -1px) rotate(2deg);
        }
        26% {
            -webkit-transform: translate(1.3px, -1.3px) rotate(0.5deg);
        }
        28% {
            -webkit-transform: translate(1.6px, -1.6px) rotate(-2deg);
        }
        30% {
            -webkit-transform: translate(-1.3px, -1.3px) rotate(-1.5deg);
        }
        32% {
            -webkit-transform: translate(-1px, 0px) rotate(2deg);
        }
        34% {
            -webkit-transform: translate(1.3px, 1.3px) rotate(-0.5deg);
        }
        36% {
            -webkit-transform: translate(1.3px, 1.6px) rotate(1.5deg);
        }
        38% {
            -webkit-transform: translate(1.3px, -1.6px) rotate(1.5deg);
        }
        40% {
            -webkit-transform: translate(-1.4px, -1px) rotate(-0.5deg);
        }
        42% {
            -webkit-transform: translate(-1.4px, 1.3px) rotate(-0.5deg);
        }
        44% {
            -webkit-transform: translate(-1.6px, 1.4px) rotate(0.5deg);
        }
        46% {
            -webkit-transform: translate(-2.1px, -1.3px) rotate(-0.5deg);
        }
        48% {
            -webkit-transform: translate(1px, 1.6px) rotate(1.5deg);
        }
        50% {
            -webkit-transform: translate(1.6px, 1.6px) rotate(1.5deg);
        }
        52% {
            -webkit-transform: translate(-1.4px, 1.6px) rotate(0.5deg);
        }
        54% {
            -webkit-transform: translate(1.6px, -1px) rotate(-2deg);
        }
        56% {
            -webkit-transform: translate(1.3px, -1.6px) rotate(-2deg);
        }
        58% {
            -webkit-transform: translate(-1.3px, -1.6px) rotate(0.5deg);
        }
        60% {
            -webkit-transform: translate(1.3px, 1.6px) rotate(-0.5deg);
        }
        62% {
            -webkit-transform: translate(0px, 0px) rotate(-1.5deg);
        }
        64% {
            -webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg);
        }
        66% {
            -webkit-transform: translate(1.6px, -1.6px) rotate(0.5deg);
        }
        68% {
            -webkit-transform: translate(0px, -1.6px) rotate(-2deg);
        }
        70% {
            -webkit-transform: translate(-1.6px, 1px) rotate(1.5deg);
        }
        72% {
            -webkit-transform: translate(-1.6px, 1.6px) rotate(2deg);
        }
        74% {
            -webkit-transform: translate(1.3px, -1.6px) rotate(-0.5deg);
        }
        76% {
            -webkit-transform: translate(1.4px, 1px) rotate(-0.5deg);
        }
        78% {
            -webkit-transform: translate(-1px, 1.4px) rotate(2deg);
        }
        80% {
            -webkit-transform: translate(1.4px, 1.6px) rotate(2deg);
        }
        82% {
            -webkit-transform: translate(-1.6px, -1.6px) rotate(-0.5deg);
        }
        84% {
            -webkit-transform: translate(-1.4px, 1.4px) rotate(-2deg);
        }
        86% {
            -webkit-transform: translate(1px, 1.4px) rotate(-2deg);
        }
        88% {
            -webkit-transform: translate(-1.4px, 1.4px) rotate(-1.5deg);
        }
        90% {
            -webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg);
        }
        92% {
            -webkit-transform: translate(-1.6px, 1.6px) rotate(2deg);
        }
        94% {
            -webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg);
        }
        96% {
            -webkit-transform: translate(-1.4px, 1.3px) rotate(-2deg);
        }
        98% {
            -webkit-transform: translate(1.3px, 1px) rotate(-0.5deg);
        }
    }
    @keyframes shaky-slow {
        0% {
            transform: translate(0px, 0px) rotate(0deg);
        }
        2% {
            transform: translate(-1px, 1.5px) rotate(1.5deg);
        }
        4% {
            transform: translate(1.3px, 0px) rotate(-0.5deg);
        }
        6% {
            transform: translate(1.4px, 1.4px) rotate(-2deg);
        }
        8% {
            transform: translate(-1.3px, -1px) rotate(-1.5deg);
        }
        10% {
            transform: translate(1.4px, 0px) rotate(-2deg);
        }
        12% {
            transform: translate(-1.3px, -1px) rotate(-2deg);
        }
        14% {
            transform: translate(1.5px, 1.3px) rotate(1.5deg);
        }
        16% {
            transform: translate(1.5px, -1.5px) rotate(-1.5deg);
        }
        18% {
            transform: translate(1.3px, -1.3px) rotate(-2deg);
        }
        20% {
            transform: translate(1px, 1px) rotate(-0.5deg);
        }
        22% {
            transform: translate(1.3px, 1.5px) rotate(-2deg);
        }
        24% {
            transform: translate(-1.4px, -1px) rotate(2deg);
        }
        26% {
            transform: translate(1.3px, -1.3px) rotate(0.5deg);
        }
        28% {
            transform: translate(1.6px, -1.6px) rotate(-1.5deg);
        }
        30% {
            transform: translate(-1.3px, -1.3px) rotate(-1.5deg);
        }
        32% {
            transform: translate(-1px, 0px) rotate(2deg);
        }
        34% {
            transform: translate(1.3px, 1.3px) rotate(-0.5deg);
        }
        36% {
            transform: translate(1.3px, 1.6px) rotate(1.5deg);
        }
        38% {
            transform: translate(1.3px, -1.6px) rotate(1.5deg);
        }
        40% {
            transform: translate(-1.4px, -1px) rotate(-0.5deg);
        }
        42% {
            transform: translate(-1.4px, 1.3px) rotate(-0.5deg);
        }
        44% {
            transform: translate(-1.6px, 1.4px) rotate(0.5deg);
        }
        46% {
            transform: translate(-2.1px, -1.3px) rotate(-0.5deg);
        }
        48% {
            transform: translate(1px, 1.6px) rotate(1.5deg);
        }
        50% {
            transform: translate(1.6px, 1.6px) rotate(1.5deg);
        }
        52% {
            transform: translate(-1.4px, 1.6px) rotate(0.5deg);
        }
        54% {
            transform: translate(1.6px, -1px) rotate(-2deg);
        }
        56% {
            transform: translate(1.3px, -1.6px) rotate(-2deg);
        }
        58% {
            transform: translate(-1.3px, -1.6px) rotate(0.5deg);
        }
        60% {
            transform: translate(1.3px, 1.6px) rotate(-0.5deg);
        }
        62% {
            transform: translate(0px, 0px) rotate(-1.5deg);
        }
        64% {
            transform: translate(-1.6px, -1.6px) rotate(-2deg);
        }
        66% {
            transform: translate(1.6px, -1.6px) rotate(0.5deg);
        }
        68% {
            transform: translate(0px, -1.6px) rotate(-2deg);
        }
        70% {
            transform: translate(-1.6px, 1px) rotate(1.5deg);
        }
        72% {
            transform: translate(-1.6px, 1.6px) rotate(2deg);
        }
        74% {
            transform: translate(1.3px, -1.6px) rotate(-0.5deg);
        }
        76% {
            transform: translate(1.4px, 1px) rotate(-0.5deg);
        }
        78% {
            transform: translate(-1px, 1.4px) rotate(2deg);
        }
        80% {
            transform: translate(1.4px, 1.6px) rotate(2deg);
        }
        82% {
            transform: translate(-1.6px, -1.6px) rotate(-0.5deg);
        }
        84% {
            transform: translate(-1.4px, 1.4px) rotate(-2deg);
        }
        86% {
            transform: translate(1px, 1.4px) rotate(-2deg);
        }
        88% {
            transform: translate(-1.4px, 1.4px) rotate(-1.5deg);
        }
        90% {
            transform: translate(-1.6px, -1.6px) rotate(-2deg);
        }
        92% {
            transform: translate(-1.4px, 1.6px) rotate(2deg);
        }
        94% {
            transform: translate(-1.6px, -1.6px) rotate(-2deg);
        }
        96% {
            transform: translate(-1.4px, 1.3px) rotate(-2deg);
        }
        98% {
            transform: translate(1.3px, 1px) rotate(-0.5deg);
        }
    }
世外大帝
关注
专栏目录
CSS3实现5个常用的网页动画效果
2401_84150165的博客
04-12 988
由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！点击【学习资料】即可领取！f文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！点击【学习资料】即可领取！[外链图片转存中…(img-sVd0nYBZ-1712870545062)][外链图片转存中…(img-M5MzgGk2-1712870545063)]
CSS3实现抖动
08-11
shake shake-hard shake-slow shake-little shake-horizontal shake.vertical shake-rotate shake-opacity shake-crazy
CSS页面效果——极光晃动
最新发布
weixin_42277454的博客
06-29 220
在上述代码中，我们创建了一个黑色背景的页面，并使用::before和::after伪元素来创建两个极光效果的图层。通过linear-gradient创建了一个从绿色到蓝色、红色、紫色再回到绿色的渐变背景，并使用animation来实现晃动效果。你可以根据需要调整极光的颜色、大小、速度等参数，以获得不同的效果。
css3 图片 抖动效果
weixin_33964094的博客
02-09 1695
@-moz-keyframes tada{ 0%{-moz-transform:scale(1);} 10%,20%{-moz-transform:scale(0.9) rotate(-3deg);} 30%,50%,70%,90%{-moz-transform:scale(1.2) rotate(3deg);} 40%,60%,80%{-moz-trans...
css实现快速抖动效果_css3实现元素抖动效果
weixin_42350411的博客
01-17 599
代码不多，不截图了，可自行尝试说明css部分比较冗余，是因为考虑到了适配情况。可酌情删减-webkit-animation-name: shaky-slow; // webkit内核-ms-animation-name: shaky-slow; // ie内核animation-name: shaky-slow; // 原生animation-duration: 4s; ...
css3 抖动效果
曲小强
09-15 384
.shaky { -webkit-animation-name: shaky-slow; -ms-animation-name: shaky-slow; animation-name: shaky-slow; -webkit-animation-duration: 0.5s; -ms-animation-duration: 0.5s; animation-duration: 0.5s; -webk
CSS3实战——抖动效果的实现
flying meng的菜鸟居
11-05 4415
这几天有项目，其中复习了一下css3的相关知识。其中抖动效果很好玩，不禁想写篇文章，纪念一下。 还是以前说的，通过js动态添加/删除class是一个“不错的”选择。比如今天做的东西：先添加，然后利用setTimeout慢慢消除。这样就实现了“抖动效果” <!DOCTYPE html> <html lang="en"> <head> <meta ...
jQuery/CSS3实现网页元素抖动特效
08-23
今天我们要来分享一款很酷的jQuery/CSS3动画特效，它可以让网页中的元素进行抖动，抖动的参数也可以自定义设置。可以定义抖动的快慢、方向以及更为复杂的抖动效果。改应用基于jQuery和CSS3实现，实现起来也比较方便...
css3动画效果抖动解决方法
09-22
举例来说，可以将`shake` class添加到元素上，使元素实现基础的抖动效果。如果需要更加剧烈或者特定方向的抖动，比如水平或垂直抖动，可以使用`shake-horizontal`或`shake-vertical` class。CSSShake还提供了控制...
纯CSS3鼠标悬停抖动效果.zip
07-11
这个压缩包文件包含了一个实现鼠标悬停时元素抖动效果的示例代码。 【描述】中提到的是一个简单的应用场景，即当用户的鼠标指针悬停在某个元素上时，该元素会产生视觉上的抖动效果，这种效果通常用于吸引用户注意力...
带动感抖动效果CSS3幻灯片
04-07
总的来说，"带动感抖动效果CSS3幻灯片"的实现涉及了CSS3的多个核心特性，包括关键帧动画、过渡效果、伪元素以及与JavaScript的交互。通过熟练掌握这些技术，我们可以创建出更丰富、更具交互性的网页元素，提升用户...
CSS3 震动颤抖实例
05-18
CSS3 震动颤抖实例 支持Firefox、Chrome、Safari、IE>11
html5 抖动效果,10款jQuery/CSS3实现网页元素抖动特效
weixin_28759537的博客
06-03 907
1.jQuery垂直滑动切换焦点图动对于jQuery垂直焦点图，我们之前已经分享过不少了，其中比较经典的这款jQuery纵向滑块焦点图插件，效果非常不错。今天我们要再介绍一款jQuery垂直滑动切换的焦点图动画，整个jQuery焦点图是宽屏的，显得十分大气2.CSS3 iPhone样式 D菜单之前已经向大家分享过很多漂亮的CSS3菜单了，很多菜单都支持多级下拉。今天要分享的CSS3菜单时模拟iPh...
css实现快速抖动效果_CSS3 晃动效果
weixin_39717443的博客
01-26 811
CSS3-晃动-效果.element{color:#f35626;background-image:-webkit-linear-gradient(92deg,#f35626,#feab3a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;-webkit-animation:hue 60s infinite lin...
动画会震一下css,csshake.css强大的CSS3元素抖动动画库
weixin_39827775的博客
08-04 448
CSS Shake是一个使用CSS3实现的动画样式，使用SASS编写，利用它我们可以实现多种不同样式的抖动效果(如下面的GIF图像)。这是一个很微小的动画，但使用得当也是挺不错的，比如用在广告、图像、按钮上，这样可以用来吸引用户眼球从而促使去点击它。这个Csshake有9个抖动样式，三个状态，如鼠标经过拉动、无限抖动、鼠标悬停拉动，一起来玩一下吧。使用方法要使用csshake，首先要将csshak...
css3实现页面元素抖动效果
Anyuegogogo的博客
10-05 1476
css3实现页面元素抖动效果
css3背景晃动实现
社会人
07-25 1320
&lt;html&gt; &lt;head&gt; &lt;title&gt;aaa&lt;/title&gt; &lt;/head&gt; &lt;style&gt; .banner { background-image: url(img/d-bg.png); width: 562px; ...
css 文字左右抖动效果
tengyuxin的博客
04-22 504
【代码】css 文字左右抖动效果。
CSS3实现卡片晃动效果
weixin_43939755的博客
10-24 323
当鼠标移入时，通过querySelector方法获取卡片内部的元素，然后将它的transform属性设置为”rotateY(180deg)”，这样就可以让卡片翻转并显示背面内容了。今天带来的这段代码实现了在一个图片上增加一个时间倒计时的功能，并且当鼠标移动时，倒计时板块会产生晃动效果。使用JavaScript监听卡片容器的鼠标移入和移出事件，并根据事件触发的情况修改卡片内部的transform属性来实现翻转效果。使用CSS样式设置卡片容器的透视度（perspective）和卡片内部的两个面的布局。
css 元素3D抖动
05-27
要实现 CSS 元素的 3D 抖动效果，可以使用 CSS3 的动画和 transform 属性，具体步骤如下： 1. 首先，需要将元素设置为 3D 空间，可以通过设置 perspective 属性实现： ```css .container { perspective: 1000px; } ``` 2. 接着，使用 CSS3 的动画和 transform 属性来实现抖动效果： ```css @keyframes shake { 0% { transform: translate3d(0, 0, 0) rotate3d(0, 0, 0, 0); } 10% { transform: translate3d(-10px, 0, 0) rotate3d(0, 0, 1, -5deg); } 20% { transform: translate3d(10px, 0, 0) rotate3d(0, 0, 1, 5deg); } 30% { transform: translate3d(-10px, 0, 0) rotate3d(0, 0, 1, -5deg); } 40% { transform: translate3d(10px, 0, 0) rotate3d(0, 0, 1, 5deg); } 50% { transform: translate3d(-10px, 0, 0) rotate3d(0, 0, 1, -5deg); } 60% { transform: translate3d(10px, 0, 0) rotate3d(0, 0, 1, 5deg); } 70% { transform: translate3d(-10px, 0, 0) rotate3d(0, 0, 1, -5deg); } 80% { transform: translate3d(10px, 0, 0) rotate3d(0, 0, 1, 5deg); } 90% { transform: translate3d(-10px, 0, 0) rotate3d(0, 0, 1, -5deg); } 100% { transform: translate3d(0, 0, 0) rotate3d(0, 0, 0, 0); } } .element { animation: shake 0.8s; animation-iteration-count: infinite; } ``` 这段代码中，我们定义了一个名为 shake 的动画，它包含多个关键帧，每个关键帧都使用 translate3d 和 rotate3d 方法来实现元素的平移和旋转。然后，将这个动画应用到需要抖动的元素上，使用 animation-iteration-count 属性来让动画无限循环。 这样，就可以实现 CSS 元素的 3D 抖动效果了。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值