当前位置:首页 > Web开发 > 正文

让你的网页抖起来?!?

2024-03-31 Web开发

细心的小伙伴可能发现我的左下角有一个抖起来的小按钮,然后页面就开始皮了起来,哈哈好快乐啊

技术图片

没有利用js,单独的使用了css3的动画就实现了这个效果

css设置 @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); } } html文本设计 <button id="btn1">皮一下</button> 12131312

这里面写什么都可以,我就简单写了点文字

JS设计 function paul_shake(action, selector) { var status = false; action.addEventListener("click", function () { if(status === true){ status = false; action.innerHTML = "抖起来" selector.style = "overflow: auto;"; } else{ status = true; action.innerHTML = "停止抖" selector.style = "overflow: auto;animation: shake-it .5s reverse infinite cubic-bezier(0.68, -0.55, 0.27, 1.55)"; } }) } paul_shake(document.getElementById("btn1"), document.body); 总结

我们的页面就像抖音一样 抖了起来
代码其实就是这么快乐

让你的网页"抖起来"?!?

温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/web/39990.html