<body>
<h1>
キラキラが後ろをついてくるマウスストーカー
</h1>
</body>
.star {
position: fixed;
top: -15px;
left: -15px;
width: 30px;
height: 30px;
background: url(https://lab.risewill.co.jp/images/web-design/mouse-stalker-img.png) 50% 50% no-repeat;
background-size: contain;
z-index: 2;
animation: star 2.5s ease-out 0s forwards;
}
@keyframes star {
0% {
transform: translateY(0) rotate(-5deg);
opacity: 0;
}
5% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
transform: translateY(50px) rotate(5deg);
opacity: 0;
}
}
/* 以下、関係のない記述です。 */
body {
margin: 20px;
text-align: center;
background: #000;
h1 {
color: #fff;
font-size: 20px;
font-weight: bold;
margin-bottom: 20px;
}
}
$(function() {
var body = $("body");
var flag = true;
$(document).on("mousemove", function(e) {
if (flag) {
var x = e.clientX;
var y = e.clientY;
var star = $("<span>").attr("class", "star");
star.css({
"top": y + "px",
"left": x + "px"
});
body.prepend(star);
setTimeout(function() {
star.remove();
}, 2000);
flag = false;
setTimeout(function() {
flag = true;
}, 100);
}
});
});