div+css实现夜晚高速开车路面动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现夜晚高速开车路面动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html, body { height: 100%; } body { display: flex; justify-content: center; align-items: center; perspective: 10vmin; background: #000; overflow: hidden; } Horizon { display: block; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 30%; background-size: cover; box-shadow: 0 1px 30px 25px #000, inset 0 -25px 150px 25px #000; -webkit-animation: change-dream 30s infinite; animation: change-dream 30s infinite; } Road { display: block; width: 50px; height: 50px; border-radius: 100%; border-right: 1px dashed #fff; box-sizing: border-box; background: #000; -webkit-animation: move-forward 1s infinite linear, radiate 25s infinite linear; animation: move-forward 1s infinite linear, radiate 25s infinite linear; } @-webkit-keyframes move-forward { from { transform: rotateX(25deg) scale(50, 50) translateX(-55%); } to { transform: rotateX(25deg) scale(50, 50) translateX(-55%) rotate(22.5deg); } } @keyframes move-forward { from { transform: rotateX(25deg) scale(50, 50) translateX(-55%); } to { transform: rotateX(25deg) scale(50, 50) translateX(-55%) rotate(22.5deg); } } @-webkit-keyframes radiate { from, to { box-shadow: 0 0 0 5px #000, 0 0 10px 5px hotpink; } 20% { box-shadow: 0 0 0 5px #000, 0 0 10px 5px crimson; } 40% { box-shadow: 0 0 0 5px #000, 0 0 10px 5px gold; } 60% { box-shadow: 0 0 0 5px #000, 0 0 10px 5px mediumspringgreen; } 80% { box-shadow: 0 0 0 5px #000, 0 0 10px 5px cyan; } } @keyframes radiate { from, to { box-shadow: 0 0 0 5px #000, 0 0 10px 5px hotpink; } 20% { box-shadow: 0 0 0 5px #000, 0 0 10px 5px crimson; } 40% { box-shadow: 0 0 0 5px #000, 0 0 10px 5px gold; } 60% { box-shado.........完整代码请登录后点击上方下载按钮下载查看
网友评论0