博客园添加鼠标点击效果、拖动线条效果、人体瑜伽时间特效

说明:在查阅文档时总会看到许多博主的博客园炫酷效果吸引,现便开始申请博客园,并查找那些分享他们的制作方法,完成了一个,觉得还行,并且可以直接使用。

     本人所有制作方法皆来源广大网友博主。

效果展示

博客园添加鼠标点击效果、拖动线条效果、人体瑜伽时间特效_第1张图片

首先注册博客后,需要申请开通博客园,申请后一般一个小时就可以接到消息通知,申请成功后,便可以通过登录名密码登陆博客园后台了。

博客园添加鼠标点击效果、拖动线条效果、人体瑜伽时间特效_第2张图片

然后我们点击设置,页面样式效果的调整都可以再这里完成了,需要的文件或者图片可以再对应的窗口上传即可,这里需要操作的是设置里“博客侧边栏公告(支持HTML代码) (支持 JS 代码)”这里需要申请支持js代码,这里申请些许严格,分享一篇博主的:

尊敬的博客园管理员:

  请问是否可以帮我开通js权限,我需要一些简单的js来解决例如代码高亮等外观调整。

  谢谢您的帮助。

当然我没按照这个,我就写了一次就通过了,没有硬性规定哈,你需要做什么就写什么提交就行了。

开通后具体操作我在下面会详细的说明

具体实现步骤

一、鼠标点击效果

  博客园添加鼠标点击效果、拖动线条效果、人体瑜伽时间特效_第3张图片

  我们只需要再(支持html代码)(支持js代码)下添加:



二、鼠标吸附粒子线条特效

  

  需要在 脚本html代码 下添加:

    

    说明:color:线条颜色,opacty:透明度,count:数量,z-index:堆叠顺序

三、人体瑜伽时间特效

博客园添加鼠标点击效果、拖动线条效果、人体瑜伽时间特效_第4张图片

  这个时间进来刷新后会暂停,点击开始后就可以正常了,需要在(支持HTML代码) (支持 JS 代码)下:

    
    


    
    
    
    
    
    
    
    

    

    

四、对页面字体修改css样式

博客园添加鼠标点击效果、拖动线条效果、人体瑜伽时间特效_第5张图片

  需要在 页面定制 CSS 代码 下:

    body{
      background-size:normal;
      font-family: cursive;
      font-size: 18px;
      font-weight: bold;
    }
    body::-webkit-scrollbar {
      display: none;
    }

    #最上方名称字样修改
    #blogTitle h1 {
      font-size: 150%;
      font-weight: bold;
      line-height: 2.5;
      padding-top: 25px;
      margin-left: 2em;
      font-family: serif;
      font-size: 54px;
    }
    #footer {
      font-size: 12px;
      font-weight:normal;
    }

 到此完成了,希望对广大喜好博客的网友有帮助。觉得有帮助就点个赞

你可能感兴趣的:(博客园添加鼠标点击效果、拖动线条效果、人体瑜伽时间特效)