gsap+ScrambleTextPlugin实现数字倒计时动画效果代码
代码语言:html
所属分类:动画
代码描述:gsap+ScrambleTextPlugin实现数字倒计时动画效果代码
代码标签: gsap ScrambleTextPlugin 数字 倒计时 动画
下面为部分代码预览,完整代码请点击下载或在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"); @font-face { font-family: "CyberSpace"; src: url("//repo.bfw.wiki/bfwrepo/font/cyberspace.woff"), url("//repo.bfw.wiki/bfwrepo/font/cyberspace.woff2"); } * { margin: 0; padding: 0; box-sizing: border-box; } :root { --black: #0e0c0c; --white: #b3b3b3; --red: #e22c0b; } body { min-height: 100vh; display: grid; place-items: center; background-color: var(--black); background-image: url("//repo.bfw.wiki/bfwrepo/icon/6417c0804907d.png"); } .container { width: 300px; display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(10px, min-height); row-gap: 1em; } .blocks { width: 300px; height: 10px; position: relative; } .block { position: absolute; width: 10px; height: 10px; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; background-color: var(--white); } .block:nth-child(1) { left: 0; } .block:nth-child(2) { right: 0; } .stripes { width: 300px; height: 60px; } .count { width: 300px; height: 170px; display: grid; justify-items: center; align-items: flex-end; /* border: 1px solid silver; */ } .count h1 { --size: 9rem; font-size: var(--size); color: var(--white); font-family: "CyberSpace"; line-height: var(--size); text-align: center; letter-spacing: 10px; text-indent: 20px; } .button { width: 300px; height: 60px; display: grid; place-items: center; /* border: 1px solid silver; */ } .button button { padding: 5px 10px; font-family: "Share Tech Mono"; text-transform: uppercase; background: transparent; color: var(--white); font-size: 2rem; border: none; color: var(--white); pointer-events: fill; cursor: pointer; } .scrambling { color: var(--red); } button:has(.scrambling) { pointer-events: none; user-select: none; } </style> </head> <body> <div class="container"> <div class="blocks"> <div class="block" id="blk-1"></div> <div class="block" id="blk-2"></div> </div> <div class="stripes" id="stripes"> <svg id='patternId' width='100%' height='60px' xmlns='http://www.w3.org/2000/svg'> <defs> <pattern id='striped' patternUnits='userSpaceOnUse' width='15' height='15' x="0" y="0" patternTransform='scale(1) rotate(130)'> <rect x='0' y='0' width='200%' height='75%' fill='#222121' /> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0