点击时扩散效果

 
<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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 纯css抖动效果

    ProsperLee
  • ajax文件上传-FormData()

    ProsperLee
  • 鼠标点击特效

    ProsperLee
  • Redis删除特定前缀key的优雅实现

    Redis中没有批量删除特定前缀key的指令,但我们往往需要根据前缀来删除,那么究竟该怎么做呢?可能你一通搜索后会得到下边的答案

    37丫37
  • Map接口在1.8版本新增的几个方法

    这可以说是最常用的方法了吧,获取指定key的value,当key不存在的时候返回一个默认值,也就是第二个参数.

    呼延十
  • iOS 企业签名与超级签名

    好久没有静下心来写点iOS方面的东西了,可能是忙了一些,也可能我们都不是几年前的我们,但工资却回退到几年前 好了,不说废话,今天讲讲签名的那些事

    GuangdongQi
  • Redis删除特定前缀key的优雅实现

    Redis中没有批量删除特定前缀key的指令,但我们往往需要根据前缀来删除,那么究竟该怎么做呢?可能你一通搜索后会得到下边的答案

    小尘哥
  • 文件识别浅谈(含office文件区分)

    本文主要根据后台接口识别Office文件类型这一话题做一些分享,主要方向还是放在不能获取到文件名情况下的Office文件识别。

    Rekent
  • Flask 静态文件、模板文件设置

    在Django项目中,如果需要访问静态文件,默认则是使用 /static 的前缀来进行访问。那么对于Flask来说,也是一样的。

    Devops海洋的渔夫
  • CTF实战31 综合实战和讲解一

    该培训中提及的技术只适用于合法CTF比赛和有合法授权的渗透测试,请勿用于其他非法用途,如用作其他非法用途与本文作者无关

    用户1631416

扫码关注云+社区

领取腾讯云代金券