div+css实现立体圆球带阴影动画加载效果代码
代码语言:html
所属分类:加载滚动
代码描述:div+css实现立体圆球带阴影动画加载效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { font-size: calc(16px + (32 - 16) * (100vw - 320px) / (1280 - 320)); } body { font: 1em/1.5 sans-serif; height: 100vh; } .pl { background: linear-gradient(#041749 calc(50% + 1.5em), #062779 calc(50% + 2.5em) calc(50% + 10.5em), #041749); position: relative; overflow: hidden; perspective: 800px; transform-style: preserve-3d; } .pl, .pl:before { width: 100%; height: 100%; } .pl:before, .pl__sphere, .pl__sphere-shadow { position: absolute; } .pl:before, .pl__sphere-shadow { display: block; } .pl:before { background: linear-gradient(#062779, rgba(6, 39, 121, 0)), radial-gradient(100% 100% at 50% 50%, rgba(6, 39, 121, 0) 37.5%, #062779 50%), repeating-linear-gradient(0deg, rgba(8, 55, 170, 0) 0 0.95em, #0837aa 0.95em 1em), repeating-linear-gradient(90deg, rgba(8, 55, 170, 0) 0 0.9em, #0837aa 0.9em 1em) 0.5em 0; content: ""; top: 50%; left: 50%; transform: translate(-50%, -50%) rotateX(90deg) translateZ(-4em); width: 34em; height: 34em; } .pl__sphere { animation-name: moveSphere; background: #6e95f7; box-shadow: 0 -0.75em 0.5em #255ff4 inset, 0 0 0.5em rgba(85, 131, 246, 0.7); transform: translateZ(10em); } .pl__sphere, .pl__sphere-shadow { animation-duration: 2s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; border-radius: 50%; top: calc(50% - 1em); left: calc(50% - 1em); width: 2em; height: 2em; z-index: 1; } .pl__sphere-shadow { animation-name: moveSphereShadow; background-image: radial-gradient(100% 100% at center, rgba(0, 0, 0, 0.2) 45%, rgba(0, 0, 0, 0) 50%); tran.........完整代码请登录后点击上方下载按钮下载查看
网友评论0