<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
body{ margin: 0;
font-size: 16px;
font-family: Roboto;
overflow-x: hidden;
background-color: #1a1a1a;
color: #fff;width:100%;
height: 1000px;
cursor: url('js/point.png'),default!important;
}
.mouse-follower{
position: fixed;
top: 0;
left: 0;
width: 0;
height: 0;
z-index: 9999;
pointer-events: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
mix-blend-mode: multiply;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
-webkit-transition: top .15s ease-out,left .15s ease-out;
-o-transition: top .15s ease-out,left .15s ease-out;
transition: top .15s ease-out,left .15s ease-out;
}
.inner-mouse{
width: 35px;
height: 35px;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: #ff45454f;
border-radius: 50%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
opacity: 1;
-webkit-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
transition: opacity 0.5s;
-webkit-box-shadow: 1px 3px 5px #d457578c;
box-shadow: 1px 3px 5px #d457578c;
-webkit-transition: background 0.5s, -webkit-box-shadow 0.5s;
transition: background 0.5s, -webkit-box-shadow 0.5s;
-o-transition: background 0.5s, box-shadow 0.5s;
transition: background 0.5s, box-shadow 0.5s;
transition: background 0.5s, box-shadow 0.5s, -webkit-box-shadow 0.5s;
}
</style>
<script src="js/jquery.js"></script>
<script>
$(function () {。
$(document).mousemove(function(e) {
$(".mouse-follower").css({ "position": "absolute", "left": e.pageX , "top": e.pageY });
});
});
</script>
</head>
<body>
<div>
<div class="mouse-follower">
<div class="inner-mouse"></div>
</div>
</div>
</body>
</html>
记录鼠标跟随效果
最新推荐文章于 2024-02-12 17:12:18 发布