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