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

代码语言:html

所属分类:动画

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

代码标签: 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%);
        }
    </styl.........完整代码请登录后点击上方下载按钮下载查看

网友评论0