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

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

代码语言：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 p.........完整代码请登录后点击上方下载按钮下载查看