gsap实现炫酷未来科技按钮点击弹出数字显示动画效果代码
代码语言:html
所属分类:动画
代码描述:gsap实现炫酷未来科技按钮点击弹出数字显示动画效果代码
代码标签: gsap 炫酷 未来 科技 按钮 点击 弹出 数字 显示 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; } :root { --black: #1b2430; --white: #a5c9ca; --primary: orangered; } body { min-height: 100vh; display: grid; place-items: center; background: var(--black); background-image: url("https://www.transparenttextures.com/patterns/asfalt-dark.png"); filter: drop-shadow(0 0 0.25rem var(--primary)); } .button-container { width: 80px; height: 80px; position: relative; } .button-container button { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; border: none; cursor: pointer; outline: none; } .button-container svg#reticule { opacity: 1; scale: 1; transform-origin: 50% 50%; } .button-container svg#reticule rect { fill: none; stroke: var(--white); stroke-width: 1; } .button-container svg#reticule polyline { position: absolute; top: 0; left: 0; fill: none; stroke: var(--white); stroke-width: 2; } .button-container svg#playIcon polyline { stroke: var(--white); fill: none; stroke-width: 3; stroke-linecap: round; scale: 1; transform-origin: 50% 50%; } .stats { position: absolute; left: 100px; top: 0; width: 80px; height: 80px; display: grid; grid-template-rows: 10px 1fr 10px; } .stats-bar { width: 80px; height: 10px; background-image: repeating-linear-gradient( 45deg, var(--primary) 3px, var(--primary) 6px, transparent 3px, transparent 9px ); background-repeat: repeat-x; background-size: 200% 10px; -webkit-animation: backpos 6s linear infinite; animation: backpos 6s linear infinite; } .stats-percent { display: grid; place-items: center; font-size: 3rem; color: var(--primary); font-family: "Share Tech Mono", monospace; } .stats-blocks { height: 10px; } .stats-blocks line { fill: none; stroke: var(--white); stroke-width: 6; } @-webkit-keyframes backpos { from { background-position: 0% 0%; } to { background-position: 100% 0%; } } @keyframes backpos { from { background-position: 0% 0%; } to { background-position: 100% 0%; } } </style> </head> <body translate="no"> <div class="button-container"> <svg id="reticule" viewBox="0 0 80 80" width="80" height="80"> <rect width="80" height="80" /> <polyline points="0,10 0,0 10,0" /> <polyline points="70,0 80,0 80,10" /> <polyline points="80,70 80,80 70,80" /> <polyline points="10,80 0,80 0,70" /> </svg> <button> <svg id="playIcon" viewBox="0 0 20 30" width="20" height="30"> <polyline points="2,2 18,15 2,28" /> </svg> </button> <div class="stats"> <div class="stats-bar"></div> <div class="stats-percent">0</div> <div class="stats-blocks"> <svg id="blocks" viewBox="0 0 80 10"> <line x1="5" y1="0" x2="10" y2="0" /> <line id="block-2" x1="15" y1="0" x2="60" y2="0" /> <line x1="65" y1=".........完整代码请登录后点击上方下载按钮下载查看
网友评论0