本文最后更新于 1910 天前，其中的信息可能已经有所发展或是发生改变。
点击以查看效果
直接在文章编辑器里面输入即可
<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>