【第24期】使用html,css和javascript实现彩色墨点动画效果
2023-04-03
html及javascript代码：
<!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>使用html,css和javascript实现彩色墨点动画效果</html></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>彩墨</h2>
<script>
let images = [
'url("./img/1.png")',
'url("./img/2.png")',
'url("./img/3.png")'
]
let body = document.querySelector('body');
body.onclick = function(e){
let x = e.pageX - e.target.offsetLeft;
let y = e.pageY - e.target.offsetTop;
let splash = document.createElement('span');
splash.style.left = x + 'px';
splash.style.top = y + 'px';
let bg = images[Math.floor(Math.random() * images.length)];
splash.style.backgroundImage = bg;
this.appendChild(splash);
setTimeout(()=>{
splash.remove()
},4000)
}
</script>
</body>
</html>
css代码：
*
{
margin:0;
padding: 0;
box-sizing: border-box;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background:#222;
overflow: hidden;
}
h2
{
color:#fff;
font-size: 14vw;
z-index:100000;
user-select: none;
pointer-events: none;
text-shadow: 0 20px 30px rgba(0, 0, 0, 0.25);
}
span
{
position:absolute;
pointer-events: none;
width:300px;
height: 300px;
background-size: contain;
background-repeat: no-repeat;
animation:animate 4s linear infinite;
}
@keyframes animate
{
0%
{
opacity: 0;
transform: translate(-50%,-50%) scale(0);
}
5%,95%
{
opacity: 1;
transform: translate(-50%,-50%) scale(1);
}
100%
{
opacity: 0;
transform: translate(-50%,-50%) scale(2);
}
}
这里附上三张彩色类似墨点的png图：
相关内容