给自己鼠标改个样式，再加一个炫酷的拖尾 #HTML鼠标皮肤拖尾

long_songs

已于 2023-03-30 22:11:21 修改

阅读量1.9k

点赞数 3

分类专栏： HTML 文章标签： javascript html safari

于 2022-03-17 21:20:21 首次发布

本文链接：https://blog.csdn.net/long_songs/article/details/123560957

版权

HTML 专栏收录该内容

20 篇文章 2 订阅

订阅专栏

在自己的网页上面，有时候觉得太单调，想给自己的鼠标加点皮肤

下面的代码拿过来就直接可以用的，因为都是站点里面的图片，不用自己去找图片也能先玩玩看

想要自己修改样式的话，只用改里面几个url后面的图片地址就好了，十分的简单方便

线上demo：

鼠标特效http://longsong.games/time/wife/

<!doctype html>
<html style="cursor:url(http://www.longsong.xyz/Count_Visitor/images/cruise.ico),auto;">
<style>
  div{
    width: 20px;
    height: 20px;
    background-image:url(http://longsong.games/time/Count_Visitor/images/cruise.ico);
    position: absolute;
    border-radius: 50%;
  }
</style>
 
<head>
  <meta charset="utf-8">
  <title>鼠标特效</title>
</head>
 
<body style="height: 100%;width: 100%;position=relative">
<video src="http://www.longsong.online/wp-content/uploads/2022/03/mulai.mp4" style="width: 100%;height: 100%;object-fit: cover;position: absolute;top: 0;left: 0;" autoplay="autoplay" loop="loop" muted="muted"></video>
<div id="warp" onmouseover="over()" onmouseout="out()">
  <div id="text" style="display: none;">这里面有一段文字</div>
</div>
</body>
 
<script>
  document.onmousemove = function () {
    var div = document.createElement('div');
    var x = event.clientX;
    var y = event.clientY;
    var o = 10; //这里可以自行调节
    div.style.left = x + "px";
    div.style
    div.style.top = y + "px";
    document.body.appendChild(div);
 
    for(var i = 0;i<o;i++){
      setTimeout(function(){
        document.body.removeChild(div); 
      },100)
    }
 
 
 
 
 
  }
</script>
 
</html>

想要给自己的网页加个动态背景：

如何把MP4视频作为html网页的背景？_long_songs的博客-CSDN博客大家可以先欣赏欣赏我妻红莉栖放在首页的样子：http://www.longsong.xyz/http://www.longsong.xyz/<!doctype html><html><head></head><body style="height: 100%;width: 100%;position=relative"><video src="http://www.longsong.online/w...https://blog.csdn.net/long_songs/article/details/123300771