zoukankan      html  css  js  c++  java
  • 让你的网页"抖起来"?!?

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

    没有利用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);
    

    总结

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

  • 相关阅读:
    Redis主从复制
    POI导出给指定单元格添加背景色
    Mybatis的resultMap使用
    前后端分离
    日常总结
    java环境变量配置
    Java线程池七个参数详解
    java中常见的锁
    Linux定时任务
    SQL语句的整理
  • 原文地址:https://www.cnblogs.com/sunhang32/p/12069857.html
Copyright © 2011-2022 走看看