百叶窗垂直切换动画效果
代码语言: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: calc(6 * -10vw); } .c-shutter__slat:nth-child(8) { animation-delay: calc(8 / var(--delay) * 1s); } .c-shutter__slat:nth-child(8):before { margin-left: calc(7 * -10vw); } .c-shutter__slat:nth-child(9) { animation-delay: calc(9 / var(--delay) * 1s); } .c-shutter__slat:nth-child(9):before { margin-left: calc(8 * -10vw); } .c-shutter__slat:nth-child(10) { animation-delay: calc(10 / var(--delay) * 1s); } .c-shutter__slat:nth-child(10):before { margin-left: calc(9 * -10vw); } .c-shutter__slat:before { content: var(--message); color: var(--color-background); position: absolute; top: 0; width: 100vw; height: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; } .c-shutter--opened:not(.c-shutter--closing) { display: none; } .c-shutter--opened .c-shutter__slat { height: 0%; } .c-shutter--closed { display: flex; } .c-shutter--opening { --animation: shutterOpening; } .c-shutter--closing { --animation: shutterClosing; } @keyframes shutterOpening { 0% { height: 100%; } 100% { height: 0; } } @keyframes shutterClosing { 0% { height: 0%; } 100% { heig.........完整代码请登录后点击上方下载按钮下载查看
网友评论0