css+js实现按钮点击碎纸屑喷射动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css+js实现按钮点击碎纸屑喷射动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        body{
        	background:#f2f2f4;
        }
        button{
        	font-family:'Roboto', sans-serif;
        	transform:translate(0%,-50%);
        	font-size:1.2em;
        	padding:20px;
        	background:#4285f4;
        	color:#fff;
        	border:none;
        	border-radius:6px;
        	cursor:pointer;
        	margin-top:20px;
        	min-width:200px;
        	display:inline-block;
        }
        button:active{
        	transform: translate(0%, -50%) scale(1.01);
        }
        .code{
        	top:20%;
        	left:50%;
        }
        .flower{
        	top:30%;
        	left:50%;
        }
        .xo{
        	top:40%;
        	left:50%;
        }
        .btns{
        	position: absolute;
        	top:0%;
        	left:50%;
        	transform:translate(-50%);
        	margin-top:100px;
        /* 	border:2px solid red; */
        }
        .overThere{
        	width:!important 100px;
        	min-width: 100px;
        }
        .overThere2{
        	height:20px;
        	width:20px;
        	background:red;
        	display:inline-block;
        	border-radius:50%;
        	transform:translate(100%, -150%);
        }
    </style>


</head>

<body>
    <div class="btns">
        <button class="default">DEFAULT</button>
        <br/>
        <button class="code">👨‍💻 CODE 👨‍💻</button>
        <br/>
        <button class="flower">🌼 FLOWER 🌼</button>
        <br/>
        <button class="square">⬜ SQUARE ⬜</button>
        <br/>
        <button class="xo">❌ Xs and Os ❌</button>
        <br/>
        <button class="music">🎶 MUSIC 🎵</button>
        <br/>
        <button class="overThere">Over there ➡️</button>
        <span class="overThere2"></span>
    </div>


    <script>
       function confetti(el, params) {
	if (!el){
		console.error('Must have element to populate the confetti!');
		return;
	}
	const defaultProperties = {
		colors: 'random', 
		delay: 100,
		drop: window.innerHeight,
		fadeout: true,
		flakes: 100,
		speed: 6000,
		spin: true,
		spread: 400,
		type: 'default'
	};
	
	// properties passed in from user onto the defaults
	const c = Object.assign(defaultProperties, params);

	const randInt = (min, max) => {
		return Math.floor(Math.random() * (max - min + 1)) + min;
	};
	
	let hh = c.drop;	
	let ww = c.spread;

	let animatedConfetti = ``;
	// make sure number of flakes is a number
	if (!c.flakes || Number.isNaN(c.flakes * 1)) {
		c.flakes = 100;
	}
	for (let i = 0; i < c.flakes; i++) {
		let conId = `con${randInt(0, 1000)}fet${randInt(0, 1000)}ti${randInt(0, 1000)}`;
		let confettiDur = `${randInt(c.speed / 2, c.speed)}`;
		let confettiSpin = ``;
		let confettiType = ``;
		if (c.spin) {
			confettiSpin = `<animateTransform attributeName="transform"
                          attributeType="XML"
                          type="rotate"
                          from="0 0 0"
                          to="${(Math.random() < 0.5 ? -1 : 1) * 360} 0 0"
                          dur="${randInt(c.speed/6, c.speed/2)}ms"
													begin="-${randInt(1, 10) / 10}s"
                          repeatCount="indefinite"/>`;
		}
		// are we using an array of colors or random ones?
		let confettiColor = ``;
		if (c.colors == 'random' || !Array.isArray(c.colors)) {
			confettiColor = `rgb(${randInt(0, 255)}, ${randInt(0, 255)}, ${randInt(0, 255)})`;
		} else {
			confettiColor = c.colors[randInt(0, c.colors.length-1)];
		}
		
		// what type of confetti is it?
		switch (c.type) {
			case 'XO':
			case 'xo':
				if (randInt(0, 1) == 1) {
				// O shape
				confettiType = `<circle id="${conId}" stroke="${confettiColor}" stroke-width="${randInt(1,	3)}" fill="none" cx="0" cy="0" r="${randInt(4, 7)}" filter="url(#blur${randInt(1, 2)})">
		${confettiSpin}
		</circle>`;
			} else {
				// X shape
				confettiType = `<path id="${conId}" fill="${confettiColor}" d="M -5 1 H -1 V 5 A 1 1 0 0 0 1 5 V 1 H 5 A 1 1 0 0 0 5 -1 H 1 V -5 A 1 1 0 0 0 -1 -5 V -1 H -5 A 1 1 0 0 0 -5 1"  filter="url(#blur${randInt(1, 2)})">
		${confettiSpin}
		</path>`;
			}
				break;
			case 'code':
				if (randInt(0, 1) == 1) {
				// 1s
				confettiType = `<text id="${conId}" fill="${confettiColor}" stroke-width="${randInt(1,	3)}" fill="none" cx="0" cy="0" r="${randInt(4, 7)}" filter="url(#blur${randInt(1, 2)})">1
		${confettiSpin}
		</text>`;
			} else {
				// 0s
				confettiType = `<text id="${conId}" fill="${confettiColor}" stroke-width="${randInt(1,	3)}" fill="none" cx="0" cy="0" r="${randInt(4, 7)}" filter="url(#blur${randInt(1, 2)})">0
		${confettiSpin}
		</text>`;
			}
				break;
			case 'circle':
				confettiType = `<circle id="${conId}" fill="${confettiColor}" cx="0" cy="0" r="${randInt(4, 7)}" filter="url(#blur${randInt(1, 2)})">
		${confettiSpin}
		</circle>`;
				break;
			case 'flower':
				confettiType = `<g filter="url(#blur${randInt(1, 2)})" id="${conId}">
				<path fill="${confettiColor}" d="M -2 -2 C -4 -10 4 -10 2 -2 L 2 2 C 4 10 -4 10 -2 2 L -2 -2 M 0 -2.828 C 4.242 -9.9 9.9 -4.242 2.828 0 L 0 2.828 C -4.242 9.9 -9.9 4.242 -2.828 0 L 0 -2.828 M -2.828 0 C -9.9 -4.242 -4.242 -9.9 0 -2.828 L 2.828 0 C 9.9 4.242 4.242 9.9 0 2.828 L -2.828 0 M 2 -2 C 10 -4 10 4 2 2 L -2 2 C -10 4 -10 -4 -2 -2 L 2 -2" filter="drop-shadow(rgba(0, 0, 0, ${randInt(0,10)/10}) 0px 0px ${randInt(0,10)/10}px)" />
			<path fill="rgb(${randInt(0,255)}, ${randInt(0,255)}, ${randInt(0,255)})" d="M 0 -2 C -4 -10 4 -10 0 -2 L 0 2 C 4 10 -4 10 0 2 L 0 0 M 2 -2 C 4.242 -9.9 9.9 -4.242 2 -2 L -2 2 C -4.242 9.9 -9.9 4.242 -2 2 M -2 -2 C -9.9 -4.242 -4.242 -9.9 -2 -2 L 2 2 C 9.9 4.242 4.242 9.9 2 2 L 0 0 M 2 0 C 10 -4 10 4 2 0 L -2 0 C -10 4 -10 -4 -2 0 L 2 0" />
			<circle fill="rgb(${randInt(0,255)}, ${randInt(0,255)},.........完整代码请登录后点击上方下载按钮下载查看