纯css多个正方形折叠旋转动画效果
代码语言:html
所属分类:动画
代码描述:纯css多个正方形折叠旋转动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500&display=swap"); :root { --color: darkslategray; --color-alt: whitesmoke; --color-focus: dodgerblue; } .dark-mode { --color: white; --color-alt: black; --color-focus: yellow; } * { box-sizing: border-box; } html, body { height: 100%; } body { display: grid; place-items: center; overflow: hidden; background-color: var(--color-alt); font-family: "IBM Plex Mono", monospace; } .scene { --size: 50vmin; --duration: 5500ms; --bezier: calc(0.15 * var(--index) / 2); display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; position: relative; width: var(--size); height: var(--size); -webkit-animation: scene calc(var(--duration) * 2) steps(1, end) infinite; animation: scene calc(var(--duration) * 2) steps(1, end) infinite; } .square { position: absolute; z-index: 0; left: 0; width: 100%; height: 100%; opacity: 0; border: 6px dotted var(--color); -webkit-transition: opacity 500ms ease-out; transition: opacity 500ms ease-out; -webkit-animation: square var(--duration) alternate infinite; animation: square var(--duration) alternate infinite; -webkit-animation-timing-function: cubic-bezier(calc(0.1 * var(--index)), calc(0.025 * var(--index)), calc(0.1 * var(--index)), 1); animation-timing-function: cubic-bezier(calc(0.1 * var(--index)), calc(0.025 * var(--index)), calc(0.1 * var(--index)), 1); } @media (min-width: 40em) { .square { border-width: 1vmin; } } @-webkit-keyframes scene { 50%, 100% { -webkit-transform: scaleX(-1); transform: scaleX(-1); } } @keyframes scene { 50%, 100% { -webkit-transform: scaleX(-1); transform: scaleX(-1); } } @-webkit-keyframes square { 0% { -webkit-transform: translateY(15vh); transform: translateY(15vh); } 10% { -webkit-transform: translateY(0) scale(1); transform: translateY(0) scale(1); } 20% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } 30% { -webkit-transform: translateY(0) scale(0.5) rotate(45deg); transform: translateY(0) scale(0.5) rotate(45deg); } 40% { -webkit-transform: translateY(0) scale(0.5); transform: translateY(0) scale(0.5); } 50% { -webkit-transform: translate(0, -20vh) scale(0.5); transform: translate(0, -20vh) scale(0.5); } 60% { -webkit-transform: translate(20vw, -20vh) scale(0.5) rotate(90deg); transform: translate(20vw, -20vh) scale(0.5) rotate(90deg); } 70% { -webkit-transform: translate(-20vw, -20vh) scale(0.5) rotate(-90deg); transform: translate(-20vw, -20vh) scale(0.5) rotate(-90deg); } 80% { -webkit-transform: translate(0, -30vh) scale(0.25); transform: translate(0, -30vh) scale(0.25); } 90% { -webkit-transform: translate(0, -20vh) scale(0.5); transform: translate(0, -20vh) scale(0.5); } 100% { -webkit-transform: translateY(-20vh) scale(0.25); transform: translateY(-20vh) scale(0.25); } } @keyframes square { 0% { -webkit-transform: translateY(15vh); transform: translateY(15vh); } 10% { -webkit-transform: translateY(0) scale(1); transform: translateY(0) scale(1); } 20% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } 30% { -webkit-transform: translateY(0) scale(0.5) rotate(45deg); transform: translateY(0) scale(0.5) rotate(45deg); } 40% { -webkit-transform: translateY(0) scale(0.5); transform: translateY(0) scale(0.5); } 50% { -webkit-transform: translate(0, -20vh) scale(0.5); transform: translate(0, -20vh) scale(0.5); } 60% { -webkit-transform: translate(20vw, -20vh) scale(0.5) rotate(90deg); transform: translate(20vw, -20vh) scale(0.5) rotate(90deg); } 70% { -webkit-transform: translate(-20vw, -20vh) scale(0.5) rotate(-90deg); transform: translate(-20vw, -20vh) scale(0.5) rotate(-90deg); } 80% { -webkit-transform: translate(0, -30vh) scale(0.25); transform: translate(0, -30vh) scale(0.25); } 90% { -webkit-transform: translate(0, -20vh) scale(0.5); transf.........完整代码请登录后点击上方下载按钮下载查看
网友评论0