html網(wǎng)頁實(shí)現(xiàn)osu光標(biāo)（不含拖尾）
效果圖：
html部分：
<!DOCTYPE?html>
<html?lang="en">
<head>
? ??<meta?charset="UTF-8">
? ??<meta?http-equiv="X-UA-Compatible"?content="IE=edge">
? ??<meta?name="viewport"?content="width=device-width, initial-scale=1.0">
? ??<title>osu光標(biāo)</title>
? ??<link?rel="stylesheet"?href="./css.css">
</head>
<body>
? ??<div?class="cursor"?style="display: none;">
? ? ? ??<div?class="cursorCentre">
? ? ? ? ? ??<img?src="./img/cursormiddle@2x.png"?alt="">
? ? ? ??</div>
? ? ? ??<div?class="cursorPeriphery">
? ? ? ? ? ??<img?src="./img/cursor@2x.png"?alt="">
? ? ? ??</div>
? ??</div>
</body>
<script?src="./js.js"></script>
</html>
css部分：
*?{
? ??cursor:?none;
? ??margin:?0;
? ??padding:?0;
}
html?{
? ??background-color:?black;
}
.cursor?{
? ??width:?120px;
? ??height:?120px;
? ??position:?fixed;
? ??justify-content:?center;
? ??align-items:?center;
? ??pointer-events:?none;
? ??user-select:?none;
}
.cursorCentre?{
? ??position:?absolute;
? ??top:?42.5px;
? ??left:?42.5px;
}
.cursorCentre,
.cursorCentre?img?{
? ??width:?35px;
? ??height:?35px;
}
.cursorPeriphery?{
? ??width:?90px;
? ??height:?90px;
}
.cursorPeriphery?img?{
? ??width:?100%;
? ??height:?100%;
}
.bigAnimation?{
? ??animation-name: big;
? ??animation-fill-mode:?forwards;
? ??animation-duration:?.15s;
}
.littleAnimation?{
? ??animation-name: little;
? ??animation-fill-mode:?forwards;
? ??animation-duration:?.15s;
}
@keyframes?big?{
? ? 0% {
? ? ? ??width:?90px;
? ? ? ??height:?90px;
? ? }
? ? 100% {
? ? ? ??width:?120px;
? ? ? ??height:?120px;
? ? }
}
@keyframes?little?{
? ? 0% {
? ? ? ??width:?120px;
? ? ? ??height:?120px;
? ? }
? ? 100% {
? ? ? ??width:?90px;
? ? ? ??height:?90px;
? ? }
}
js部分：
var?cursor?=?document.getElementsByClassName('cursor')[0]
var?cursorPeriphery?=?document.getElementsByClassName('cursorPeriphery')[0]
var?mouseX;
var?mouseY;
var?angle?=?0;
window.onmousemove?=?function?(e) {
? ??mouseX?=?e.clientX;
? ??mouseY?=?e.clientY;
}
window.onmouseover?=?function?() {
? ??cursor.style.display?=?'flex';
}
window.onmouseout?=?function?() {
? ??cursor.style.display?=?'none';
}
window.onmousedown?=?function?() {
? ??cursorPeriphery.className?=?'cursorPeriphery bigAnimation';
}
window.onmouseup?=?function(){
? ??cursorPeriphery.className?=?'cursorPeriphery littleAnimation';
}
function?animation() {
? ??cursor.style.top?=?mouseY?-?60?+?'px';
? ??cursor.style.left?=?mouseX?-?60?+?'px';
? ??cursorPeriphery.style.transform?=?'rotate('?+?angle++ +'deg)'
? ??requestAnimationFrame(animation)
}
animation()
代碼/素材下載鏈接：
https://www.aliyundrive.com/s/JvT2dRrSXCq
溫馨提示：
手機(jī)端長(zhǎng)按點(diǎn)贊可投幣
網(wǎng)頁端直接就可以投幣
