纯css实现递归矩形旋转动画效果
代码语言:html
所属分类:动画
代码描述:纯css实现递归矩形旋转动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html { background: #100010; } html, body { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; align-content: center; } body { padding: 1em; flex: 1; flex-flow: wrap; overflow: hidden; } .container { width: 100%; max-width: 500px; } .flower { position: relative; background: rgba(54, 84, 99, 0.4); width: 100%; padding-top: 100%; border-radius: 10%; --delta-angle: 180deg; } .flower__leaf { position: absolute; width: 100%; height: 100%; top: 50%; left: 50%; opacity: 0.5; border-radius: inherit; } .flower__leaf:nth-child(1) { --scale: 0.8504300948; --rotation: calc(1 * var(--delta-angle)); transform: translate(-50%, -50%) rotate(var(--rotation)) scale(var(--scale)); background: #374c72; animation: rotate 8s alternate infinite ease-in-out; } .flower__leaf:nth-child(2) { --scale: 0.7232313461; --rotation: calc(2 * var(--delta-angle)); transform: translate(-50%, -50%) rotate(var(--rotation)) scale(var(--scale)); background: #373c81; animation: rotate 8s alternate infinite ease-in-out; } .flower__leaf:nth-child(3) { --scale: 0.6150577022; --rotation: calc(3 * var(--delta-angle)); transform: translate(-50%, -50%) rotate(var(--rotation)) scale(var(--scale)); background: #4c3790; animation: rotate 8s alternate infinite ease-in-out; } .flower__leaf:nth-child(4) { --scale: 0.52306358; --rotation: calc(4 * var(--delta-angle)); transform: translate(-50%, -50%) rotate(var(--rotation)) scale(var(--scale)); background: #6f36a1; animation: rotate 8s alternate infinite ease-in-out; } .flower__leaf:nth-child(5) { --scale: 0.4448290099; --rotation: calc(5 * var(--delta-angle)); transform: translate(-50%, -50%) rotate(var(--rotation)) scale(var(--scale)); background: #9d34b2; animation: rotate 8s alternate infinite ease-in-out; } .flower__leaf:nth-child(6) { --scale: 0.378295977; --rotation: calc(6 * var(--delta-angle)); transform: translate(-50%, -50%) rotate(var(--rotation)) scale(var(--scale)); background: #c431b0; animation: rotate 8s alternate infinite ease-in-out; } .flower__leaf:nth-child(7) { --scale: 0.3217142836; --rotation: calc(7 * var(--delta-angle)); transform: translate(-50%, -50%) rotate(var(--rotation)) scale(var(--scale)); background: #d3318d; animation: rotate 8s alternate infinite ease-in-out; } .flower__leaf:nth-child(8) { --scale: 0.2735955087; --rotation: calc(8 * var(--delta-angle)); transform: translate(-50%, -50%) rotate(var(--rotation)) scale(var(--scale)); background: #dc3863; animation: rotate 8s alternate infinite ease-in-out; } .flower__leaf:nth-child(9) { --scale: 0.2326738544; --rotation: calc(9 * var(--delta-angle)); transform: translate(-50%, -50%) rotate(var(--rotation)) scale(var(--scale)); background: #e4453f; animation: rotate 8s alternate infinite ease-in-out; } .flower__leaf:nth-child(10) { --scale: 0.197872848; --rotation: calc(10 * var(--delta-angle)); transform: translate(-50%, -50%) rotate(var(--rotation)) scale(var(--scale)); background: #eb7e47; animation: rotate 8s alternate infinite ease-in-out; } .flower__leaf:nth-child(11) { --scale: 0.1682770249; --rotation: cal.........完整代码请登录后点击上方下载按钮下载查看
网友评论0