div+css实现三维彩色五角星12面体旋转动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现三维彩色五角星12面体旋转动画效果代码
代码标签: div css 三维 彩色 五角星 12面体 旋转 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { margin: 0; } #wrapper { display: grid; position: absolute; height: 100vh; height: -webkit-fill-available; width: 100%; background: #011; margin: 0; padding: 0; place-content: center; overflow: hidden; font-size: .33vw; } #play { position: absolute; display: none; } #pressed { position: relative; background: yellow; font-size: 10em; font-family: Arial Black; color: red; pointer-events: auto; display: grid; place-items: center; transition: transform .3s ease-in-out; } #pressed:hover { transform: scale(1.33); } #play:not(:checked) + #scene *, #play:not(:checked) + #scene .arm:before { animation-play-state: paused; } #play:not(:checked) + #scene #pressed:after { content: '\0025BA'; } #pressed:after { content: 'II'; position: absolute; padding: 1.25em; } #scene { width: 100em; aspect-ratio: 1; perspective: 100em; position: relative; pointer-events: none; } #scene *:not(#pressed) { transform-style: preserve-3d; position: absolute; } #container, #light, .shoal { inset: 0; } #overlay { transform-style: flat; position: absolute; background: conic-gradient(#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00); inset: 0; mix-blend-mode: hue; pointer-events: none; } #light { background: radial-gradient(#fff 20%, #40fb 25%, #0008 50%,#0000 70%); display: grid; place-items: center; } .shoal { animation: float 32s ease-in-out infinite;*/ } .shoal:nth-child(1) > .anchor { --flip: 0; } .shoal:nth-child(2) > .anchor { --flip: 1; } .shoal:nth-child(2) { animation-delay: -.5s; } @keyframes float { 0%, 33.33%, 66.66%, 100% { transform: rotateY(0deg) rotateX(0deg) rotate(0deg); } 16.66% { transform: rotateY(180deg) rotateX(0deg) rotate(0deg); } 50% { transform: rotateY(0deg) rotateX(0deg) rotate(180deg); } 83.33% { transform: rotateY(0deg) rotateX(180deg) rotate(0deg); } } .anchor { inset: 30%; display: grid; animation: twirl 32s ease-in-out infinite; animation-delay: calc(var(--nStar)*-.2s);.........完整代码请登录后点击上方下载按钮下载查看
网友评论0