抖.png

点击以查看效果

直接在文章编辑器里面输入即可

<style>@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)}}</style>

<button class="btn small" id="shake-it">抖!</button>

<script>var text_obj=[document.body,document.getElementById("shake-it")];
    text_obj[1].onclick=function(){
    text_obj[0].style="animation: shake-it .5s reverse infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);";
    setTimeout(function(){
        text_obj[0].style=""
        },13000)
    };
</script>

如果需要在抖的时候添加音乐

<style>@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)}}</style>
<style>@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)}}</style>

<script>var text_obj=[document.body,document.getElementById("shake-it")];

text_obj[1].onclick=function(){
    text_obj[0].style="animation: shake-it .5s reverse infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);";
    setTimeout(function(){
        text_obj[0].style=""
        },13000)
    };
</script>
<script>var text_obj=[document.body,document.getElementById("shake-it")];
text_obj[1].onclick=function(){
    text_obj[0].style="animation: shake-it .5s reverse infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);";
    setTimeout(function(){
        text_obj[0].style=""
        },13000)
    };
</script>

根据https://paugram.com/coding/shake-your-text.html修改

最后修改:2019 年 09 月 06 日 09 : 27 PM
如果觉得我的文章对你有用,请随意赞赏