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