js+css实现文字立体空间伸缩滚动放大缩小动画效果代码
代码语言:html
所属分类:动画
代码描述:js+css实现文字立体空间伸缩滚动放大缩小动画效果代码
代码标签: js css 文字 立体 空间 伸缩 滚动 放大 缩小 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @font-face { font-family: "BreakingBad"; src: url("https://cdn.jsdelivr.net/gh/olivier3lanc/cinematics-resources/breaking_bad_intro/heartBB.woff2") format("woff2"); font-style: normal; font-display: swap; font-weight: 400 } @font-face { font-family: "SFPro-Regular"; src: url("https://cdn.jsdelivr.net/gh/olivier3lanc/cinematics-resources/breaking_bad_intro/SFProDisplay-Regular.woff2") format("woff2"); font-style: normal; font-display: swap; font-weight: 400 } @font-face { font-family: "SFPro-Bold"; src: url("https://cdn.jsdelivr.net/gh/olivier3lanc/cinematics-resources/breaking_bad_intro/SFProDisplay-Bold.woff2") format("woff2"); font-style: normal; font-display: swap; font-weight: 700 } @font-face { font-family: "AtticAntique"; src: url("https://cdn.jsdelivr.net/gh/olivier3lanc/cinematics-resources/breaking_bad_intro/AtticAntique.woff2") format("woff2"); font-style: normal; font-display: swap; font-weight: 400 } .ff-heart { font-weight: 400; } .ff-400 { font-weight: 400; } .ff-700 { font-weight: 700; } .ff-formulae { font-weight: 400; } /* Generated by BRiCSS A simple and customizable low-level CSS library generator https://ita-design-system.github.io/bricss/ */ :root { /* BRiCSS CSS variables start with --bricss- */ --bricss-colors-neutral-100: white; --bricss-colors-neutral-200: black; --bricss-colors-primary-100: #284b24; --bricss-colors-primary-200: #064117; --bricss-colors-primary-300: #011905; --bricss-colors-secondary-100: #4ea281; --bricss-colors-secondary-200: #37714F; --bricss-colors-secondary-300: #1f401d; --bricss-fontFamilies-400: SFPro-Regular; --bricss-fontFamilies-700: SFPro-Bold; --bricss-fontFamilies-heart: BreakingBad, sans-serif; --bricss-fontFamilies-formulae: AtticAntique; --bricss-fontFamilies-mono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace; --bricss-fontSizes-1: 10px; --bricss-fontSizes-2: 12px; --bricss-fontSizes-3: 14px; --bricss-fontSizes-4: 16px; --bricss-fontSizes-5: 24px; --bricss-fontSizes-6: 36px; --bricss-fontSizes-7: 58px; --bricss-fontSizes-8: 84px; --bricss-fontSizes-9: 98px; --bricss-fontSizes-10: 130px; --bricss-spacings-1: 4px; --bricss-spacings-2: 8px; --bricss-spacings-3: 12px; --bricss-spacings-4: 16px; --bricss-spacings-5: 24px; --bricss-spacings-6: 32px; --bricss-spacings-7: 48px; --bricss-spacings-8: 64px; --bricss-spacings-9: 96px; } .d-flex { display: flex; } .u-d-flex { display: flex !important; } .d-inline-flex { display: inline-flex; } .u-d-inline-flex { display: inline-flex !important; } .d-none { display: none; } .u-d-none { display: none !important; } .ai-baseline { align-items: baseline; } .ai-center { align-items: center; } .ai-start { align-items: flex-start; } .ai-end { align-items: flex-end; } .jc-center { justify-content: center; } .jc-space-between { justify-content: space-between; } .jc-space-around { justify-content: space-around; } .jc-start { justify-content: flex-start; } .jc-end { justify-content: flex-end; } .fd-column { flex-direction: column; } .fw-wrap { flex-wrap: wrap; } .order--1 { order: -1; } .pos-relative { position: relative; } .pos-absolute { position: absolute; } .pos-fixed { position: fixed; } .pos-sticky { position: sticky; } .top-0 { top: 0%; } .top-50 { top: 50%; } .top-100 { top: 100%; } .top-42px { top: 42px; } .right-0 { right: 0%; } .right-50 { right: 50%; } .right-100 { right: 100%; } .bottom-0 { bottom: 0%; } .bottom-50 { bottom: 50%; } .bottom-100 { bottom: 100%; } .left-0 { left: 0%; } .left-50 { left: 50%; } .left-100 { left: 100%; } .z-1 { z-index: 1; } .z-2 { z-index: 2; } .z-3 { z-index: 3; } .z-4 { z-index: 4; } .z-5 { z-index: 5; } .z-6 { z-index: 6; } .z-7 { z-index: 7; } .z-8 { z-index: 8; } .z-9 { z-index: 9; } .t-tX-50 { --dsg-tX: -50%; } .t-tX50 { --dsg-tX: 50%; } .t-tX-100 { --dsg-tX: -100%; } .t-tX100 { --dsg-tX: 100%; } .t-tY-50 { --dsg-tY: -50%; } .t-tY50 { --dsg-tY: 50%; } .t-tY-100 { --dsg-tY: -100%; } .t-tY100 { --dsg-tY: 100%; } .t-tX-50 { transform: translateX(var(--dsg-tX, 0)) translateY(var(--dsg-tY, 0)); } .t-tX50 { transform: translateX(var(--dsg-tX, 0)) translateY(var(--dsg-tY, 0)); } .t-tX-100 { transform: translateX(var(--dsg-tX, 0)) translateY(var(--dsg-tY, 0)); } .t-tX100 { transform: translateX(var(--dsg-tX, 0)) translateY(var(--dsg-tY, 0)); } .t-tY-50 { transform: translateX(var(--dsg-tX, 0)) translateY(var(--dsg-tY, 0)); } .t-tY50 { transform: translateX(var(--dsg-tX, 0)) translateY(var(--dsg-tY, 0)); } .t-tY-100 { transform: translateX(var(--dsg-tX, 0)) translateY(var(--dsg-tY, 0)); } .t-tY100 { transform: translateX(var(--dsg-tX, 0)) translateY(var(--dsg-tY, 0)); } .gap-1 { gap: var(--bricss-spacings-1, 4px); } .gap-2 { gap: var(--bricss-spacings-2, 8px); } .gap-3 { gap: var(--bricss-spacings-3, 12px); } .gap-4 { gap: var(--bricss-spacings-4, 16px); } .gap-5 { gap: var(--bricss-spacings-5, 24px); } .gap-6 { gap: var(--bricss-spacings-6, 32px); } .gap-7 { gap: var(--bricss-spacings-7, 48px); } .gap-8 { gap: var(--bricss-spacings-8, 64px); } .gap-9 { gap: var(--bricss-spacings-9, 96px); } .gap-1 { --dsg-gap: var(--bricss-spacings-1, 4px); } .gap-2 { --dsg-gap: var(--bricss-spacings-2, 8px); } .gap-3 { --dsg-gap: var(--bricss-spacings-3, 12px); } .gap-4 { --dsg-gap: var(--bricss-spacings-4, 16px); } .gap-5 { --dsg-gap: var(--bricss-spacings-5, 24px); } .gap-6 { --dsg-gap: var(--bricss-spacings-6, 32px); } .gap-7 { --dsg-gap: var(--bricss-spacings-7, 48px); } .gap-8 { --dsg-gap: var(--bricss-spacings-8, 64px); } .gap-9 { --dsg-gap: var(--bricss-spacings-9, 96px); } .fg-1 { flex-grow: 1; } .w-100 { width: 100%; } .w-auto { width: auto; } .h-100 { height: 100%; } .h-auto { height: auto; } .h-100vh { height: 100vh; } .maxw-2ch { max-width: 2ch; } .maxh-100 { max-height: 100%; } .maxh-100vh { max-height: 100vh; } .maxh-80vh { max-height: 80vh; } .maxh-50vh { max-height: 50vh; } .minh-100vh { min-height: 100vh; } .ar-1 { aspect-ratio: 1; } .o-auto { overflow: auto; } .o-hidden { overflow: hidden; } .p-0 { padding: 0px; } .p-1 { padding: var(--bricss-spacings-1, 4px); } .p-2 { padding: var(--bricss-spacings-2, 8px); } .p-3 { padding: var(--bricss-spacings-3, 12px); } .p-4 { padding: var(--bricss-spacings-4, 16px); } .p-5 { padding: var(--bricss-spacings-5, 24px); } .p-6 { padding: var(--bricss-spacings-6, 32px); } .p-7 { padding: var(--bricss-spacings-7, 48px); } .p-8 { padding: var(--bricss-spacings-8, 64px); } .p-9 { padding: var(--bricss-spacings-9, 96px); } .pt-0 { padding-top: 0px; } .pt-1 { padding-top: var(--bricss-spacings-1, 4px); } .pt-2 { padding-top: var(--bricss-spacings-2, 8px); } .pt-3 { padding-top: var(--bricss-spacings-3, 12px); } .pt-4 { padding-top: var(--bricss-spacings-4, 16px); } .pt-5 { padding-top: var(--bricss-spacings-5, 24px); } .pt-6 { padding-top: var(--bricss-spacings-6, 32px); } .pt-7 { padding-top: var(--bricss-spacings-7, 48px); } .pt-8 { padding-top: var(--bricss-spacings-8, 64px); } .pt-9 { padding-top: var(--bricss-spacings-9, 96px); } .pr-0 { padding-right: 0px; } .pr-1 { padding-right: var(--bricss-spacings-1, 4px); } .pr-2 { padding-right: var(--bricss-spacings-2, 8px); } .pr-3 { padding-right: var(--bricss-spacings-3, 12px); } .pr-4 { padding-right: var(--bricss-spacings-4, 16px); } .pr-5 { padding-right: var(--bricss-spacings-5, 24px); } .pr-6 { padding-right: var(--bricss-spacings-6, 32px); } .pr-7 { padding-right: var(--bricss-spacings-7, 48px); } .pr-8 { padding-right: var(--bricss-spacings-8, 64px); } .pr-9 { padding-right: var(--bricss-spacings-9, 96px); } .pb-0 { padding-bottom: 0px; } .pb-1 { padding-bottom: var(--bricss-spacings-1, 4px); } .pb-2 { padding-bottom: var(--bricss-spacings-2, 8px); } .pb-3 { padding-bottom: var(--bricss-spacings-3, 12px); } .pb-4 { padding-bottom: var(--bricss-spacings-4, 16px); } .pb-5 { padding-bottom: var(--bricss-spacings-5, 24px); } .pb-6 { padding-bottom: var(--bricss-spacings-6, 32px); } .pb-7 { padding-bottom: var(--bricss-spacings-7, 48px); } .pb-8 { padding-bottom: var(--bricss-spacings-8, 64px); } .pb-9 { padding-bottom: var(--bricss-spacings-9, 96px); } .pl-0 { padding-left: 0px; } .pl-1 { padding-left: var(--bricss-spacings-1, 4px); } .pl-2 { padding-left: var(--bricss-spacings-2, 8px); } .pl-3 { padding-left: var(--bricss-spacings-3, 12px); } .pl-4 { padding-left: var(--bricss-spacings-4, 16px); } .pl-5 { padding-left: var(--bricss-spacings-5, 24px); } .pl-6 { padding-left: var(--bricss-spacings-6, 32px); } .pl-7 { padding-left: var(--bricss-spacings-7, 48px); } .pl-8 { padding-left: var(--bricss-spacings-8, 64px); } .pl-9 { padding-left: var(--bricss-spacings-9, 96px); } .m-0 { margin: 0px; } .m-auto { margin: auto; } .m-1 { margin: var(--bricss-spacings-1, 4px); } .m-2 { margin: var(--bricss-spacings-2, 8px); } .m-3 { margin: var(--bricss-spacings-3, 12px); } .m-4 { margin: var(--bricss-spacings-4, 16px); } .m-5 { margin: var(--bricss-spacings-5, 24px); } .m-6 { margin: var(--bricss-spacings-6, 32px); } .m-7 { margin: var(--bricss-spacings-7, 48px); } .m-8 { margin: var(--bricss-spacings-8, 64px); } .m-9 { margin: var(--bricss-spacings-9, 96px); } .mt-0 { margin-top: 0px; } .mt-offset-1 { margin-top: -0.06em; } .mt-offset-2 { margin-top: 0.06em; } .mt-2px { margin-top: 2px; } .mt-1 { margin-top: var(--bricss-spacings-1, 4px); } .mt-2 { margin-top: var(--bricss-spacings-2, 8px); } .mt-3 { margin-top: var(--bricss-spacings-3, 12px); } .mt-4 { margin-top: var(--bricss-spacings-4, 16px); } .mt-5 { margin-top: var(--bricss-spacings-5, 24px); } .mt-6 { margin-top: var(--bricss-spacings-6, 32px); } .mt-7 { margin-top: var(--bricss-spacings-7, 48px); } .mt-8 { margin-top: var(--bricss-spacings-8, 64px); } .mt-9 { margin-top: var(--bricss-spacings-9, 96px); } .mr-0 { margin-right: 0px; } .mr-auto { margin-right: auto; } .mr-1 { margin-right: var(--bricss-spacings-1, 4px); } .mr-2 { margin-right: var(--bricss-spacings-2, 8px); } .mr-3 { margin-right: var(--bricss-spacings-3, 12px); } .mr-4 { margin-right: var(--bricss-spacings-4, 16px); } .mr-5 { margin-right: var(--bricss-spacings-5, 24px); } .mr-6 { margin-right: var(--bricss-spacings-6, 32px); } .mr-7 { margin-right: var(--bricss-spacings-7, 48px); } .mr-8 { margin-right: var(--bricss-spacings-8, 64px); } .mr-9 { margin-right: var(--bricss-spacings-9, 96px); } .mb-0 { margin-bottom: 0px; } .mb-1 { margin-bottom: var(--bricss-spacings-1, 4px); } .mb-2 { margin-bottom: var(--bricss-spacings-2, 8px); } .mb-3 { margin-bottom: var(--bricss-spacings-3, 12px); } .mb-4 { margin-bottom: var(--bricss-spacings-4, 16px); } .mb-5 { margin-bottom: var(--bricss-spacings-5, 24px); } .mb-6 { margin-bottom: var(--bricss-spacings-6, 32px); } .mb-7 { margin-bottom: var(--bricss-spacings-7, 48px); } .mb-8 { margin-bottom: var(--bricss-spacings-8, 64px); } .mb-9 { margin-bottom: var(--bricss-spacings-9, 96px); } .ml-0 { margin-left: 0px; } .ml-auto { margin-left: auto; } .ml-special-1 { margin-left: calc(2 * var(--bricss-spacings-8) + 2px); } .ml-special-2 { margin-left: calc(2 * var(--bricss-spacings-7) + 2px); } .ml-1 { margin-left: var(--bricss-spacings-1, 4px); } .ml-2 { margin-left: var(--bricss-spacings-2, 8px); } .ml-3 { margin-left: var(--bricss-spacings-3, 12px); } .ml-4 { margin-left: var(--bricss-spacings-4, 16px); } .ml-5 { margin-left: var(--bricss-spacings-5, 24px); } .ml-6 { margin-left: var(--bricss-spacings-6, 32px); } .ml-7 { margin-left: var(--bricss-spacings-7, 48px); } .ml-8 { margin-left: var(--bricss-spacings-8, 64px); } .ml-9 { margin-left: var(--bricss-spacings-9, 96px); } .ff-400 { font-family: var(--bricss-fontFamilies-400, SFPro-Regular); } .ff-700 { font-family: var(--bricss-fontFamilies-700, SFPro-Bold); } .ff-heart { font-family: var(--bricss-fontFamilies-heart, BreakingBad, sans-serif); } .ff-formulae { font-family: var(--bricss-fontFamilies-formulae, AtticAntique); } .ff-mono { font-family: var(--bricss-fontFamilies-mono, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace); } .fs-1 { font-size: var(--bricss-fontSizes-1, 10px); } .fs-2 { font-size: var(--bricss-fontSizes-2, 12px); } .fs-3 { font-size: var(--bricss-fontSizes-3, 14px); } .fs-4 { font-size: var(--bricss-fontSizes-4, 16px); } .fs-5 { font-size: var(--bricss-fontSizes-5, 24px); } .fs-6 { font-size: var(--bricss-fontSizes-6, 36px); } .fs-7 { font-size: var(--bricss-fontSizes-7, 58px); } .fs-8 { font-size: var(--bricss-fontSizes-8, 84px); } .fs-9 { font-size: var(--bricss-fontSizes-9, 98px); } .fs-10 { font-size: var(--bricss-fontSizes-10, 130px); } .ta-left { text-align: left; } .ta-center { text-align: center; } .ta-right { text-align: right; } .td-none { text-decoration: none; } .td-underline { text-decoration: underline; } .td-line-through { text-decoration: line-through; } .fstyle-normal { font-style: normal; } .fstyle-italic { font-style: italic; } .ws-nowrap { white-space: nowrap; } .to-ellipsis { text-overflow: ellipsis; } .lh-0 { line-height: 0em; } .lh-1 { line-height: 1em; } .lh-2 { line-height: 1.1em; } .lh-3 { line-height: 1.2em; } .lh-4 { line-height: 1.3em; } .lh-5 { line-height: 1.4em; } .lh-6 { line-height: 1.5em; } .lh-7 { line-height: 1.6em; } .lh-8 { line-height: 1.7em; } .lh-9 { line-height: 1.8em; } .lh-special-1 { line-height: 0.8em; } .va-top { vertical-align: top; } .va-middle { vertical-align: middle; } .va-bottom { vertical-align: bottom; } .va-super { vertical-align: super; } .va-sub { vertical-align: sub; } .wb-break-word { word-break: break-word; } .wb-break-all { word-break: break-all; } .tt-uppercase { text-transform: uppercase; } .tt-lowercase { text-transform: lowercase; } .bg-1 { background: linear-gradient(135deg, var(--bricss-colors-secondary-100), var(--bricss-colors-secondary-300)); } .bg-2 { background: radial-gradient(ellipse at center, hsl(114deg 35% 22%) 0%, hsl(117deg 37% 21%) 8%, hsl(121deg 40% 20%) 14%, hsl(124deg 46% 19%) 20%, hsl(128deg 54% 17%) 26%, hsl(132deg 65% 16%) 33%, hsl(137deg 83% 14%) 39%, hsl(137deg 80% 13%) 47%, hsl(137deg 77% 11%) 55%, hsl(137deg 73% 10%) 64%, hsl(134deg 68% 9%) 74%, hsl(131deg 69% 7%) 86%, hsl(130deg 92% 5%) 100%); } .bg-3 { background: radial-gradient(ellipse at center, transparent, black); } .bg-4 { background: center / cover no-repeat url('https://cdn.jsdelivr.net/gh/olivier3lanc/cinematics-resources/breaking_bad_intro/cloud.avif'); } .bc-0 { background-color: transparent; } .bc-neutral-100 { background-color: var(--bricss-colors-neutral-100, white); } .bc-neutral-200 { background-color: var(--bricss-colors-neutral-200, black); } .bc-primary-100 { background-color: var(--bricss-colors-primary-100, #284b24); } .bc-primary-200 { background-color: var(--bricss-colors-primary-200, #064117); } .bc-primary-300 { background-color: var(--bricss-colors-primary-300, #011905); } .bc-secondary-100 { background-color: var(--bricss-colors-secondary-100, #4ea281); } .bc-secondary-200 { background-color: var(--bricss-colors-secondary-200, #37714F); } .bc-secondary-300 { background-color: var(--bricss-colors-secondary-300, #1f401d); } .c-0 { color: transparent; } .c-neutral-100 { color: var(--bricss-colors-neutral-100, white); } .c-neutral-200 { color: var(--bricss-colors-neutral-200, black); } .c-primary-100 { color: var(--bricss-colors-primary-100, #284b24); } .c-primary-200 { color: var(--bricss-colors-primary-200, #064117); } .c-primary-300 { color: var(--bricss-colors-primary-300, #011905); } .c-secondary-100 { color: var(--bricss-colors-secondary-100, #4ea281); } .c-secondary-200 { color: var(--bricss-colors-secondary-200, #37714F); } .c-secondary-300 { color: var(--bricss-colors-secondary-300, #1f401d); } .mbm-multiply { mix-blend-mode: multiply; } .mbm-overlay { mix-blend-mode: overlay; } .b-0 { border: none; } .bt-0 { border-top: none; } .br-0 { border-right: none; } .bb-0 { border-bottom: none; } .bl-0 { border-left: none; } .bwidth-1 { border-width: 1px; } .bwidth-2 { border-width: 2px; } .bwidth-3 { border-width: 3px; } .btwidth-0 { border-top-width: 0px; } .btwidth-1 { border-top-width: 1px; } .btwidth-2 { border-top-width: 2px; } .btwidth-3 { border-top-width: 3px; } .brwidth-0 { border-right-width: 0px; } .brwidth-1 { border-right-width: 1px; } .brwidth-2 { border-right-width: 2px; } .brwidth-3 { border-right-width: 3px; } .bbwidth-0 { border-bottom-width: 0px; } .bbwidth-1 { border-bottom-width: 1px; } .bbwidth-2 { border-bottom-width: 2px; } .bbwidth-3 { border-bottom-width: 3px; } .blwidth-0 { border-left-width: 0px; } .blwidth-1 { border-left-width: 1px; } .blwidth-2 { border-left-width: 2px; } .blwidth-3 { border-left-width: 3px; } .bstyle-solid { border-style: solid; } .bstyle-dashed { border-style: dashed; } .bstyle-none { border-style: none; } .btstyle-solid { border-top-style: solid; } .btstyle-dashed { border-top-style: dashed; } .btstyle-none { border-top-style: none; } .brstyle-solid { border-right-style: solid; } .brstyle-dashed { border-right-style: dashed; } .brstyle-none { border-right-style: none; } .bbstyle-solid { border-bottom-style: solid; } .bbstyle-dashed { border-bottom-style: dashed; } .bbstyle-none { border-bottom-style: none; } .blstyle-solid { border-left-style: solid; } .blstyle-dashed { border-left-style: dashed; } .blstyle-none { border-left-style: none; } .bcolor-neutral-100 { border-color: var(--bricss-colors-neutral-100, white); } .bcolor-neutral-200 { border-color: var(--bricss-colors-neutral-200, black); } .bcolor-primary-100 { border-color: var(--bricss-colors-primary-100, #284b24); } .bcolor-primary-200 { border-color: var(--bricss-colors-primary-200, #064117); } .bcolor-primary-300 { border-color: var(--bri.........完整代码请登录后点击上方下载按钮下载查看
网友评论0