js+css实现数字金额滚动动画显示效果代码
代码语言:html
所属分类:动画
代码描述:js+css实现数字金额滚动动画显示效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@900&display=swap" rel="stylesheet"> <style> :root { --dark-rgb: 23 28 28; --darker-rgb: 8 13 7; --green: 9 252 8; --blue: 59 130 246; --pink: 231 60 126; --background-rgb: 12 12 12; --theme-rgb: var(--green); } body { background-color: black; height: 100vh; overflow: hidden; font-family: "Orbitron", sans-serif; } button { font-family: "Orbitron", sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; } #app { height: 100%; width: 100%; position: relative; display: flex; align-items: center; justify-content: center; background: linear-gradient( 60deg, rgb(var(--background-rgb)) 30%, rgb(var(--theme-rgb) / 8%) 50%, rgb(var(--background-rgb)) 70% ); } #shapes { height: calc(100% - 2rem); width: calc(100% - 2rem); position: fixed; left: 0%; top: 0%; z-index: 1; margin: 1rem; border: 0.15rem dashed rgb(var(--theme-rgb) / 30%); pointer-events: none; } #shapes:before, #shapes:after { content: ""; position: absolute; background-color: rgb(255 255 255 / 15%); } #shapes:before { height: 0.2rem; width: 30%; min-width: 10rem; left: 10%; top: 20%; } #shapes:after { width: 0.2rem; height: 20%; min-height: 14rem; right: 25%; bottom: -2rem; } @keyframes float { from, to { translate: 0% 0%; } 50% { translate: 0% 10%; } } #shapes > i { position: absolute; color: white; opacity: 0.1; animation: float 6000ms infinite; color: rgb(var(--theme-rgb)); } #shapes > i.fa-circle { font-size: 3rem; left: 16%; top: 4%; } #shapes > i.fa-triangle { font-size: 8rem; right: 8%; top: 16%; rotate: 4deg; animation-delay: -2000ms; } #shapes > i.fa-square { font-size: 4rem; left: 32%; bottom: 16%; rotate: -2deg; animation-delay: -4000ms; } #prize { width: 88rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; position: relative; z-index: 2; background-color: rgb(var(--darker-rgb)); border: 1.5rem solid rgb(255 255 255 / 2.5%); padding: 10rem 4rem; box-shadow: 0rem 0rem 10rem 4rem rgb(0 0 0 / 75%); backdrop-filter: blur(1rem); } #prize-label, #prize-text { color: rgb(var(--theme-rgb)); text-align: center; } #prize-label { display: flex; align-items: center; justify-content: center; gap: 2rem; font-size: 3rem; opacity: 0.75; } #prize-label > span { display: inline-flex; } #prize-label > .asterisk { padding-top: 0.25em; line-height: 0.5em; } #prize-text { display: flex; gap: 1rem; height: 10rem; line-height: 10rem; font-size: 11rem; } #prize-text > .digit { width: 8rem; position: relative; overflow: hidden; border-bottom: 0.25rem solid rgb(var(--theme-rgb)); } #prize-text > .digit > .digit-track { width: 100%; display: flex; flex-direction: column; align-items: center; position: absolute; left: 0%; top: 0%; translate: 0% 0%; transition: translate 3000ms cubic-bezier(.1,.67,0,1); } .prize-filter { height: 100%; width: 100%; position: absolute; left: 0%; top: 0%; pointer-events: none; } @keyframes pan-lines { from { background-position: 0% 0%; } to { background-position: 0% -100%; } } #prize-lines { background: linear-gradient( rgb(var(--darker-rgb) / 15%) 0%, rgb(var(--darker-rgb) / 75%) 28%, rgb(var(--darker-rgb) / 15%) 56%, rgb(var(--darker-rgb) / 5%) 56%, rgb(var(--darker-rgb) / 5%) 100% ); background-size: 100% 7px; z-index: 2; animation: pan-lines 360s infinite linear; } #prize-shadow { background: radial-gradient( rgb(var(--theme-rgb) / 1%) 20%, rgb(var(--darker-rgb) / 80%) 70% ); z-index: 3; } #actions-wrapper { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 1rem; position: fixed; bottom: 2rem; z-index: 10; } #actions { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem; background-color: rgb(0 0 0 / 50%); border: 1px solid rgb(255 255 255 / 5%); border-radius: 0.5rem; backdrop-filter: blur(1rem); } #actions button { height: 3rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0rem 1.5rem; background-color: rgb(255 255 255 / 5%); border-radius: 0.25rem; border: 1px solid rgb(255 255 255 / 5%); color: white; font-size: 0.8rem; text-transform: uppercase; outline: none; cursor: pointer; } #actions button:is(:hover, :focus-visible) { background-color: rgb(255 255 255 / 7%); } #actions button:focus-visible { border-color: rgb(255 255 255 / 15%); } #redo-button > i { padding-top: 0.2rem; } #theme-actions { display: flex; gap: 0.5rem; } #theme-actions > .theme-button > i { color: white; font-size: 1.25rem; } #theme-actions > .theme-button[data-theme="green"][data-selected="true"] > i { color: rgb(var(--green)); } #theme-actions > .theme-button[data-theme="blue"][data-selected="true"] > i { color: rgb(var(--blue)); } #theme-actions >.........完整代码请登录后点击上方下载按钮下载查看
网友评论0