公众号做漫画网站,wordpress 教學,wordpress刷留言,hhvm+wordpress目录 更改鼠标指针样式1. 鼠标指针的不同样式2. 更改指针图标 鼠标点击效果1. 鼠标点击烟花特效2. 鼠标点击爱心特效3. 鼠标点击价值观文字特效4. 其他点击特效 部分资源链接 更改鼠标指针样式
1. 鼠标指针的不同样式
平常#xff0c;我们在浏览界面时#xff0c;会发现鼠标… 目录 更改鼠标指针样式1. 鼠标指针的不同样式2. 更改指针图标 鼠标点击效果1. 鼠标点击烟花特效2. 鼠标点击爱心特效3. 鼠标点击价值观文字特效4. 其他点击特效 部分资源链接 更改鼠标指针样式
1. 鼠标指针的不同样式
平常我们在浏览界面时会发现鼠标的样式有所不同鼠标的样式变化和cursor属性有关。cursor属性的几个关键字default、pointer、wait、help、text、crosshair。
default默认光标
pointer超链接的指针
wait表示程序正在忙
help指示可用帮助
text指示文本
crosshair鼠标呈现十字状
span stylecursor: default;默认光标/span
span stylecursor: pointer;超链接的指针小手/span
span stylecursor: wait;指程序正在忙沙漏/span
span stylecursor: help;指示可用的帮助/span
span stylecursor: text;指示文本/span
span stylecursor: crosshair;十字状/span效果如下
2. 更改指针图标
更改样式图标很简单只需要在鼠标的指针样式前面添加一个url链接一张鼠标的图片。 这些就是一些鼠标样式图这些资源文末会给出下载。其他 具体可以自行百度下载。 代码案例
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/** 普通指针样式**/body {width: 100vw;height: 100vh;cursor: url(./鼠标样式包/arr46.png), auto;}/** 链接指针样式**/a:hover {cursor: url(./鼠标样式包/arr43.png), pointer;}/style
/headbody
a href#请点击/a
/body
/html效果可以看这里点击这里
鼠标点击效果
1. 鼠标点击烟花特效
可以引用外包脚本文件 案例代码如下
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/** 普通指针样式**/body {width: 100vw;height: 100vh;cursor: url(../../鼠标样式包/arr46.png), auto;}/** 链接指针样式**/a:hover {cursor: url(../../鼠标样式包/arr1.png), pointer;}/style
/headbody!--给WordPress网站添加鼠标点击爆炸五颜六色特效--canvas classfireworks styleposition:fixed;left:0;top:0;z-index:99999999;pointer-events:none;/canvasscript typetext/javascript srcdjtx.js/script
/body/html效果如下 脚本文件文会给出下载
2. 鼠标点击爱心特效
代码如下
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbody!-- 网页鼠标点击特效爱心 --script typetext/javascript! function (e, t, a) {function r() {for (var e 0; e s.length; e) s[e].alpha 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[e].y--, s[e].scale .004, s[e].alpha - .013, s[e].el.style.cssText left: s[e].x px;top: s[e].y px;opacity: s[e].alpha ;transform:scale( s[e].scale , s[e].scale ) rotate(45deg);background: s[e].color ;z-index:99999);requestAnimationFrame(r)}function n() {var t function typeof e.onclick e.onclick;e.onclick function (e) {t t(), o(e)}}function o(e) {var a t.createElement(div);a.className heart, s.push({el: a,x: e.clientX - 5,y: e.clientY - 5,scale: 1,alpha: 1,color: c()}), t.body.appendChild(a)}function i(e) {var a t.createElement(style);a.type text/css;try {a.appendChild(t.createTextNode(e))} catch (t) {a.styleSheet.cssText e}t.getElementsByTagName(head)[0].appendChild(a)}function c() {return rgb( ~~(255 * Math.random()) , ~~(255 * Math.random()) , ~~(255 * Math.random()) )}var s [];e.requestAnimationFrame e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) { setTimeout(e, 1e3 / 60)}, i(.heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: ;width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}), n(), r()}(window, document);/script
/body
/html效果如下
3. 鼠标点击价值观文字特效
代码如下
!DOCTYPE html
html langenheadmeta charsetUTF-8titleDocument/title
/headbodyscript(function () {var a_idx 0;window.onclick function (event) {var a new Array(❤富强❤, ❤民主❤, ❤文明❤, ❤和谐❤, ❤自由❤, ❤平等❤, ❤公正❤, ❤法治❤, ❤爱国❤,❤敬业❤, ❤诚信❤, ❤友善❤);var heart document.createElement(b); //创建b元素heart.onselectstart new Function(event.returnValuefalse); //防止拖动document.body.appendChild(heart).innerHTML a[a_idx]; //将b元素添加到页面上a_idx (a_idx 1) % a.length;heart.style.cssText position: fixed;left:-100%;; //给p元素设置样式var f 16, // 字体大小x event.clientX - f / 2, // 横坐标y event.clientY - f, // 纵坐标c randomColor(), // 随机颜色a 1, // 透明度s 1.2; // 放大缩小var timer setInterval(function () { //添加定时器if (a 0) {document.body.removeChild(heart);clearInterval(timer);} else {heart.style.cssText font-size:16px;cursor: default;position: fixed;color: c ;left: x px;top: y px;opacity: a ;transform:scale( s );;y--;a - 0.016;s 0.002;}}, 15)}// 随机颜色function randomColor() {return rgb( (~~(Math.random() * 255)) , (~~(Math.random() * 255)) , (~~(Math.random() * 255)) );}}());/script
/body
/html效果如下
4. 其他点击特效
代码如下
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbody!--光标特效仙女棒--script srchttps://blog-static.cnblogs.com/files/axqa/fairyDustCursor.js/script!--光标之泡泡--script srchttps://blog-static.cnblogs.com/files/axqa/bubbleCursor.js/script!--笑脸--script srchttps://blog-static.cnblogs.com/files/axqa/emojiCursor.js/script!--雪花--script srchttps://blog-static.cnblogs.com/files/axqa/snowflakeCursor.js/script!-- 点击后出现烟花效果 --script srchttps://blog-static.cnblogs.com/files/axqa/cursor-effects.js/script/body
/html引用了别人的线上脚本文件可以借鉴使用
部分资源链接
点击下载 链接https://pan.baidu.com/s/1k03aNiNEyjo–VZ5IAcM6g 提取码gq8v
