WordPress网站添加鼠标点击特效 网站更换默认的鼠标样式 CSS修改浏览器的滚动条

首页 » WordPress » WordPress网站添加鼠标点击特效 网站更换默认的鼠标样式 CSS修改浏览器的滚动条

站长们为了吸引用户,就会对网站进行美化,那么鳄鱼君在这篇文章将对网站的一些美化方式进行介绍,让你的网站看起来更加有味道!

网站添加鼠标点击特效

鼠标点击显示小爱心

(function(window,document,undefined){
    var hearts = [];
    window.requestAnimationFrame = (function(){
                    return window.requestAnimationFrame ||
                    window.webkitRequestAnimationFrame ||
                    window.mozRequestAnimationFrame ||
                    window.oRequestAnimationFrame ||
                    window.msRequestAnimationFrame ||
                    function (callback){
                        setTimeout(callback,1000/60);
                    }
                })();
                init();
                function init(){
                    css(".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: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
                    attachEvent();
                    gameloop();
                }
                function gameloop(){
                for(var i=0;i<hearts.length;i++){
                if(hearts[i].alpha <=0){
                            document.body.removeChild(hearts[i].el);
                            hearts.splice(i,1);
                            continue;
                        }
                        hearts[i].y--;
                        hearts[i].scale += 0.004;
                        hearts[i].alpha -= 0.013;
                        hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color;
                    }
                    requestAnimationFrame(gameloop);
                }
                function attachEvent(){
                    var old = typeof window.onclick==="function" &amp;&amp; window.onclick;
                    window.onclick = function(event){
                        old &amp;&amp; old();
                        createHeart(event);
                    }
                }
                function createHeart(event){
                    var d = document.createElement("div");
                    d.className = "heart";
                    hearts.push({
                        el : d,
                        x : event.clientX - 5,
                        y : event.clientY - 5,
                        scale : 1,
                        alpha : 1,
                        color : randomColor()
                    });
                    document.body.appendChild(d);
                }
                function css(css){
                    var style = document.createElement("style");
                    style.type="text/css";
                    try{
                        style.appendChild(document.createTextNode(css));
                    }catch(ex){
                        style.styleSheet.cssText = css;
                    }
                    document.getElementsByTagName('head')[0].appendChild(style);
                }
                function randomColor(){
                    return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")";
                }
            })(window,document); 

直接把上面代码复制到footer.php内。
鼠标点击显示文字

<script type="text/javascript">
    var a_idx = 0;
    jQuery(document).ready(function($) {
        $("body").click(function(e) {
            var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善");
            var $i = $("<span/>").text(a[a_idx]);
            a_idx = (a_idx + 1) % a.length;
            var x = e.pageX,
            y = e.pageY;
            $i.css({
                "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
                "top": y - 20,
                "left": x,
                "position": "absolute",
                "font-weight": "bold",
                "color": "#ff6651"
            });
            $("body").append($i);
            $i.animate({
                "top": y - 180,
                "opacity": 0
            },
            1500,
            function() {
                $i.remove();
            });
        });
    });
    </script> 

将以上代码加入到博客主题页脚footer.php文件。
鼠标点击显示数字

<script>
var _click_count=0;
$("body").bind("click",function(e){ //直接给body一个事件好了.
//var n=Math.round(Math.random()*100);//随机数
var $i=$("<b>").text("+"+(++_click_count));//添加到页面的元素
var x=e.pageX,y=e.pageY;//鼠标点击的位置
$i.css({
"z-index":99999,
"top":y-15,
"left":x,
"position":"absolute",
"color":"red"
});
$("body").append($i);
$i.animate(
{"top":y-180,"opacity":0},
1500,
function(){$i.remove();}
);
e.stopPropagation();
});
</script> 

鼠标点击爆炸五颜六色

<!--给WordPress网站添加鼠标点击爆炸五颜六色特效-->
<canvas class="fireworks" style="position: fixed; left: 0; top: 0; z-index: 99999999; pointer-events: none;"></canvas>
<script type="text/javascript" src="https://www.ixianzong.com/wp-content/themes/begin/js/djtx.js"></script> 

这种鼠标点击的特效一般都是引入js来实现的,比较简单,可以用来吸引读者。

网站更换鼠标样式

可能细心的小伙伴会发现有的博客里面鼠标不是普通的箭头,而是非常好看的鼠标,今天就教大家怎么修改鼠标指针的样式,在此之前你需要到某些网站中爬一下他们的鼠标样式,借鉴一下,哪个好看选哪个,然后把这两个文件,一般是一个箭头和一个手指:

/** 鼠标样式 开始**/
/** 普通指针样式**/
body {
cursor: url(../img/5ccab616ea9c8.cur), default;
}
/** 链接指针样式**/
a:hover{cursor:url(../img/5ccab63d8fc80.cur), pointer;}
/** 鼠标样式 结束**/ 

将以上代码放进主题文件夹下的CSS文件里面,随便一个CSS文件都可以,一般都是在style.css下。当然前提是你发现了一个很好看的鼠标,然后下载下来保存为png格式的图片也可以,不一定非要使用cur格式的。

网站滑动滚动条样式

普通浏览器的滚动条样式可能有点不太美观,我们可以使用下面的CSS样式来简单修改一下:

::-webkit-scrollbar {/*滚动条整体样式*/
width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
height: 5px;
}
::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
background-color: #ee3f4d;
background-image: -webkit-linear-gradient(45deg, rgba(255, 93, 143, 1) 25%, transparent 25%, transparent 50%, rgba(255, 93, 143, 1) 50%, rgba(255, 93, 143, 1) 75%, transparent 75%, transparent);
}
::-webkit-scrollbar-track {/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: #fff;
}

未经允许不得转载:作者:鳄鱼君, 转载或复制请以 超链接形式 并注明出处 鳄鱼君
原文地址:《WordPress网站添加鼠标点击特效 网站更换默认的鼠标样式 CSS修改浏览器的滚动条》 发布于2019-11-17

分享到:
赞(1) 赏杯咖啡

评论 抢沙发

6 + 8 =


文章对你有帮助可赏作者一杯咖啡

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.6主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册