css 标签抖动特效教程

寻梦xunm| 795| 收集

3年前

超过1263天温馨提示

本文最后更新于2021年06月07日，已超过1263天没有更新，若内容或图片失效，请留言反馈。

可用于图片按钮或…
使用方法：

首先给需要颤抖元素加上 class 属性: Pshake

<a class="Pshake">测试.jpg</a> 
<img class="Pshake" src="https://xxx.jpg"> 
<img class="Pshake" style="display: block; margin: 0 auto;" src="/path/to/image" alt="" />

给 Pshake 一个 display 属性 inline-block ，使得元素可以超出父元素颤抖，否则只能原地颤抖。
加上 will-change 属性，开启GPU渲染加速，防止在低性能设备中造成卡顿。will-change 属性可能会造成元素层叠顺序混乱(z-index混乱)过度使用可能造成反向优化!
transform-origin: center center;进行中心定位。这个属性需要在前面加上 -webkit-和 -ms-进行内核适配
animation: name duration timing-function infinite; 四个属性分别为：动画名称、动画多少时间内完成、如何进行动画周期、无限循环

.Pshake{ 
    display: inline-block; 
    will-change: transform; /*可以删除*/ 
    -webkit-transform-origin: center center; 
    -ms-transform-origin: center center; 
        transform-origin: center center; 
    -webkit-animation: Pshake_Crazy 1s ease-in-out infinite; 
            animation: Pshake_Crazy 1s ease-in-out infinite; 
}

现在元素的属性就全部设置好了。下面进行动画的帧的制作。动画帧可以按照自己想要的抖动方式进行下面是 sample仅供参考。你可以在动画帧中添加更多。在 translate、rotate、opacity 等等多种属性中进行组合。
关键帧越多抖动越疯狂！

@keyframes Pshake_Crazy{ 
    10%{transform:translate(-0.5px,-0.5px) rotate(0.5deg);} 
    20%{transform:translate(-0.5px,1.5px) rotate(0.5deg);} 
    30%{transform:translate(1.5px,0.5px) rotate(0.5deg);} 
    40%{transform:translate(1.5px,-0.5px) rotate(-0.5deg);} 
    50%{transform:translate(2.5px,1.5px) rotate(1.5deg);} 
    60%{transform:translate(-0.5px,-0.5px) rotate(-0.5deg);} 
    70%{transform:translate(-0.5px,2.5px) rotate(1.5deg);} 
    80%{transform:translate(2.5px,-1.5px) rotate(-0.5deg);} 
    90%{transform:translate(1.5px,-0.5px) rotate(1.5deg);} 
    0%,100%{transform:translate(0,0) rotate(0);} 
}

高阶抖动~随机关键帧
如上所说【关键帧越多抖动越疯狂！】但是手动写好多好麻烦，不想写啊。而且上面那一串看的头都大。
那么 emmmm.....不写了。
用JS自动生成吧。嗯。下面不解释了，直接放上代码。

function random_keyframes(){ 
    var a='@keyframes Pshake_Crazy{',b='%{transform:translate(',c='px,',d='px) rotate(',e='deg);}', f='0%,100%{transform:translate(0,0) rotate(0);}}',g='',i=1,  
        jitter=30 /*抖动幅度 >=10*/ , level=1 /*抖动程度 1~99*/; 
    function XYRrandom(){ 
        let _xyr_num=((~(Math.random()*jitter))+(~~(Math.random()*jitter)) )/10; 
    return _xyr_num;} 
    for (i; i<100; i+=level) { 
        g=i+b+XYRrandom()+c+XYRrandom()+d+XYRrandom()+e;a=a+g; 
    } 
return a+f;}

打开网页调用上方的函数 random_keyframes()就会随机生成关键帧。这样每次刷新网页、打开网页抖动的频率都不一样了。

文章来源于：https://blog.slienca.top/archives/565.html

css 教程抖动

0 赞 or 打赏

喜欢就打赏一点