css实现聚光灯下小球跳动动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现聚光灯下小球跳动动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { margin: 0; } body { min-height: 100vh; font-size: 1vw; } .bg { width: 100%; height: 60em; min-height: 100vh; background: #000; position: relative; perspective: 2000px; perspective-origin: bottom; } .shadow .circle, .shadow .cone, .ball, .spotlight .circle, .spotlight .cone, .spotlight .lamp, .spotlight .lamp-cord, .scene { position: absolute; left: 0; right: 0; margin: auto; } .scene { transform-origin: bottom center; transform: rotateX(60deg); } .scene { width: 100%; height: 100em; background: #000; bottom: 0; } .spotlight .lamp-cord { width: 10px; height: calc(5em + 3px); top: 0; background: #727269; } .spotlight .lamp { width: 10em; height: 3em; top: 5em; background: linear-gradient(to bottom, #727269 0 80%, #c8b064 80% 100%); border-radius: 50% 50% 50% 50%/100% 100% 0% 0%; } .spotlight .cone { width: 50em; height: Max(calc(100vh - 21em), 39em); top: 8em; background: #baba9624; clip-path: polygon(40% 0, 60% 0, 100% 100%, 0% 100%); filter: blur(100px); } .spotlight .circle { width: 50em; height: 15em; bottom: 5em; background: #727269; border-radius: 50%; filter: blur(2px); } .ball { width: 10em; height: 10em; border-radius: 50%; bottom: 25em; background: radial-gradient(at 50% 25%, #ffffff 0 3%, #ffffffe0 5%, #ffffff57 10%, transparent 15% 100%) 50% 0%/150% 50% no-repeat, radial-gradient(circle at 50% 20%, #ffffff80, #00000057), red; animation: ball-animation 1.5s cubic-bezier(0.4, 0, 1, 1) 0s infinite alternate, highlight-animation 1.5s cubic-bezier(0.4, 0, 1, 1) 0s infinite alternate; } .shadow .cone { width: 14em; height: 17.5em; bottom: 12.5em; background: #4444444d; clip-path: polygon(14.........完整代码请登录后点击上方下载按钮下载查看
网友评论0