Native JS realizes the special effect of spreading love by mouse sliding
|
This article shares with you a js special effect of spreading love when the mouse slides, the effect is as follows:
The following is the code implementation, you are welcome to copy, paste and collect it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Native JS to achieve mouse sliding love effect</title>
<style>
* {
margin: 0;
padding: 0;
font-family: 'Microsoft YaHei', sans-serif;
}
body {
height: 100vh;
background: #000;
overflow: hidden;
}
span {
position: absolute;
background: url(heart.png);
pointer-events: none;
width: 100px;
height: 100px;
background-size: cover;
transform: translate(-50%, -50%);
animation: animate 2s linear infinite;
}
@keyframes animate {
0% {
transform: translate(-50%, -50%);
opacity: 1;
filter: hue-rotate(0deg);
}
100% {
transform: translate(-50%, -1000%);
opacity: 0;
filter: hue-rotate(360deg);
}
}
</style>
</head>
<body>
<script>
document.addEventListener('mousemove', (e) => {
let body = document.querySelector('body')
let heart = document.createElement('span')
let x = e.offsetX
let y = e.offsetY
heart.style.left = x + 'px'
heart.style.top = y + 'px'
let size = Math.random() * 100
heart.style.width = size + 'px'
heart.style.height = size + 'px'
body.appendChild(heart)
setTimeout(() => {
heart.remove()
}, 3000)
})
</script>
</body>
</html>The following is the picture heart.png introduced in the above code
The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: Docker uses Supervisor to manage process operations
>>: How to safely shut down MySQL
Recommend
Example of how to automatically start an application service in a Docker container
If you want the application service in the Docker...
Explanation of the working mechanism of namenode and secondarynamenode in Hadoop
1) Process 2) FSImage and Edits Nodenode is the b...
VMware WorkStation 14 pro installation Ubuntu 17.04 tutorial
This article records the specific method of insta...
Detailed steps for Python script self-start and scheduled start under Linux
1. Python automatically runs at startup Suppose t...
How to use JS code compiler Monaco
Preface My needs are syntax highlighting, functio...
Corporate website and column dictionary Chinese and English comparison Friends who make Chinese and English bilingual corporate websites need
name character name character information news te...
Implementation of grayscale release with Nginx and Lua
Install memcached yum install -y memcached #Start...
In-depth understanding of Linux load balancing LVS
Table of contents 1. LVS load balancing 2. Basic ...
Introduction and usage of Angular pipeline PIPE
Preface PIPE, translated as pipeline. Angular pip...
Steps to create a Vite project
Table of contents Preface What does yarn create d...
Methods and steps for deploying multiple war packages in Tomcat
1 Background JDK1.8-u181 and Tomcat8.5.53 were in...
The difference between redundant and duplicate indexes in MySQL
MySQL allows you to create multiple indexes on a ...
Mysql WorkBench installation and configuration graphic tutorial
This article shares with you the installation and...
How to write a MySQL backup script
Preface: The importance of database backup is sel...
Vue+Router+Element to implement a simple navigation bar
This project shares the specific code of Vue+Rout...