鼠标左击，出现文字

最近浏览一些网页或者博客的时候，发现在鼠标左击的时会弹出"富强",“民主”,“文明”,"和谐"等文字。感觉效果挺不错的，但是他们对文字的样式设置过于单调了，正好最近做项目的时候，也封装了一个比较炫酷的这个效果。

首先看看html代码(这个盒子是放效果的地方，可自定义)

<div class="clickBox"></div>

再看css代码

		.clickBox{
            width: 800px;
            height: 500px;
            background: #000;
            animation: shake-it .5s reverse infinite;
        }

//给文字添加类似于抖音的那种抖动效果
        @keyframes shake-it {
            0%{
                text-shadow:0 0 rgba(0,255,255,.5), 0 0 rgba(255,0,0,.5);
            }
            12.5%{
                text-shadow:-1px 0 rgba(0,255,255,.5), 1px 0 rgba(255,0,0,.5);
            }
            25%{
                text-shadow:-2px 0 rgba(0,255,255,.5), 2px 0 rgba(255,0,0,.5);
            }
            37.5%{
                text-shadow:-1px 0 rgba(0,255,255,.5), 1px 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) ;
            }
        }

接着看js代码

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script>
    //定义获取词语下标
    var a_idx = 0;
    $(function() {
        //点击clickBox时触发事件  此处是你需要放置的位置，若你想在整个加入此效果，需将$(".clickBox")改为$("body")
        $(".clickBox").click(function(e) {
            //需要显示的词语
            var a = new Array("富强","民主", "文明", "和谐","自由", "平等", "公正","法治","爱国","敬业","诚信","友善");
            //设置词语给span标签
            var $i = $("<span/>").text(a[a_idx]);
            //下标等于原来下标+1  余 词语总数
            a_idx = (a_idx + 1)% a.length;
            //获取鼠标指针的位置，分别相对于文档的左和右边缘。
            //获取x和y的指针坐标
            var x = e.pageX, y = e.pageY;
            //在鼠标的指针的位置给$i定义的span标签添加css样式
            $i.css({"z-index" : 999,
                "top" : y - 20,
                "left" : x,
                "position" : "absolute",
                "font-weight" : "bold",
                "color" : color16()
            });
            //在body添加这个标签
            $(".clickBox").append($i);
            //animate() 方法执行 CSS 属性集的自定义动画。
            //该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。
            //详情请看http://www.w3school.com.cn/jquery/effect_animate.asp
            $i.animate({
                //将原来的位置向上移动180
                "top" : y - 180,
                "opacity" : 0
                //1500动画的速度
            }, 1500, function() {
                //时间到了自动删除
                $i.remove();
            });
        });
    });
    function color16(){//十六进制颜色随机
      var r = Math.floor(Math.random()*256);
      var g = Math.floor(Math.random()*256);
      var b = Math.floor(Math.random()*256);
      var color = '#'+r.toString(16)+g.toString(16)+b.toString(16);
      return color;
    }
</script>

最后看看效果
鼠标左击，出现文字
同时我们学习小组最近也封装了自己的组件库，因为经费紧张，所以没有自己的服务器，只是借助了云虚拟主机，所以网速可想而知。而上面这个效果，我们基于Vue基础之上进行了封装，将其封装成了一个小组件鼠标左击。
具体的使用方法，可进入我们的shapeui官网，在中文文档里边的PC端有详细介绍。

鼠标左击，出现文字

相关推荐