<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>effect javascript</title>
<style>
/* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
p{
width: 90%;
padding: 30px 10px;
margin: 10px auto;
color: #080;
border: 1px solid #088;
border-radius: 1%;
font-weight: bold;
text-align: center;
}
.as{
width: 20px;
height: 20px;
border: 1px solid #ccc;
border-radius: 50%;
position: absolute;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<p>mouse hover the body</p>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/2ndow/effect-javascript-KQXXGp */
p{
width: 90%;
padding: 30px 10px;
margin: 10px auto;
color: #080;
border: 1px solid #088;
border-radius: 1%;
font-weight: bold;
text-align: center;
}
.as{
width: 20px;
height: 20px;
border: 1px solid #ccc;
border-radius: 50%;
position: absolute;
}
/*Downloaded from https://www.codeseek.co/2ndow/effect-javascript-KQXXGp */
document.onmouseover = function(e) {
"use strict";
var dog = document.createElement("div"),
colors = ["#080", "#00f", "#f00"],
color = Math.round(Math.random() * colors.length);
dog.setAttribute("class", "as");
document.body.appendChild(dog);
dog.style.top = e.clientY + "px";
dog.style.left = e.clientX + "px";
dog.style.top = dog.offsetTop - 10 + "px";
dog.style.left = dog.offsetLeft - 10 + "px";
dog.style.borderColor = colors[color];
dog.style.width = "40px";
dog.style.height = "40px";
dog.style.borderWidth = "5px";
dog.style.transition = "all 0.6s linear 0s";
dog.style.opacity = 0;
};
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
