博客美化大全

文章目录[x]
  1. 修改网页鼠标样式
  2. 网页音乐播放器
  3. 鼠标点击显示跳动文字
  4. 网页下雪特效
  5. 页面加载过场动画
作为一个沉迷于各种博客美化的人来说,博客就相当于自己的脸一样,好看的博客无疑可以让人赏心悦目。那么博客到底有哪些可以美化的地方呢?这篇文章将把我所有的博客美化的内容都写在这里,大家可以自由选择自己喜欢的加到自己的博客上。

修改网页鼠标样式

进入别人的博客发现鼠标样式好像变的不一样了?那是因为别人用css修改了鼠标样式,那么我应该怎么修改呢?

我们只需要在自己博客的样式表里面添加这下面代码(下面是两个不同的样式,一个是默认的,还有一个是鼠标放到超链接上显示的)。

/** 鼠标样式 开始**/
/** 普通指针样式**/
body {
cursor: url(你的鼠标样式的位置(不需要引号,建议为png,cur等格式)), default;
/** 这里还可以放到其他的标签里面,这样当移动到这些标签时就可以变成自己想要的形状**/
}
/** 链接指针样式**/
a:hover{cursor:url(你的鼠标样式的位置), pointer;}
/** 鼠标样式 结束**/
实际效果

网页音乐播放器

想给自己的博客来点音乐,但是默认的H5播放器有太丑?没关系,我们可以用插件,我自己使用的插件名字叫Qplayer,这个插件比较小巧和简洁,大家也可以搜索别的网页播放器。至于安装方法,这里可以直接下载压缩包然后选择上传插件即可安装。

下载地址

鼠标点击显示跳动文字

实际效果就是你点击一下鼠标就可以显示文字,文字会移动然后消失。

使用方法也很简单,大家只需要在自己网页的页脚插入下面的js脚本:(里面的文字可以更改成自己喜欢的文字,文字颜色也可以更改)

 <script type="text/javascript">
            var a_idx = 0;
            jQuery(document).ready(function($) {
                $("body").click(function(e) {
                    var a = new Array("技术宅", "二次元", "小白", "富有想象", "*:ஐ٩(๑´ᵕ`)۶ஐ:* 学习使我进步", "(๑*◡*๑)", "✧*。٩(ˊᗜˋ*)و✧*。" ,"(づ ̄3 ̄)づ╭❤~", "╰( ´・ω・)つ──☆✿✿✿", "充满激情", "(((┏(; ̄▽ ̄)┛装完逼就跑", "熬夜成瘾(,,•﹏•,,)");
                    var $i = $("").text(a[a_idx]);
                    a_idx = (a_idx + 1) % a.length;
                    var x = e.pageX,
                        y = e.pageY;
                    $i.css({
                        "z-index": 99999999999999999999999999999999999999999999999999999999999999999999999999 ,
                        "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>

网页下雪特效

这个实际上就是在自己的网页上呈现出下雪的效果。

实现也很简单,直接引入相关的js文件即可。当然在这之前我们需要下载js和雪花的图片文件:下载地址

<!-- 下雪特效 -->
	<script type="text/javascript" src="<?php bloginfo('template_url');?>/snow/snow.js"></script>

页面加载过场动画

这个不解释了,直接说怎么用吧。

首先我们需要下载css文件,然后在博客的页眉添加下面代码:

<!--页面加载start-->
<link rel="stylesheet" type="text/css" href="/style/loader.css">

<script type="text/javascript">         
    // 等待所有加载
    $(window).load(function(){
        $('body').addClass('loaded');
        $('#loader-wrapper .load_title').remove();
    }); 
</script>    

<div id="loader-wrapper">
    <div id="loader"></div>
    <div class="loader-section section-left"></div>
    <div class="loader-section section-right"></div>
    <div class="load_title">正在加载LoveFeel站点<br><span>V1.0</span></div>
</div>	
点赞
  1. 小游 admin说道:

    这篇文章以后还会更新。 :)

发表评论

电子邮件地址不会被公开。必填项已用 * 标注

Title - Artist
0:00