zoukankan      html  css  js  c++  java
  • 点击时扩散效果

     
    <
    style> p { margin: 0; position: relative; padding: 60px 30px; background-color: orange; color: #fff; width: 200px; overflow: hidden; text-align: center; border: 20px solid #000; } i { position: absolute; width: 520px; height: 520px; border-radius: 50%; } </style> <p><i></i></p> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script> (function() { var key = true; $("p").click(function(event) { var e = event || window.event; if (key) { key = false; var scale = 0; var a = 0.8; var timer = setInterval(function() { if (scale >= 1 || a <= 0) { scale = 0; a = 0.8; clearInterval(timer); key = true; } $("i").css({ "left": e.pageX - 8 - 20, "top": e.pageY - 8 - 20, "transform": "translate(-50%,-50%) scale(" + scale + ")", "background-color": "rgba(225,225,225," + a + ")" }); scale += 0.01; a -= 0.008; }, 10) } }) }()) </script>
  • 相关阅读:
    keepalived排错
    shell脚本记录
    mysql(mariadb)主从配置
    添加硬盘设备
    天数
    centos7网络配置总结
    Keepalibed监控nginx
    zabbix安装
    基于JWT的web api身份验证及跨域调用
    C# webapi 权限验证
  • 原文地址:https://www.cnblogs.com/lprosper/p/9805275.html
Copyright © 2011-2022 走看看