gsap实现点击抖动弹出子图标动画效果代码-html代码-BFW代码库

gsap实现点击抖动弹出子图标动画效果代码

代码语言：html

所属分类：动画

代码描述：gsap实现点击抖动弹出子图标动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        @import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
        
        * {
        	margin: 0;
        	padding: 0;
        	box-sizing: border-box;
        }
        
        :root {
        	--bkg: #d1d9df;
        	--black: #090909;
        	--red: #fc0502;
        	--grey: #ada3a5;
        	--pad-1: 0.3em;
        }
        
        body {
        	min-height: 100vh;
        	font-family: "Open Sans", sans-serif;
        	color: var(--black);
        	background-color: var(--bkg);
        	background-image: url("//repo.bfw.wiki/bfwrepo/icon/62804aa45d587.png");
        	position: relative;
        }
        
        .button-container {
        	position: absolute;
        	top: 50%;
        	left: 50%;
        	z-index: 2;
        	transform: translate(-50%, -50%);
        	width: 200px;
        	height: 200px;
        	background-color: var(--bkg);
        	cursor: pointer;
        }
        .button-container h1 {
        	width: 50%;
        	position: absolute;
        	z-index: 10;
        	font-size: 2.2rem;
        	line-height: 2.7rem;
        	user-select: none;
        	pointer-events: none;
        	-webkit-font-smoothing: subpixel-antialiased;
        	will-change: transform;
        }
        .button-container svg {
        	position: absolute;
        	z-index: 11;
        	width: 30px;
        	height: 30px;
        	stroke: var(--red);
        	stroke-width: 2;
        	fill: none;
        	pointer-events: none;
        }
        
        .square-bkg {
        	position: absolute;
        	top: 0;
        	left: 0;
        	z-index: 9;
        	width: 100%;
        	height: 100%;
        	border-bottom: 5px solid var(--red);
        	background-color: var(--bkg);
        }
        
        .square-shadow {
        	position: absolute;
        	z-index: 8;
        	width: 150px;
        	height: 150px;
        	background-color: rgb(105, 105, 105);
        	filter: blur(20px);
        	opacity: 0.5;
        	pointer-events: none;
        }
        
        .icons-container {
        	position: absolute;
        	top: 50%;
        	left: 50%;
        	z-index: 1;
        	transform: translate(-50%, -50%);
        	width: 200px;
        	height: 200px;
        	pointer-events: none;
        }
        .icn {
        	position: absolute;
        	top: 50%;
        	left: 50%;
        	transform: translate(-50%, -50%);
        	width: 80px;
        	height: 80px;
        	padding: 0.7em;
        	background-color: var(--black);
        	pointer-events: none;
        	border-radius: 5px;
        }
        .icn img {
        	width: 100%;
        	height: 100%;
        }
    </style>



</head>

<body>
    <div class="button-container" id="btn">
        <div class="square-bkg" id="btn-bkg"></div>
        <div class="square-shadow" id="btn-shadow"></div>
        <h1 id="btn-text">UI/UX Tools</h1>
        <svg id="btn-icon" viewBox="0 0 24 24">
		<path d="M5 12h14M12 5l7 7-7 7" />
	</svg>
    </div>
    <div class="icons-container">
        <div class="icn" id="xd">
            <img src="//repo.bfw.wiki/bfwrepo/icon/62804af48c63a.png" alt="icon">
        </div>
        <div class="icn" id="figma">
            <img src="//repo.bfw.wiki/bfwrepo/icon/62804ae96daf2.png" alt="icon">
        </div>
        <div class="icn" id="photoshop">
            <img src="//repo.bfw.wiki/bfwrepo/icon/62804adf81be5.png" alt="icon">
        </div>
        <div class="icn" id="sketch">
            <img src="//repo.bfw.wiki/bfwrepo/icon/62804ad354f90.png" alt="icon">
        </div>
        <div class="icn" id="illustrator">
            <img src="//repo.bfw.wiki/bfwrepo/icon/62804ac68ca71.png" alt="icon">
        </div>
        <div class="icn" id="invision">
            <img src="//repo.bfw.wiki/bfwrepo/icon/62804ab34486a.png" alt="icon">
        </div>
    </div>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.10.1.js.........完整代码请登录后点击上方下载按钮下载查看