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图:
坚持的力量
wordpress建站,视频剪辑拍摄,动画制作