【第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图:

相关内容
最新

坚持的力量

wordpress建站,视频剪辑拍摄,动画制作