纯css实现飞舞的纸张动画效果
代码语言:html
所属分类:动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> - ➰📃 Paper Pirouette | 3D CSS-only flying page animation tutorial | @keyframers 2.18.0</title> <link rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/normalize.min.css" /> <style> *, *:before, *:after { box-sizing: border-box; position: relative; } * { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } :root { --duration: 3.2s; --stagger: .65s; --easing: cubic-bezier(.36,.07,.25,1); --offscreen: 130vmax; --color-bg: #EF735A; --color-blue: #384969; --color-shadow: #211842; } html, body { margin: 0; padding: 0; height: 100%; width: 100%; overflow: hidden; } body { display: flex; justify-content: center; align-items: center; background: var(--color-bg); } #app { height: 70vmin; width: 40vmin; display: flex; justify-content: center; align-items: center; -webkit-transform: translateX(25vw) rotateX(-20deg) rotateY(-55deg); transform: translateX(25vw) rotateX(-20deg) rotateY(-55deg); background: var(--color-blue); border-radius: 2vmin; -webkit-perspective: 10000px; perspective: 10000px; } #app:before { border: 10vmin solid white; border-left-width: 2vmin; border-right-width: 2vmin; border-radius: inherit; content: ''; position: absolute; height: 100%; width: 100%; top: 0; left: 0; border: 10vmin solid white; border-left-width: 2vmin; border-right-width: 2vmin; background: var(--color-blue); } #app > .papers, #app:before { -webkit-transform: translateZ(3vmin); transform: translateZ(3vmin); } #app:after { content: ''; position: absolute; height: 100%; width: 100%; top: 0; left: 0; background: inherit; border-radius: inherit; -webkit-transform: translateZ(1.5vmin); transform: translateZ(1.5vmin); } #app > .shadow { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transform-origin: bottom center; transform-origin: bottom center; -webkit-transform: rotateX(90deg); transform: rotateX(90deg); background: var(--color-shadow); border-radius: inherit; } .paper-shadow { background: var(--color-shadow); height: 50%; width: 100%; position: absolute; top: calc(100% + 3vmin); left: 0; -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation: shadow-in var(--duration) var(--easing) infinite; animation: shadow-in var(--duration) var(--easing) infinite; -webkit-animation-delay: calc(var(--i) * var(--stagger)); animation-delay: calc(var(--i) * var(--stagger)); -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes shadow-in { 0%,5% { -webkit-transform: scale(0.8, 1) translateY(var(--offscreen)); transform: scale(0.8, 1) translateY(var(--offscreen)); } 100% { -webkit-transform: scale(0.8, 0); transform: scale(0.8, 0); } } @keyframes shadow-in { 0%,5% { -webkit-transform: scale(0.8, 1) translateY(var(--offscreen)); transform: scale(0.8, 1) translateY(var(--offscreen)); } 100% { -webkit-transform: scale(0.8, 0); transform: scale(0.8, 0); } } .papers { width: 30vmin; height: 40vmin; background: white; } .paper { --segments: 5; --segment: calc(100% * 1 / var(--segments)); position: absolute; top: 0; left: 0; height: 100%; width: 100%; -webkit-animation: fly-in var(--duration) var(--easing) infinite; animation: fly-in var(--duration) var(--easing) infinite; -webkit-animation-delay: calc( (var(--i) * var(--stagger)) ); animation-delay: calc( (var(--i) * var(--stagger)) ); } @-webkit-keyframes fly-in { 0%, 2% { -webkit-transform: translateZ(var(--offscreen)) translateY(80%) rotateX(30deg); transform: translateZ(var(--offscreen)) translateY(80%) rotateX(30deg); } 80%, 100% { -webkit-transform: translateZ(0px) translateY(0%) rotateX(0deg); transform: translateZ(0px) translateY(0%) rotateX(0deg); } } @keyframes fly-in { 0%, 2% { -webkit-transform: translateZ(var(--offscreen)) translateY(80%) rotateX(30deg); transform: translateZ(var(--offscreen)) translateY(80%) rotateX(30deg); } 80%, 100% { -webkit-transform: translateZ(0px) translateY(0%) rotateX(0deg); transform: translateZ(0px) translateY(0%) rotateX(0deg); } } .paper > .segment { height: var(--segment); } .segment { --rotate: 20deg; height: 100%; -webkit-transform-origin: top center; transform-origin: top center; background: white; border: 1px solid rgba(0, 0, 0, 0.2); border-top: none; border-bottom: none; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0