【第24期】使用html,css和javascript实现彩色墨点动画效果

2023-04-03

html及javascript代码：

<!DOCTYPE html>

<head>

<title>使用html,css和javascript实现彩色墨点动画效果</html></title>

</head>

<body>

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>

<!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>

<!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;

}

{

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

{

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);

}

* { 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); } }

*
{
	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图：

相关内容

上一页：【第23期】仅使用css制作粒子效果的动画背景

下一页：免费无版权的图片，视频，音乐下载地址集合（持续整理中）