WordPress特效:鼠标点击显示圆圈动画

一点优化 2019年12月29日21:07:43
评论
1.4K看1 1469字
广告也精彩
今天,给大家介绍一款wordpress鼠标点击特效,当鼠标单击网页任何地方时,都会出现一个犹如水波放大的彩色圆圈动画。这个特效,点击的时候不仅会让访客感觉很有手感,而且也会让访客感觉你的网站很有特色。话不多说,下面直接上代码。

图片:

WordPress特效:鼠标点击显示圆圈动画

1.添加显示代码:

将以下代码添加到footer.php的</body>上面:

<script src=“http://cdn.qimok.cn/1.js”></script>
<script src=“http://cdn.qimok.cn/2.js”></script>
<script>
‘use strict’;
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) {if (window.CP.shouldStopExecution(2)){break;} var source = arguments[i]; for (var key in source) {if (window.CP.shouldStopExecution(1)){break;} if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } }
window.CP.exitedLoop(1);
}
window.CP.exitedLoop(2);
return target; };
var OPTS = {
fill: ‘none’,
radius: 25,
strokeWidth: { 50: 0 },
scale: { 0: 1 },
angle: { ‘rand(-35, -70)’: 0 },
duration: 500,
left: 0,
top: 0,
easing: ‘cubic.out’
};
var circle1 = new mojs.Shape(_extends({}, OPTS, {
stroke: ‘#FF8966’
}));
var circle2 = new mojs.Shape(_extends({}, OPTS, {
radius: { 0: 15 },
strokeWidth: { 30: 0 },
stroke: ‘#E5446D’,
delay: ‘rand(75, 150)’
}));
document.addEventListener(‘click’, function (e) {
circle1.tune({ x: e.pageX, y: e.pageY }).replay();

circle2.tune({ x: e.pageX, y: e.pageY }).replay();
});
</script>

2.添加样式代码

将以下代码放到style.css中即可:

.message {
position: fixed;
width: 80%;
text-align: center;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
font-size: 1.2rem;
font-family: ‘Baloo Bhaina’, cursive;
color: #706C61;
}

搞定,赶快去看效果吧~~

  • SEO话题
  • 这是我的QQ群扫一扫
  • weinxin
  • wp开发交流
  • 我的QQ交流群扫一扫
  • weinxin
wordpress搭建站中站(栏目站)教程 基础建站教程

wordpress搭建站中站(栏目站)教程

wordpress如何搭建栏目站?也就是我们所说的站中站。wordpress因为文章数据库表单只有一个,所以一般会比较卡,当然也有一些SEO站长因为站中站权重比较集中,所以使用站中站的方式做优化,还有...
修改WordPress数据库前缀完后台无法登陆教程 WP综合教程

修改WordPress数据库前缀完后台无法登陆教程

一点优化操作完上一个如何修改WordPress数据库前缀修改完之后,发现网站后台无法登陆了,百思不得其姐,然后在百度的帮助下,解决了这个问题,后续的教程请看下面。 如果你将数据库导入到运营中的服务器登...
如何修改WordPress数据库前缀 WP综合教程

如何修改WordPress数据库前缀

之前有一点优化有出一个分布式缓存的教程,但是那个分布式缓存会导致多个网站在一个服务器下面,数据库相同表前缀导致出现错误,所以这里一点优化在这边出三个WordPress修改表前缀的方法,分别是插件,安装...
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: