div+css实现夜晚驾车回家路上路灯模糊动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现夜晚驾车回家路上路灯模糊动画效果代码
代码标签: div css 夜晚 驾车 回家 路上 路灯 模糊 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, *::before, *::after { font-family: inherit; box-sizing: inherit; margin: 0; padding: 0; } html { box-sizing: border-box; font-family: 'Nunito Sans', sans-serif; font-size: 62.5%; } html body { font-size: 1.6rem; margin: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; } ul { list-style: none; } a, a:link, a:visited { text-decoration: none; } </style> <style> .container .city-lights .light, .container .cars-going .car, .container .cars-going .reflect, .container .cars-going-flash .car, .container .cars-going-flash .reflect, .container .cars-incoming .car, .container .cars-incoming .reflect, .container .street-lamps .street-lamp, .container, .container > * { display: flex; align-items: center; justify-content: center; } .container, .container > * { position: absolute; width: 100%; height: 100%; left: 0; top: 0; } .container .city-lights .light::before, .container .cars-going .car::before, .container .cars-going .reflect::before, .container .cars-going-flash .car::before, .container .cars-going-flash .reflect::before, .container .cars-incoming .car::before, .container .cars-incoming .reflect::before, .container .street-lamps .street-lamp::before, .container .city-lights .light::after, .container .cars-going .car::after, .container .cars-going .reflect::after, .container .cars-going-flash .car::after, .container .cars-going-flash .reflect::after, .container .cars-incoming .car::after, .container .cars-incoming .reflect::after, .container .street-lamps .street-lamp::after { -webkit-mask-image: radial-gradient(closest-side, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) 75%, white); mask-image: radial-gradient(closest-side, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) 75%, white); } .container .city-lights .light, .container .cars-going .car, .container .cars-going .reflect, .container .cars-going-flash .car, .container .cars-going-flash .reflect, .container .cars-incoming .car, .container .cars-incoming .reflect, .container .street-lamps .street-lamp { display: block; width: var(--width); height: var(--size); position: absolute; -webkit-animation: move var(--speed) linear infinite forwards; animation: move var(--speed) linear infinite forwards; filter: blur(2px); } .container .city-lights .light::before, .container .cars-going .car::before, .container .cars-going .reflect::before, .container .cars-going-flash .car::before, .container .cars-going-flash .reflect::before, .container .cars-incoming .car::before, .container .cars-incoming .reflect::before, .container .street-lamps .street-lamp::before, .container .city-lights .light::after, .container .cars-going .car::after, .container .cars-going .reflect::after, .container .cars-going-flash .car::after, .container .cars-going-flash .reflect::after, .container .cars-incoming .car::after, .container .cars-incoming .reflect::after, .container .street-lamps .street-lamp::after { content: ""; display: block; position: absolute; height: 100%; aspect-ratio: 1/1; border-radius: 100%; background-color: currentColor; } .container .city-lights .light::before, .container .cars-going .car::before, .container .cars-going .reflect::before, .container .cars-going-flash .car::before, .container .cars-going-flash .reflect::before, .container .cars-incoming .car::before, .container .cars-incoming .reflect::before, .container .street-lamps .street-lamp::before { left: 0; } .container .city-lights .light::after, .container .cars-going .car::after, .container .cars-going .reflect::after, .container .cars-going-flash .car::after, .container .cars-going-flash .reflect::after, .container .cars-incoming .car::after, .container .cars-incoming .reflect::after, .container .street-lamps .street-lamp::after { right: 0; } body { background-image: linear-gradient(to bottom, #334, #111); } .container { perspective: 100rem; -webkit-animation: bump 5s linear 3s infinite forwards; animation: bump 5s linear 3s infinite forwards; } .container, .container * { transform-style: preserve-3d; } .container .street-lamps .street-lamp { --size: 28rem; --width: 80rem; --startZ: -1000rem; --endZ: 100rem; --speed: 10s; --size-mod: 0.4; color: #ffde6b; margin-top: -50rem; margin-left: -15rem; } .container .street-lamps .street-lamp:nth-of-type(1) { -webkit-animation-delay: -2s; animation-delay: -2s; } .container .street-lamps .street-lamp:nth-of-type(2) { -webkit-animation-delay: -4s; animation-delay: -4s; } .container .street-lamps .street-lamp:nth-of-type(3) { -webkit-animation-delay: -6s; animation-delay: -6s; } .container .street-lamps .street-lamp:nth-of-type(4) { -webkit-animation-delay: -8s; animation-delay: -8s; } .container .street-lamps .street-lamp:nth-of-type(5) { -webkit-animation-delay: -10s; animation-delay: -10s; } .container .cars-incoming .car, .container .cars-incoming .reflect { --size: 24rem; --width: 20rem; --startZ: -1000rem; --endZ: 100rem; --speed: 3s; --size-mod: 0.4; color: white; margin-top: 16rem; margin-left: -90rem; } .container .cars-incoming .car:nth-last-of-type(2), .container .cars-incoming .reflect:nth-last-of-type(2) { color: white; -webkit-animation-delay: -0.5s; animation-delay: -0.5s; --width: 22rem; margin-left: -140rem; margin-top: 18rem; } .container .cars-incoming .car:nth-last-of-type(3), .container .cars-incoming .reflect:nth-last-of-type(3) { -webkit-animation-delay: -1.8s; animation-delay: -1.8s; margin-top: 15rem; color: white; } .container .cars-going .car, .container .cars-going .reflect.........完整代码请登录后点击上方下载按钮下载查看
网友评论0