div+css实现花朵无限绽放盛开动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现花朵无限绽放盛开动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, *::before, *::after { padding: 0; margin: 0 auto; box-sizing: border-box; } body { background-color: #000; color: #fff; min-height: 100vh; display: grid; place-items: center; perspective: 800px; overflow: hidden; *:not(:empty) { transform-style: preserve-3d; } } .scene { position: relative; -webkit-animation: sceneRotate 42s infinite linear; animation: sceneRotate 42s infinite linear; } .floor { position: absolute; inset: -60em; background-color: #141; background-image: radial-gradient(closest-side, transparent, #000), radial-gradient(Black, 1%, transparent), repeating-linear-gradient(0deg, transparent 0, #0001, transparent 1em), repeating-linear-gradient(60deg, transparent 0, #0001, transparent 1em), repeating-linear-gradient(120deg, transparent 0, #0001, transparent 1em); transform: rotateX(90deg); } .flower { position: absolute; } .petal { position: absolute; left: -1em; top: 0; width: 2em; height: 0; -webkit-animation: petalScale 8s calc(-8s / 36 * var(--p)) infinite; animation: petalScale 8s calc(-8s / 36 * var(--p)) infinite; --background-color: hsl(calc(var(--p) * 10) 80% 50%); i { position: absolute; left: 0; bottom: 100%; width: 2em; height: 2em; background-image: linear-gradient(45deg, transparent 5em, var(--background-color) 15em); background-size: 100% 20em; transform-origin: bottom; -webkit-animation: petal 8s calc(-8s / 36 * var(--p)) infinite ease-in-out; animation: petal 8s calc(-8s / 36 * var(--p)) infinite ease-in-out; i:empty { border-radius: 100% 100% 0 0; } } } @-webkit-keyframes sceneRotate { from { transform: translateY(5em) rotateX(-30deg) rotateY(0deg); } to { transform: translateY(5em) rotateX(-30deg) rotateY(-360deg); } } @keyframes sceneRotate { from { transform: translateY(5em) rotateX(-30deg) rotateY(0deg); } to { transform: translateY(5em) rotateX(-30deg) rotateY(-360deg); } } @-webkit-keyframes petalScale { 0% { transform: rotateY(calc(var(--p) * 42deg)) rotateX(-90deg) scale(0); } 100% { transform: rotateY(calc(var(--p) * 42deg)) rotateX(-90deg) scale(1); } } @keyframes petalScale { 0% { transform: rotateY(calc(var(--p) * 42deg)) rotateX(-90deg) scale(0); } 100% { transform: rotateY(calc(var(--p) * 42deg)) rotateX(-90deg) scale(1); } } @-webkit-keyframes petal { 0% { transform: rotateX(45deg); } 100% { transform: rotateX(0deg); } 0%, 60% { background-position-y: 0; } 100% { background-position-y: 100%; } } @keyframes petal { 0% { transform: rotateX(45deg); } 100% { transform: rotateX(0deg); } 0%, 60% { background-position-y: 0; } 100% { background-position-y: 100%; } } </style> </head> <body translate="no"> <div class="scene"> <div class="floor"></div> <div class="flower"> <div class="petal" style="--p: 1"><i><i><i><i><i><i></i></i></i></i></i></i></div> <div class="petal" style="--p: 2"><i><i><i><i><i><i></i></i></i></i></i></i></div> <div class="petal" style="--p: 3"><i><i><i><i><i><i></i></i></i></i></i></i></div> <div class="petal" style="--p: 4"><i><i><i><i><i><i></i></i></i></i></i></i></div> <div class="petal" style="--p: 5"><i><i><i><i><i><i></i></i></i></i></i></i></div> <div class="petal" style="--p: 6"><i><i><i><i><i><i></i></i></i></i></i></i></div> <div class="petal" style="--p: 7"><i><i><i><i><i><i></i></i></i></i></i></i></div> <div class="petal" style="--p: 8"><i><i><i><i><i><i></i></i></i></i></i></i></div> <div class="petal" style="--p: 9"><i><i><i><i><i><i></i></i></i></i></i></i></div> <div class="petal" style="--p: 10"><i><i><i><i><i><i></i></i></i></i>&.........完整代码请登录后点击上方下载按钮下载查看
网友评论0