petite-vue实现三维线条空间左右摇摆动画效果代码
代码语言:html
所属分类:动画
代码描述:petite-vue实现三维线条空间左右摇摆动画效果代码
代码标签: petite-vue 三维 线条 空间 左右 摇摆 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Inconsolata:wght@300&display=swap"); *, ::after, ::before { margin: 0; padding: 0; box-sizing: border-box; --blue: rgb(0, 77, 112); --red: rgb(255, 19, 58); --black: rgb(26, 36, 44); --ease: cubic-bezier(0.8, -0, 0.2, 1); } body { min-height: 100vh; display: grid; place-items: center; font-family: "Inconsolata", sans-serif; background-color: var(--black); } .container { height: 100%; width: 100%; position: relative; perspective: 1000px; overflow: hidden; } .title { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; } .title h1 { color: var(--red); font-size: clamp(2rem, 6vw, 4rem); letter-spacing: 2em; text-transform: uppercase; text-align: center; margin-left: 2em; } .blocks-container { perspective: 700px; transform-origin: 50% 50%; transform-style: preserve-3d; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotateY(-65deg); z-index: 8; width: 98vw; height: 700px; animation: rotateContainer 5s infinite var(--ease); } @keyframes rotateContainer { 0%, 100% { transform: translate(-50%, -50%) rotateY(-65deg); } 50% { transform: translate(-50%, -50%) rotateY(65deg); } } .blocks { perspective: 500px; transform-style: preserve-3d; position: absolute; width: 98vw; height: 700px; display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 1fr; } .block { position: relative; height: 100%; } #blk-1 { position: absolute; top: 50%; left: 0; transform-origin: 0% 50%; transform: translateY(-50%); z-index: 4; width: 5px; height: 3px; background-color: var(--blue); animation: stretchBlock1 5s infinite var(--ease); } @keyframes stretchBlock1 { 0%, 100% { width: 101%; filter: blur(2px); } 25%, 75% { filter: blur(0px); } 50% { width:.........完整代码请登录后点击上方下载按钮下载查看
网友评论0