文字拆分尺子交互动画效果
代码语言:html
所属分类:动画
代码描述:文字拆分尺子交互动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Heebo:wght@900&display=swap"); :root { --color-bg: #d8e1fe; --duration: .5s; --easing: cubic-bezier(.2, 0, .8, 1); } *, *:before, *:after { box-sizing: border-box; position: relative; } html, body { height: 100%; width: 100%; margin: 0; padding: 0; background-color: var(--color-bg); } body { display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; } #resizer { line-height: 1; font-size: 10vw; font-weight: bold; font-family: 'Heebo', sans-serif; display: -webkit-box; display: flex; -webkit-box-align: end; align-items: flex-end; } #resizer span { display: inline-block; } .i { width: 50vw; height: .8em; top: -.185em; } .i .char { position: absolute; bottom: 0; left: 0; width: 100vw; height: 100%; margin: 0; padding: 0; overflow: hidden; } .i .char-inner { background: #000; position: absolute; bottom: 0; left: 0; width: 100vw; height: .54em; } .i .char-inner > .markings { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } .i .char-inner > .markings:after { -webkit-animation: move 3s ease infinite alternate; animation: move 3s ease infinite alternate; content: ''; position: absolute; top: 0; left: 0; width: 150%; height: 100%; background-image: linear-gradient(to right, #FFF 1px, transparent 1px), linear-gradient(to right, #FFF 1px, transparent 1px); background-size: 100px 60%, 10px 30%; background-repeat: repeat-x; background-position: bottom left; } @-webkit-keyframes move { from { -webkit-transform: none; transform: none; } to { -webkit-transform: translateX(-100px); transform: translateX(-100px); } } @keyframes move { from { -webkit-transform: none; transform: none; } to { -webkit-transform: translateX(-100px); transform: translateX(-100px); } } .i .char-inner::before { content: ''; display: block; position: absolute; bottom: 100%; left: 0; margin-bottom: .1em; background: black; width: 100%; height: 30%; } #resizer[data-state="small"] .i { width: .2em; } .res, .zer, .i, .char, .char-inner { -webkit-transition: -webkit-transform var(--duration) var(--easing); transition: -webkit-transform var(--duration) var(--easing); transition: transform var(--duration) var(--easing); transition: transform var(--duration) var(--easing), -webkit-transform var(--duration) var(--easing); } .res[data-flipping], .zer[data-flipping], .i[data-flipping], .char[data-flipping], .char-inner[data-flipping] { -webkit-transition: none; transition: none; } .res[data-flipping], .zer[data-flipping] { -webkit-transform: translateX(ca.........完整代码请登录后点击上方下载按钮下载查看
网友评论0