0°

抖音效果 css

1562 个字符,0 张图片,大约需要 2 分钟阅读

静态效果

只需要给对应的选择器添加 text-shadow 属性即可完成。例如我让 body 里面的所有文字抖起来,就这样写:

body{
    text-shadow: -2px 0 rgba(0, 255, 255, .5), 2px 0 rgba(255, 0, 0, .5);
}

动态效果

这种静态的效果我可不满足,想让它动起来,不需要任何 JavaScript,只需要 CSS3 动画即可完成。接下来我们就利用 CSS3 动画,让所有文字抖起来吧!

添加动画

@keyframes shake-it{
    0%{
        text-shadow: 0 0 rgba(0, 255, 255, .5), 0 0 rgba(255, 0, 0, .5);
    }
    25%{
        text-shadow: -2px 0 rgba(0, 255, 255, .5), 2px 0 rgba(255, 0, 0, .5);
    }
    50%{
        text-shadow: -5px 0 rgba(0, 255, 255, .5), 3px 0 rgba(255, 0, 0, .5);
    }
    100%{
        text-shadow: 3px 0 rgba(0, 255, 255, .5), 5px 0 rgba(255, 0, 0, .5);
    }
}

添加属性

body{
    animation: shake-it .5s reverse infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

demo

@keyframes shake-it{0%{text-shadow:0 0 rgba(0,255,255,.5),0 0 rgba(255,0,0,.5)}25%{text-shadow:-2px 0 rgba(0,255,255,.5),2px 0 rgba(255,0,0,.5)}50%{text-shadow:-5px 0 rgba(0,255,255,.5),3px 0 rgba(255,0,0,.5)}100%{text-shadow:3px 0 rgba(0,255,255,.5),5px 0 rgba(255,0,0,.5)}}

    var text_obj = [document.createElement("audio"), document.body, document.getElementById("shake-it")];
    text_obj[0].src = "https://okgo.top/15207571749858858.mp3";
    text_obj[2].onclick = function(){
        text_obj[0].play();
        text_obj[1].style = "animation: shake-it .5s reverse infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);";
        setTimeout(function(){ text_obj[1].style = ""; }, 13000);
    }

玛尼玛尼轰!文字抖起来!

原文链接:保罗的小宇宙https://paugram.com/coding/shake-your-text.html

除非注明,否则均为喵喵喵博客原创文章,转载请以链接形式标明本文地址

本文链接:https://www.miaomiaomiao.org/31.html

0 条回复 A 作者 M 管理员
    当上帝赐给你荒野时,就意味着,他要你成为高飞的鹰
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论