div+css实现警车追出租车动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现警车追出租车动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: "consolas"; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #355463; overflow: hidden; } .road { position: relative; width: 100vw; display: flex; justify-content: center; align-items: center; transform-style: preserve-3d; transform: rotate(-15deg); } .road:before { content: ""; position: absolute; width: 100%; height: 4px; background: linear-gradient(90deg, #fff, #fff 50%, transparent 50%, transparent 100%); background-size: 50px; animation: animate_road 0.125s linear infinite; } @keyframes animate_road { 0% { background-position: 50px 0; } 100% { background-position: 0px 0; } } @keyframes animate_police_car { 0% { transform: translateX(20px) translateY(-50px); } 25% { transform: translateX(-10px) translateY(0px); } 50% { transform: translateX(20px) translateY(50px); } 75% { transform: translateX(-10px) translateY(0px); } 100% { transform: translateX(20px) translateY(-50px); } } @keyframes animate_taxi { 0% { transform: translateX(20px) translateY(20px); } 25% { transform: translateX(-50px) translateY(0px); } 50% { transform: translateX(20px) translateY(-20px); } 75% { transform: translateX(50px) translateY(0px); } 100% { transform: translateX(20px) translateY(20px); } } .police { position: absolute; left: -100px; width: 200px; height: 80px; background: #3f4c54; border-radius: 10px; box-shadow: -10px 10px rgba(0, 0, 0, 0.05); transform-style: preserve-3d; perspective: 800px; z-index: 10; animation: animate_police_car 5s linear infinite; } .police:nth-child(2) { left: 200px; animation-delay: -2.5s; } .police:before { content: ""; position: absolute; top: 12px; left: 2px; width: 5px; height: 15px; border-radius: 2px; background: #fc3c25; box-shadow: 0 42px #fc3c25; } .police:after { content: ""; position: absolute; top: 12px; right: 2px; width: 6px; height: 16px; border-radius: 2px; background: #fff; box-shadow: 0 44px #fff; } .police span { position: absolute; inset: 5px 10px; background: #475b66; border-radius: 10px; overflow: hidden; } .police span:before { content: "911"; position: absolute; top: 50%; left: 48%; transform: translate(-50%, -50%) rotate(90deg); color: #333; font-size: 1.15em; font-weight: 1000; letter-spacing: 0.1em; } .police span:after { content: ""; position: absolute; top: 50%; left: 60%; transform: translate(-50%, -50%); z-index: 100; width: 6px; height: 10px; background: #29282b; box-shadow: 0 -10px #1f5fff, 0 10px #df1b25; } .police span b { position: absolute; inset: 0 30px; background: #344650; border-radius: 10px; } .police span b:before { content: ""; position: absolute; inset: 6px 25px; background: #ebebeb; border: 5px; } .police span b:after { content: ""; position: absolute; inset: 0px 58px; background: #ebebeb; } .police span i { position: absolute; inset: 0; } .police span i:before { content: ""; position: absolute; top: 7px; left: 20px; width: 40px; height: 5px; background: #ebebeb; transform: rotate(15deg); transform-origin: right; box-shadow: 100px 34px #ebebeb; } .police span i:after { content: ""; position: absolute; bottom: 7px; left: 20px; width: 40px; height: 5px; background: #ebebeb; transform: rotate(-15deg); transform-origin: right; box-shadow: 100px -34px #ebebeb; } .police h4 { position: absolute; top: 50%; left: 0; color: #fff; text-transform: uppercase; z-index: 10; transform: translateY(-50%) rotate(90deg) scale(0.75); } .police h3 { position: absolute; top: 50%; right: -2%; color: #fff; text-transform: uppercase; z-index: 10; transform: translateY(-50%) rotate(270deg) scale(0.75); } .police .side_mirror { position: absolute; inset: 0; } .police .side_mirror:before { content: ""; position: absolute; top: -8px; right: 40px; width: 5px; height: 10px; background: #ebebeb; border-top-right-radius: 10px; } .police .side_mirror:after { content: ""; position: absolute; bottom: -8px; r.........完整代码请登录后点击上方下载按钮下载查看
网友评论0