百叶窗垂直切换动画效果
代码语言:html
所属分类:视觉差异
代码描述:百叶窗垂直切换动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@700&display=swap"); :root { font-family: "Red Hat Display", sans-serif; --color-foreground: #0000dd; --color-background: #fdfdfd; --delay: 10; } body { margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 3rem; color: var(--color-foreground); line-height: 1.5; height: 100vh; } .c-shutter { --fill: forwards; --message: ''; font-size: 3rem; color: var(--color-foreground); line-height: 1.5; flex-direction: row; display: flex; position: fixed; top: 0; left: 0; padding: 0; margin: 0; width: 100vw; height: 100vh; list-style: none; user-select: none; } .c-shutter__slat { height: 100%; overflow: hidden; position: relative; flex-grow: 1; background-color: var(--color-foreground); animation-name: var(--animation); animation-duration: 1s; animation-timing-function: ease-in-out; animation-fill-mode: var(--fill); animation-play-state: var(--state); animation-direction: var(--direction); } .c-shutter__slat:nth-child(1) { animation-delay: calc(1 / var(--delay) * 1s); } .c-shutter__slat:nth-child(1):before { margin-left: calc(0 * -10vw); } .c-shutter__slat:nth-child(2) { animation-delay: calc(2 / var(--delay) * 1s); } .c-shutter__slat:nth-child(2):before { margin-left: calc(1 * -10vw); } .c-shutter__slat:nth-child(3) { animation-delay: calc(3 / var(--delay) * 1s); } .c-shutter__slat:nth-child(3):before { margin-left: calc(2 * -10vw); } .c-shutter__slat:nth-child(4) { animation-delay: calc(4 / var(--delay) * 1s); } .c-shutter__slat:nth-child(4):before { margin-left: calc(3 * -10vw); } .c-shutter__slat:nth-child(5) { animation-delay: calc(5 / var(--delay) * 1s); } .c-shutter__slat:nth-child(5):before { margin-left: calc(4 * -10vw); } .c-shutter__slat:nth-child(6) { animation-delay: calc(6 / var(--delay) * 1s); } .c-shutter__slat:nth-child(6):before { margin-left: calc(5 * -10vw); } .c-shutter__slat:nth-child(7) { animation-delay: calc(7 / var(--delay) * 1s); } .c-shutter__slat:nth-child(7):before { margin-left: .........完整代码请登录后点击上方下载按钮下载查看
网友评论0