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); } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0