js+css实现多个单词反向显示切换动画效果代码
代码语言:html
所属分类:动画
代码描述:js+css实现多个单词反向显示切换动画效果代码
代码标签: js css 多个 单词 反向 显示 切换 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> /* Add your CSS here */ .wrapper { --anadrome-rotate: 0turn; --anadrome-letter-rotate: 0turn; --anadrome-duration: 1000ms; --anadrome-easing: cubic-bezier(0.34, 1.56, 0.64, 1); --anadrome-letter-size: 30px; --anadrome-font-size: 1rem; --anadrome-letter-gap: 1.5rem; --anadrome-pivot-size: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4rem; } pre { /*display: none;*/ max-width: 42ch; text-align: left; white-space: pre-wrap; font-size: clamp(0.8rem, 2.5vw - .25rem, .9rem); font-family: "Courier New", Courier, monospace; } h1 { margin: 0; padding: 0; text-align: left; font-size: clamp(1.2rem, 2.5vw - .05rem, 1.4rem); } .controls { --controls-bg: #000; --controls-txt: #FFF; display: flex; align-items: center; justify-content: center; gap: 1rem; } .wrapper:has(#btn-rotate:checked) { --anadrome-rotate: 180deg; --anadrome-letter-rotate: -180deg; --checked-scale: -1 1; --checked-bg: hotpink; } .controls > * { position: relative; width: 50px; height: 50px; aspect-ratio: 1; display: grid; place-content: center; padding: 1rem; font-size: 1rem; background-color: var(--controls-bg); color: var(--controls-txt); border: none; outline: none; border-radius: 4px; cursor: pointer; transition: background-color 300ms ease; } .controls > *::before { content: attr(data-title); position: absolute; top: 100%; left: 50%; transform: translate(-50%, .5rem); text-wrap: nowrap; font-size: 0.8rem; opacity: var(--opacity, 0); translate: 0 var(--y, -1rem); transition: 300ms ease-in-out; } .controls > *:focus-visible, .controls > *:hover { --controls-bg: #444; --opacity: 1; --y: 0; --rotate: 360deg; } .controls > svg .line{ transition: 300ms ease-in-out; } .controls > *:hover svg .line{ color: steelblue; } .controls > input[type="checkbox"] { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: var(--checked-bg,var(--controls-bg)); } .controls > input[type="checkbox"]::after { content: "\293E"; color: var(--controls-txt); font-size: 1.3rem; transition: 300ms linear; rotate: var(--rotate,0deg); scale: var(--checked-scale, 1); } .anadrome { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--anadrome-letter-gap); transition: rotate var(--anadrome-duration) var(--anadrome-easing); z-index: 2; rotate: var(--anadrome-rotate); } .anadrome::before, .anadrome::after { content: ""; position: absolute; top: 50%; z-index: -1; transition: all var(--anadrome-duration) ease-in-out; } /* background line */ .anadrome::before{ left: 0; width: 100%; translate: 0 -50%; scale: var(--bg-line-scale, 100%) 1; transform-origin: center; height: 1px; border-bottom: 1px dashed white; } /* pivot point */ .anadrome::after { left: 50%; translate: -50% -50%; width: var(--anadrome-pivot-size); height: var(--anadrome-pivot-size); background-color: white; z-index: -1; border-radius: 50%; } /* Letters */ .anadrome > span { position: relative; background-color: steelblue; color: white; padding: 1rem; width: var(--anadrome-letter-size); height: var(--anadrome-letter-size); aspect-ratio: 1; display: grid; place-content: center; border-radius: 50%; font-size: var(--anadrome-font-size); font-weight: 800; font-family: monospace; transform-origin: center; transition: all var(--anadrome-duration) var(--anadrome-easing); rotate: var(--anadrome-letter-rotate); cursor: none; pointer-events: none; } @media (min-width: 500px){ .wrapper{ --anadrome-letter-size: 60px; --anadrome-font-size: 2rem; --anadrome-letter-gap: 1.5rem; --anadrome-pivot-size: 12px; } } @media (min-width: 900px){ .wrapper{ --anadrome-letter-size: 90px; --anadrome-font-size: 3rem; --anadrome-letter-gap: 3rem; --anadrome-pivot-size: 15px; } } /* general styling */ *, ::before, ::after { margin: 0; padding: 0; box-sizing: border-box; } :root { --clr-bg: #222; --clr-primary: #f5.........完整代码请登录后点击上方下载按钮下载查看
网友评论0