css实现卡片转动汇聚动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现多张卡片转动并汇聚成圈圈动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> :root { --dark-purple: #251a43; --blue: #6767ce; --purple: #94319d; --easing: cubic-bezier(0.5, 0, 0.5, 1); background: var(--dark-purple); } *, *:before, *:after { position: relative; box-sizing: border-box; } html { height: 100%; overflow: hidden; } body { min-height: 100%; display: grid; place-items: center; } .cards { display: grid; gap: 1rem; font-size: 2vmin; transform-style: preserve-3d; perspective: 1500px; grid-template-areas: "layer"; } .cards > * { grid-area: layer; } @property --offset { syntax: "<percentage>"; inherits: true; initial-value: 0%; } @property --card-spin { syntax: "<angle>"; inherits: true; initial-value: 0turn; } @property --card-tilt { syntax: "<angle>"; inherits: true; initial-value: 0turn; } @property --alpha { syntax: "<number>"; inherits: true; initial-value: 0; } @-webkit-keyframes rotate-card { 0%, 25% { --card-spin: 0turn; --card-tilt: -0.01turn; --offset: 80%; --alpha: 0; border-color: red; } 50% { --card-spin: 0turn; --card-tilt: -0.1turn; --offset: 80%; --alpha: 0.2; border-color: green; } 75% { --card-spin: 1turn; --card-tilt: -0.1turn; --offset: 100%; --alpha: 0.2; border-color: white; } 100% { --card-spin: 1turn; --card-tilt: -0.01turn; --offset: 80%; --alpha: 0; border-color: pink; } } @keyframes rotate-card { 0%, 25% { --card-spin: 0turn; --card-tilt: -0.01turn; --offset: 80%; --alpha: 0; border-color: red; } 50% { --card-spin: 0turn; --card-tilt: -0.1turn; --offset: 80%; --alpha: 0.2; border-color: green; } 75% { --card-spin: 1turn; --card-tilt: -0.1turn; --offset: 100%; --alpha: 0.2; border-color: white; } 100% { --card-spin: 1turn; --card-tilt: -0.01turn; --offset: 80%; --alpha: 0; border-color: pink; } } .card { --height: 10em; --width: calc(var(--height) * 1.625); --d: var(--i) / var(--total); --rotate-z-static: calc(var(--d) * 1turn); --offset: 90%; --card-tilt: 0turn; --card-spin: 0turn; width: var(--width); height: var(--height); transform-style: preserve-3d; will-change: transform; transform: rotateZ(var(--rotate-z-static)) translateX(var(--offset)) translateZ(calc(var(--i) * -1px)) rotateX(var(--card-tilt)); -webkit-animation: rotate-card 6s var(--easing) infinite both; animation: rotate-card 6s var(--easing) infinite both; -webkit-animation-delay: calc(50ms * var(--i)); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0