div+css模拟光照三维小球动画效果代码
代码语言:html
所属分类:悬停
代码描述:div+css模拟光照三维小球动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <style> *, *::before, *::after { padding: 0; margin: 0 auto; box-sizing: border-box; transform-style: preserve-3d; } body { background-color: #000; min-height: 100vh; display: flex; justify-content: center; align-items: center; font-size: 75px; perspective: 15em; } .scene { position: relative; } .lamp { position: absolute; top: -3em; left: 0em; width: 1.5em; height: 1em; -webkit-animation: lampRotate 8s infinite linear; animation: lampRotate 8s infinite linear; transform-origin: left; } @-webkit-keyframes lampRotate { from { transform: rotateY(0deg) translateX(-4em) rotateZ(47.5deg); } to { transform: rotateY(360deg) translateX(-4em) rotateZ(47.5deg); } } @keyframes lampRotate { from { transform: rotateY(0deg) translateX(-4em) rotateZ(47.5deg); } to { transform: rotateY(360deg) translateX(-4em) rotateZ(47.5deg); } } .lamp_side { position: absolute; top: 0em; left: 0; width: 250%; height: 55%; -webkit-clip-path: polygon(0 50%, 100% 0, 100% 100%); clip-path: polygon(0 50%, 100% 0, 100% 100%); background-image: linear-gradient(90deg, #1230 10%, #123 10%, aqua 50%, #fff1 50%, #fff0); transform-origin: left; } .lamp_side:nth-child(1) { transform: rotateX(0deg) rotateY(10deg); } .lamp_side:nth-child(2) { transform: rotateX(45deg) rotateY(10deg); } .lamp_side:nth-child(3) { transform: rotateX(90deg) rotateY(10deg); } .lamp_side:nth-child(4) { transform: rotateX(135deg) rotateY(10deg); } .lamp_side:nth-child(5) { transform: rotateX(180deg) rotateY(10deg); } .lamp_side:nth-child(6) { transform: rotateX(225deg) rotateY(10deg); } .lamp_side:nth-child(7) { transform: rotateX(270deg) rotateY(10deg); } .lamp_side:nth-child(8) { transform: rotateX(315deg) rotateY(10deg); } .ball { position: absolute; top: 0.5em; left: -1em; width: 2em; height: 2em; background-color: #000; border-radius: 50%; background-image: radial-gradient(#fedc, #1000 35%), repeating-radial-gradient(circle at center, #100 0px, #0000 3px 7px, #100 10px), repeating-radial-gradient(circle at top, #100 0px, #0000 3px 7px, #100 10px), repeating-radial-gradient(circle at right, #100 0px, #0000 3px 7px, #100 10px), repeating-radial-gradient(circle at bottom, #100 0px, #0000 3px 7px, #100 10px), repeating-radial-gradient(circle at left, #000 0px, #0000 3px 7px, #100 10px); background-size: 200% 200%, 100%, 100%, 100%, 100%, 100.........完整代码请登录后点击上方下载按钮下载查看
网友评论0