web前端项目-动画特效【附源码】

文章目录

    • 一：赛车游戏动画
        • `HTML`源码：
        • `JS`源码：
        • `CSS`源码：
          • （1）`normalize.css`
          • （2）`style.css`
    • 二：吉普车动画演示
        • `HTML`源码：
        • `CSS`源码：
          • （1）`reset.css`
          • （2）`style.css`

一：赛车游戏动画

运行效果：键盘的方向键（上、下、左、右）分别控制赛车的前进、减速、向左和向右
在这里插入图片描述

HTML源码：
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><title>赛车游戏动画</title><link rel="stylesheet" type="text/css" href="css/normalize.css" /><link rel="stylesheet" href="css/style.css"><!--[if IE]><script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script><![endif]-->
</head>
<body><canvas height="450" width="750"></canvas><script type="text/javascript" src="js/main.js"></script><div style="text-align:center;">
</div>
</body>
</html>
JS源码：
var $ = {canvas: null,ctx: null,canvas2: null,ctx2: null,colors: {sky: "#D4F5FE",mountains: "#83CACE",ground: "#8FC04C",groundDark: "#73B043",road: "#606a7c",roadLine: "#FFF",hud: "#FFF"},settings: {fps: 60,skySize: 120,ground: {size: 350,min: 4,max: 120},road: {min: 76,max: 700,}},state: {bgpos: 0,offset: 0,startDark: true,curve: 0,currentCurve: 0,turn: 1,speed: 27,xpos: 0,section: 50,car: {maxSpeed: 50,friction: 0.4,acc: 0.85,deAcc: 0.5},keypress: {up: false,left: false,right: false,down: false}},storage: {bg: null}};
$.canvas = document.getElementsByTagName('canvas')[0];
$.ctx = $.canvas.getContext('2d');
$.canvas2 = document.createElement('canvas');
$.canvas2.width = $.canvas.width;
$.canvas2.height = $.canvas.height;
$.ctx2 = $.canvas2.getContext('2d');
window.addEventListener("keydown", keyDown, false);
window.addEventListener("keyup", keyUp, false);drawBg();
draw();function draw() {setTimeout(function() {calcMovement();$.state.bgpos += ($.state.currentCurve * 0.02) * ($.state.speed * 0.2);$.state.bgpos = $.state.bgpos % $.canvas.width;$.ctx.putImageData($.storage.bg, $.state.bgpos, 5);$.ctx.putImageData($.storage.bg, $.state.bgpos > 0 ? $.state.bgpos - $.canvas.width : $.state.bgpos + $.canvas.width, 5);$.state.offset += $.state.speed * 0.05;if($.state.offset > $.settings.ground.min) {$.state.offset = $.settings.ground.min - $.state.offset;$.state.startDark = !$.state.startDark;}drawGround($.ctx, $.state.offset, $.colors.ground, $.colors.groundDark, $.canvas.width);drawRoad($.settings.road.min + 6, $.settings.road.max + 36, 10, $.colors.roadLine);drawGround($.ctx2, $.state.offset, $.colors.roadLine, $.colors.road, $.canvas.width);drawRoad($.settings.road.min, $.settings.road.max, 10, $.colors.road);drawRoad(3, 24, 0, $.ctx.createPattern($.canvas2, 'repeat'));drawCar();drawHUD($.ctx, 630, 340, $.colors.hud);requestAnimationFrame(draw);}, 1000 / $.settings.fps);
}function drawHUD(ctx, centerX, centerY, color) {var radius = 50, tigs = [0, 90, 135, 180, 225, 270, 315],angle = 90;ctx.beginPath();ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);ctx.lineWidth = 7;ctx.fillStyle = 'rgba(0, 0, 0, 0.4)';ctx.fill();ctx.strokeStyle = color;ctx.stroke();for (var i = 0; i < tigs.length; i++) {drawTig(ctx, centerX, centerY, radius, tigs[i], 7);}angle = map($.state.speed, 0, $.state.car.maxSpeed, 90, 360);drawPointer(ctx, color, 50, centerX, centerY, angle);
}function drawPointer(ctx, color, radius, centerX, centerY, angle) {var point = getCirclePoint(centerX, centerY, radius - 20, angle),point2 = getCirclePoint(centerX, centerY, 2, angle + 90),point3 = getCirclePoint(centerX, centerY, 2, angle - 90);ctx.beginPath();ctx.strokeStyle = "#FF9166";ctx.lineCap = 'round';ctx.lineWidth = 4;ctx.moveTo(point2.x, point2.y);ctx.lineTo(point.x, point.y);ctx.lineTo(point3.x, point3.y);ctx.stroke();ctx.beginPath();ctx.arc(centerX, centerY, 9, 0, 2 * Math.PI, false);ctx.fillStyle = color;ctx.fill();
}function drawTig(ctx, x, y, radius, angle, size) {var startPoint = getCirclePoint(x, y, radius - 4, angle),endPoint = getCirclePoint(x, y, radius - size, angle)ctx.beginPath();ctx.lineCap = 'round';ctx.moveTo(startPoint.x, startPoint.y);ctx.lineTo(endPoint.x, endPoint.y);ctx.stroke();
}function getCirclePoint(x, y, radius, angle) {var radian = (angle / 180) * Math.PI;return {x: x + radius * Math.cos(radian),y: y + radius * Math.sin(radian)}
}function calcMovement() {var move = $.state.speed * 0.01,newCurve = 0;if($.state.keypress.up) {$.state.speed += $.state.car.acc - ($.state.speed * 0.015);} else if ($.state.speed > 0) {$.state.speed -= $.state.car.friction;}if($.state.keypress.down && $.state.speed > 0) {$.state.speed -= 1;}$.state.xpos -= ($.state.currentCurve * $.state.speed) * 0.005;if($.state.speed) {if($.state.keypress.left) {$.state.xpos += (Math.abs($.state.turn) + 7 + ($.state.speed > $.state.car.maxSpeed / 4 ? ($.state.car.maxSpeed - ($.state.speed / 2)) : $.state.speed)) * 0.2;$.state.turn -= 1;}if($.state.keypress.right) {$.state.xpos -= (Math.abs($.state.turn) + 7 + ($.state.speed > $.state.car.maxSpeed / 4 ? ($.state.car.maxSpeed - ($.state.speed / 2)) : $.state.speed)) * 0.2;$.state.turn += 1;}if($.state.turn !== 0 && !$.state.keypress.left && !$.state.keypress.right) {$.state.turn += $.state.turn > 0 ? -0.25 : 0.25;}}$.state.turn = clamp($.state.turn, -5, 5);$.state.speed = clamp($.state.speed, 0, $.state.car.maxSpeed);$.state.section -= $.state.speed;if($.state.section < 0) {$.state.section = randomRange(1000, 9000);newCurve = randomRange(-50, 50);if(Math.abs($.state.curve - newCurve) < 20) {newCurve = randomRange(-50, 50);}$.state.curve = newCurve;}if($.state.currentCurve < $.state.curve && move < Math.abs($.state.currentCurve - $.state.curve)) {$.state.currentCurve += move;} else if($.state.currentCurve > $.state.curve && move < Math.abs($.state.currentCurve - $.state.curve)) {$.state.currentCurve -= move;}if(Math.abs($.state.xpos) > 550) {$.state.speed *= 0.96;}$.state.xpos = clamp($.state.xpos, -650, 650);
}function keyUp(e) {move(e, false);
}function keyDown(e) {move(e, true);
}function move(e, isKeyDown) {if(e.keyCode >= 37 && e.keyCode <= 40) {e.preventDefault();}if(e.keyCode === 37) {$.state.keypress.left = isKeyDown;} if(e.keyCode === 38) {$.state.keypress.up = isKeyDown;} if(e.keyCode === 39) {$.state.keypress.right = isKeyDown;} if(e.keyCode === 40) {$.state.keypress.down = isKeyDown;}
}function randomRange(min, max) {return min + Math.random() * (max - min);
}function norm(value, min, max) {return (value - min) / (max - min);
}function lerp(norm, min, max) {return (max - min) * norm + min;
}function map(value, sourceMin, sourceMax, destMin, destMax) {return lerp(norm(value, sourceMin, sourceMax), destMin, destMax);
}function clamp(value, min, max) {return Math.min(Math.max(value, min), max);
}function drawBg() {$.ctx.fillStyle = $.colors.sky;$.ctx.fillRect(0, 0, $.canvas.width, $.settings.skySize);drawMountain(0, 60, 200);drawMountain(280, 40, 200);drawMountain(400, 80, 200);drawMountain(550, 60, 200);$.storage.bg = $.ctx.getImageData(0, 0, $.canvas.width, $.canvas.height);
}function drawMountain(pos, height, width) {$.ctx.fillStyle = $.colors.mountains;$.ctx.strokeStyle = $.colors.mountains;$.ctx.lineJoin = "round";$.ctx.lineWidth = 20;$.ctx.beginPath();$.ctx.moveTo(pos, $.settings.skySize);$.ctx.lineTo(pos + (width / 2), $.settings.skySize - height);$.ctx.lineTo(pos + width, $.settings.skySize);$.ctx.closePath();$.ctx.stroke();$.ctx.fill();
}function drawSky() {$.ctx.fillStyle = $.colors.sky;$.ctx.fillRect(0, 0, $.canvas.width, $.settings.skySize);
}function drawRoad(min, max, squishFactor, color) {var basePos = $.canvas.width + $.state.xpos;$.ctx.fillStyle = color;$.ctx.beginPath();$.ctx.moveTo(((basePos + min) / 2) - ($.state.currentCurve * 3), $.settings.skySize);$.ctx.quadraticCurveTo((((basePos / 2) + min)) + ($.state.currentCurve / 3) + squishFactor, $.settings.skySize + 52, (basePos + max) / 2, $.canvas.height);$.ctx.lineTo((basePos - max) / 2, $.canvas.height);$.ctx.quadraticCurveTo((((basePos / 2) - min)) + ($.state.currentCurve / 3) - squishFactor, $.settings.skySize + 52, ((basePos - min) / 2) - ($.state.currentCurve * 3), $.settings.skySize);$.ctx.closePath();$.ctx.fill();
}function drawCar() {var carWidth = 160,carHeight = 50,carX = ($.canvas.width / 2) - (carWidth / 2),carY = 320;roundedRect($.ctx, "rgba(0, 0, 0, 0.35)", carX - 1 + $.state.turn, carY + (carHeight - 35), carWidth + 10, carHeight, 9);roundedRect($.ctx, "#111", carX, carY + (carHeight - 30), 30, 40, 6);roundedRect($.ctx, "#111", (carX - 22) + carWidth, carY + (carHeight - 30), 30, 40, 6);drawCarBody($.ctx);
}function drawCarBody(ctx) {var startX = 299, startY = 311,lights = [10, 26, 134, 152],lightsY = 0;roundedRect($.ctx, "#C2C2C2", startX + 6 + ($.state.turn * 1.1), startY - 18, 146, 40, 18);ctx.beginPath(); ctx.lineWidth="12";ctx.fillStyle="#FFFFFF";ctx.strokeStyle="#FFFFFF";ctx.moveTo(startX + 30, startY);ctx.lineTo(startX + 46 + $.state.turn, startY - 25);ctx.lineTo(startX + 114 + $.state.turn, startY - 25);ctx.lineTo(startX + 130, startY);ctx.fill();ctx.stroke();/* END: Front */ctx.lineWidth="12";ctx.lineCap = 'round';ctx.beginPath(); ctx.fillStyle="#DEE0E2";ctx.strokeStyle="#DEE0E2";ctx.moveTo(startX + 2, startY + 12 + ($.state.turn * 0.2));ctx.lineTo(startX + 159, startY + 12 + ($.state.turn * 0.2));ctx.quadraticCurveTo(startX + 166, startY + 35, startX + 159, startY + 55 + ($.state.turn * 0.2));ctx.lineTo(startX + 2, startY + 55 - ($.state.turn * 0.2));ctx.quadraticCurveTo(startX - 5, startY + 32, startX + 2, startY + 12 - ($.state.turn * 0.2));ctx.fill();ctx.stroke();ctx.beginPath(); ctx.lineWidth="12";ctx.fillStyle="#DEE0E2";ctx.strokeStyle="#DEE0E2";ctx.moveTo(startX + 30, startY);ctx.lineTo(startX + 40 + ($.state.turn * 0.7), startY - 15);ctx.lineTo(startX + 120 + ($.state.turn * 0.7), startY - 15);ctx.lineTo(startX + 130, startY);ctx.fill();ctx.stroke();roundedRect(ctx, "#474747", startX - 4, startY, 169, 10, 3, true, 0.2);roundedRect(ctx, "#474747", startX + 40, startY + 5, 80, 10, 5, true, 0.1);ctx.fillStyle = "#FF9166";lights.forEach(function(xPos) {ctx.beginPath();ctx.arc(startX + xPos, startY + 20 + lightsY, 6, 0, Math.PI*2, true); ctx.closePath();ctx.fill();lightsY += $.state.turn * 0.05;});ctx.lineWidth="9";ctx.fillStyle="#222222";ctx.strokeStyle="#444";roundedRect($.ctx, "#FFF", startX + 60, startY + 25, 40, 18, 3, true, 0.05);
}function roundedRect(ctx, color, x, y, width, height, radius, turn, turneffect) {var skew = turn === true ? $.state.turn * turneffect : 0;ctx.fillStyle = color;ctx.beginPath();ctx.moveTo(x + radius, y - skew);ctx.lineTo(x + width - radius, y + skew);ctx.arcTo(x + width, y + skew, x + width, y + radius + skew, radius);ctx.lineTo(x + width, y + radius + skew);ctx.lineTo(x + width, (y + height + skew) - radius);ctx.arcTo(x + width, y + height + skew, (x + width) - radius, y + height + skew, radius);ctx.lineTo((x + width) - radius, y + height + skew);ctx.lineTo(x + radius, y + height - skew);ctx.arcTo(x, y + height - skew, x, (y + height - skew) - radius, radius);ctx.lineTo(x, (y + height - skew) - radius);ctx.lineTo(x, y + radius - skew);ctx.arcTo(x, y - skew, x + radius, y - skew, radius);ctx.lineTo(x + radius, y - skew);ctx.fill();
}function drawGround(ctx, offset, lightColor, darkColor, width) {var pos = ($.settings.skySize - $.settings.ground.min) + offset, stepSize = 1, drawDark = $.state.startDark, firstRow = true;ctx.fillStyle = lightColor;ctx.fillRect(0, $.settings.skySize, width, $.settings.ground.size);ctx.fillStyle =  darkColor;while(pos <= $.canvas.height) {stepSize = norm(pos, $.settings.skySize, $.canvas.height) * $.settings.ground.max;if(stepSize < $.settings.ground.min) {stepSize = $.settings.ground.min;}if(drawDark) {if(firstRow) {ctx.fillRect(0, $.settings.skySize, width, stepSize - (offset > $.settings.ground.min ? $.settings.ground.min : $.settings.ground.min - offset));} else {ctx.fillRect(0, pos < $.settings.skySize ? $.settings.skySize : pos, width, stepSize);}}firstRow = false;pos += stepSize;drawDark = !drawDark;}
}
CSS源码：
（1）normalize.css
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}
（2）style.css
body {background-color: #F8F3A9;margin: 0;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;min-height: 100vh;
}canvas {border-radius: .4em;
}

二：吉普车动画演示

运行效果：动态动画演示
在这里插入图片描述

HTML源码：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>吉普车动画演示</title><style>
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style>
@charset "utf-8";body, html {height: 100%;
}body {background: rgb(209,228,234);background: -moz-radial-gradient(center, ellipse cover,  rgba(209,228,234,1) 0%, rgba(186,228,244,1) 100%);background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(209,228,234,1)), color-stop(100%,rgba(186,228,244,1)));background: -webkit-radial-gradient(center, ellipse cover,  rgba(209,228,234,1) 0%,rgba(186,228,244,1) 100%);background: -o-radial-gradient(center, ellipse cover,  rgba(209,228,234,1) 0%,rgba(186,228,244,1) 100%);background: -ms-radial-gradient(center, ellipse cover,  rgba(209,228,234,1) 0%,rgba(186,228,244,1) 100%);background: radial-gradient(ellipse at center,  rgba(209,228,234,1) 0%,rgba(186,228,244,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1e4ea', endColorstr='#bae4f4',GradientType=1 );padding:0;margin:0;
}
.country-wrap {position:relative;width:100%;height:100%;overflow:hidden;
}
.push-bottom {position:absolute;bottom:0;height:100%;
}
.bottom-ground {background:#8d773e;width:102%;left:-1%;height:60px;bottom:0;position:absolute;box-shadow:0 2px 3px rgba(0,0,0,0.2) inset;
}
.street {background:#7a7a7a	 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==);height:80px;width:102%;position:absolute;bottom:0;box-shadow:0 1px 16px rgba(111, 35, 51, 0.4) inset;
}
.street:after {content:'';display:block;position:absolute;width:100%;height:10px;background:#cdbcb4;bottom:0;border-bottom:3px solid #72625a;z-index:1;
}
.street:before {content:'';display:block;position:absolute;width:100%;height:7px;background:#c2a99d;bottom:-7px;z-index:1;
}.street-stripe {background:#d4d4d4;height:8px;width:100px;position:absolute;bottom:44px;border-radius:2px;box-shadow:200px 0 0 #d4d4d4, 400px 0 0 #d4d4d4 , 600px 0 0 #d4d4d4 , 800px 0 0 #d4d4d4 , 1000px 0 0 #d4d4d4 , 1200px 0 0 #d4d4d4 , 1400px 0 0 #d4d4d4 , 1600px 0 0 #d4d4d4 , 1800px 0 0 #d4d4d4 , 2000px 0 0 #d4d4d4;
}
.grass {height: 40px;width: 100%;background-color: #dbcac2;position:absolute;bottom:60px;
}
.grass:before {position: absolute;content: '';top: 14px;left: 0;height: 8px;width: 100%;background-color: #b99f93;
}
.grass:after {position: absolute;content: '';top: -4px;left: 0;width: 100%;height: 8px;background-color: #0aa;background: linear-gradient(135deg, transparent 25%, #0aa 25%);background-size:10px 10px;
}
.sun {background:#ff9944;width:40px;height:40px;border-radius:50%;box-shadow:0 0 50px rgba(255,153,68,0.7);position:absolute;left:49%;bottom:350px;
}
.tree-1 {position:absolute;z-index:2;bottom:210px;right:10px;width:50px;height:100px;}
.trunk {width:20%;height:30%;background:brown;
}
.branch {position:abslute;width:60%;height:30%;background:green;-moz-transform:rotate(45deg);border-radius:0 0 100% 0;
}
.branch-1 {border:50px solid;border-bottom:90px solid;border-color:transparent transparent #a5894a transparent;height: 0;width: 0;position:absolute;left:-50px;top:-70px;
}
.branch-2 {border-bottom: 40px solid #9d8346;border-left: 30px solid transparent;border-right: 30px solid transparent;height: 0;width: 100px;position:absolute;top:60px;left:-80px;
}
.branch-3 {border-bottom: 50px solid #90713b;border-left: 40px solid transparent;border-right: 40px solid transparent;height: 0;width: 100px;position:absolute;top:100px;left:-90px;
}
.mountain-1 {background:#cea392;width:500px;height:500px;position:absolute;-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);bottom:-150px;border-radius:40px;
}
.mountain-2 {background:#e4dbd2;width:800px;height:800px;position:absolute;-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);bottom:-350px;border-radius:40px;left:250px;z-index:-1;box-shadow: 0 0 25px #e4dbd2;opacity:0.6;
}
.la {position: absolute;bottom: 200px;width: 2px;height: 50px;background: $cd;margin-right: 20px;
}.la:before {top: 5px;left: -10px;width: 22px;height: 2px;background: $cd;
}.la:after {bottom: 0;left: -2px;width: 6px;height: 12px;background: $cd;
}.l {position: absolute;width: 5px;height: 5px;border-radius: 50%;background: #fff;box-shadow: 0 0 10px #fff, 0 0 25px #fff, 0 0 50px #fff;
}.l:nth-child(1) { left: -10px; }
.l:nth-child(2) { right: -10px; }
.car {position:absolute;top:-35%;z-index:10;
-moz-animation:myfirst 10s  linear infinite;
-webkit-animation:myfirst 10s  linear infinite;
}
@-moz-keyframes myfirst 
{0%   {left:-25%;}100% {left:100%;}
} 
@-webkit-keyframes myfirst
{0%   {left:-25%;}100% {left:100%;}
} 
.tyre {width:30px;height:30px;border-radius:50%;background:#3f3f40;position:absolute;z-index:2;left:9px;top:20px;
-moz-animation:tyre-rotate 1s infinite linear;-webkit-animation:tyre-rotate 1s infinite linear;
}
@-moz-keyframes tyre-rotate {
from{-moz-transform:rotate(-360deg);}
to{-moz-transform:rotate(0deg);}}
@-webkit-keyframes tyre-rotate {
from{-webkit-transform:rotate(-360deg);}
to{-webkit-transform:rotate(0deg);}}
.tyre:before {content:'';width:20px;height:20px;border-radius:50%;background:#bdc2bd;position:absolute;top:5px;left:5px;
}
.gap {background:#3f3f40;width:2px;height:4px;position:absolute;left:14px;top:8px;box-shadow:0 9px 0 #3f3f40;
}
.gap:before {content:'';display:block;width:2px;height:4px;position:absolute;background:#3f3f40;box-shadow:0 12px 0 #3f3f40;-webkit-transform:rotate(-90deg);-webkit-transform-origin:0 7px;-moz-transform:rotate(-90deg);-moz-transform-origin:0 7px;z-index:3;
}
.car-base {position:absolute;display:block;width: 125px;height: 30px;background:#000000;border-radius:  10% 10% 50% 50% / 60% 100% 20% 10%;-webkit-transform:rotate(-2deg);-moz-transform:rotate(-2deg);border:solid;border-color:#000000;
}
.back-bonet {background:  #4c4b4b;border-radius: 54% 25% 0 0;height: 22px;left: 11px;position: absolute;top: 8px;width: 40px;
}
.tyre.front {left:94px;
}
.car-body {border-bottom: 24px solid #d1352b;height: 0;top:10px;width: 120px;position:relative;
}
.car-body:before {content:'';display:inline-block;width:30px;height:24px;position:absolute;right:-5px;background:#d1352b;border-top-right-radius:4px;z-index:1;
}
.car-body:after {content:'';display:inline-block;width:121px;border-bottom: 1px solid #942b25;border-right: 2px solid transparent;height: 0;z-index:2;position:absolute;
}
.car-gate {width:32px;height:20px;background:#d1352b;border-radius:0 0 2px 8px / 0 0 2px 8px;box-shadow:0 0 0 1px #892924;position:absolute;left:48px;}
.car-gate:before {content:'';width:8px;height:2px;background:#4c4b4b;position:absolute;top:2px;left:4px;box-shadow:1px 1px 1px rgba(0,0,0,0.1);
}
.car-top-back {background: none repeat scroll 0 0 #4C4B4B;border-radius: 5px 0 0 0;height: 20px;left: 4px;position: absolute;top: -20px;width: 58px;
}
.car-top-back:before {width:30px;height:15px;background:#736f6f;content:'';position:absolute;top:3px;left:8px;border-radius:2px;
}
.car-top-back:after {content:'';background:#4c4b4b;border-radius:  30%;height: 5px;left: 3px;position: absolute;top: -1px;width: 62px;
}
.car-top-front {top:-19px;position:absolute;left:47px;width:20px;height:20px;background:#dc4630;border-left: 1px solid #892924;border-radius: 2px 0 0 0;}
.car-top-front:after {width:26px;height:20px;-webkit-transform:skew(37deg);-moz-transform:skew(37deg);background:#dc4630;content:'';position:absolute;top:0;left:6px;border-radius:4px 0 4px 4px;
}
.car-top-front:before {width:12px;height:5px;background:#dc4630;content:'';position:absolute;top:14px;left:28px;z-index:1;border:solid #a82e27;border-width:0 1px 1px 0;
}
.wind-sheild {top:3px;left:3px;position:absolute;z-index:3;width:18px;height:12px;background:#f5e7e7;border-radius:0 3px 0 0;
}
.wind-sheild:after {width:12px;height:12px;-webkit-transform:skew(25deg);-moz-transform:skew(25deg);background:#f5e7e7;content:'';position:absolute;top:0;left:10px;border-radius:3px;
}
.boundary-tyre-cover {position:absolute;top:14px; left:10px;border-bottom: 20px solid #4c4b4b;border-right: 10px solid transparent;height:0;width:20px;
}
.boundary-tyre-cover:before {content:'';position:absolute;display:inline-block;background:#4c4b4b;height:20px;width:15px;-webkit-transform:skewX(-20deg);-moz-transform:skewX(-20deg);border-radius:3px;left:-6px;top:0;
}
.boundary-tyre-cover:after {content:'';position:absolute;display:inline-block;background:#4c4b4b;height:20px;width:20px;-webkit-transform:skewx(40deg);-moz-transform:skewX(40deg);border-radius:3px;right:-14px;top:0;
}
.boundary-tyre-cover-inner {position:absolute;top:4px; left:4px;border-bottom: 16px solid black;border-right: 10px solid transparent;height:0;width:15px;z-index:2;
}
.boundary-tyre-cover-inner:before {content:'';position:absolute;display:inline-block;background:black;height:16px;width:15px;-webkit-transform:skewX(-20deg);-moz-transform:skewX(-20deg);border-radius:3px 3px 0 0;left:-6px;top:0;
}
.boundary-tyre-cover-inner:after {content:'';position:absolute;display:inline-block;background:black;height:16px;width:20px;-webkit-transform:skewx(40deg);-moz-transform:skewX(40deg);border-radius:3px 3px 0 0;right:-11px;top:0;
}
.boundary-tyre-cover-back-bottom {position: absolute;width: 14px;height: 8px;background: #4c4b4b;top: 12px;left: -19px;
}
.bonet-front {background: #d1352b;border-radius: 5px 258px 0 38px / 36px 50px 0 0;height: 4px;position: absolute;right: 0;top: -4px;width: 40px;z-index: 0;
}
.back-curve {background: none repeat scroll 0 0 #4C4B4B;border-radius: 960% 100% 0 0;height: 20px;left: -3px;position: absolute;top: 1px;transform: rotate(6deg);width: 5px;
}
.stepney {height: 6px;left: -4px;position: absolute;top: 6px;width: 8px;z-index: -1;background:#3f3f40;
}
.stepney:before {width:8px;height:12px;background:#3f3f40;content:'';position:absolute;top:-10px;left:-7px;border-radius:3px 3px 0 0;
}
.stepney:after {width:8px;height:12px;background:#0d0c0d;content:'';position:absolute;top:0px;left:-7px;border-radius:0 0 3px 3px;
}
.tyre-cover-front {background:#4c4b4b;height: 4px;left: 97px;position: absolute;top: 13px;width: 22px;z-index: 1;
}
.tyre-cover-front:before {background: none repeat scroll 0 0 #4c4b4b;content: "";display: inline-block;height: 21px;left: -10px;position: absolute;top: 0;transform: skewX(-30deg);width: 10px;z-index: 6;border-radius:4px 0 0 0;
}
.tyre-cover-front:after {background: none repeat scroll 0 0 #4c4b4b;content: "";display: inline-block;height: 6px;left: 14px;position: absolute;top: 0;transform: skewX(30deg);width: 17px;z-index: 6;border-radius:0 4px 2px 0;
}
.boundary-tyre-cover-inner-front {position:absolute;top:4px; left:4px;border-bottom: 16px solid black;border-right: 10px solid transparent;height:0;width:15px;z-index:7;
}
.boundary-tyre-cover-inner-front:before {background: none repeat scroll 0 0 #000000;border-radius: 3px 3px 0 0;content: "";display: inline-block;height: 17px;left: -10px;position: absolute;top: 0;transform: skewX(-30deg);width: 15px;
}
.boundary-tyre-cover-inner-front:after {content:'';position:absolute;display:inline-block;background:black;height:16px;width:20px;-webkit-transform:skewx(25deg);-moz-transform:skewX(25deg);border-radius:3px 3px 0 0;right:-12px;top:0;
}
.base-axcel {background: none repeat scroll 0 0 black;bottom: -15px;height: 10px;left: 30px;position: absolute;transform: rotate(-2deg);width: 70px;z-index:-1;
}
.base-axcel:before {background: none repeat scroll 0 0 black;border-radius: 0 0 0 10px / 0 0 0 5px;content: "";height: 10px;left: -35px;position: absolute;top: -2px;transform: rotate(6deg);width: 30px;	
}
.base-axcel:after {background: none repeat scroll 0 0 black;border-radius: 0 0 0 10px / 0 0 0 5px;content: "";height: 10px;right: -33px;position: absolute;top: -1px;transform: rotate(-4deg);width: 40px;border-radius:0 10px 5px 0;	
}
.front-bumper {background: none repeat scroll 0 0 #4c4b4b;border-radius: 0 2px 2px 0;height: 8px;position: absolute;right: -15px;width: 11px;z-index: 1;-moz-transform:rotate(-5deg);-webkit-transform:rotate(-5deg);
}
.front-bumper:before {background: none repeat scroll 0 0 #000000;content: "";height: 10px;left: -7px;position: absolute;transform: rotate(-22deg);width: 9px;z-index: 1;
}
.car-shadow {background: none repeat scroll 0 0 rgba(0, 0, 0, 0);bottom: -15px;box-shadow: -5px 10px 15px 3px #000000;left: -7px;position: absolute;width: 136px;
}.noise {position: relative;z-index: 1;}.noise:before, .body-noise:before {content: "";position: absolute;z-index: -1;top:0;bottom:0;left:0;right:0;background-image: url(data:image/png;base64,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);}
.hill {position: absolute;bottom: 0;right: 0;width: 100%;height: 250px;border-top-right-radius: 160%;border-top-left-radius: 100%;background-color: #adde60;z-index:-1;
}
.hill:after {content: '';position: absolute;bottom: -100px;right: -400px; width: 120%;height: 110%;border-top-right-radius: 100%;border-top-left-radius: 0%;background-color: #94c943;-moz-transform:rotate(-12deg);-webkit-transform:rotate(-12deg);box-shadow:0 0 25px #cbf191 inset;
}
.hill:before {background-color: #93cc3a;border-top-left-radius: 0;border-top-right-radius: 100%;bottom: -70px;content: "";height: 110%;left: -54px;position: absolute;transform: rotate(4deg);width: 120%;
}
.cloud {background:#fff;width:150px;height:50px;border-radius:50px;position:absolute;left:450px;top:150px;
}
.cloud:before {width:100px;height:100px;content:'';position:absolute;bottom:0;left:-15px;border-radius:50px;box-shadow:100px 0 0 #fff;background:#fff;
}
</style><script src="js/prefixfree.min.js"></script></head><body><div class="country-wrap">
<div style="text-align:center;clear:both">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div><div class="sun"></div><div class="grass"></div><div class="street"><div class="car"><div class="car-body"><div class="car-top-back"><div class="back-curve"></div></div><div class="car-gate"></div><div class="car-top-front"><div class="wind-sheild"></div></div><div class="bonet-front"></div><div class="stepney"></div></div><div class="boundary-tyre-cover"><div class="boundary-tyre-cover-back-bottom"></div><div class="boundary-tyre-cover-inner"></div>	</div><div class="tyre-cover-front"><div class="boundary-tyre-cover-inner-front"></div></div><div class="base-axcel"></div><div class="front-bumper"></div><div class="tyre">		<div class="gap"></div>	</div><div class="tyre front"><div class="gap"></div>	</div><div class="car-shadow"></div></div></div><div class="street-stripe"></div><div class="hill"></div></div><script src='js/jquery.js'></script></body></html>
CSS源码：
（1）reset.css
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
（2）style.css
@charset "utf-8";
body, html {height: 100%;
}body {background: rgb(209,228,234);
background: -moz-radial-gradient(center, ellipse cover,  rgba(209,228,234,1) 0%, rgba(186,228,244,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(209,228,234,1)), color-stop(100%,rgba(186,228,244,1)));
background: -webkit-radial-gradient(center, ellipse cover,  rgba(209,228,234,1) 0%,rgba(186,228,244,1) 100%);
background: -o-radial-gradient(center, ellipse cover,  rgba(209,228,234,1) 0%,rgba(186,228,244,1) 100%);
background: -ms-radial-gradient(center, ellipse cover,  rgba(209,228,234,1) 0%,rgba(186,228,244,1) 100%);
background: radial-gradient(ellipse at center,  rgba(209,228,234,1) 0%,rgba(186,228,244,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1e4ea', endColorstr='#bae4f4',GradientType=1 );padding:0;margin:0;
}
.country-wrap {position:relative;width:100%;height:100%;overflow:hidden;
}
.push-bottom {position:absolute;bottom:0;height:100%;
}
.bottom-ground {background:#8d773e;width:102%;left:-1%;height:60px;bottom:0;position:absolute;box-shadow:0 2px 3px rgba(0,0,0,0.2) inset;
}
.street {background:#7a7a7a	 url(data:image/png;base64,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);height:80px;width:102%;position:absolute;bottom:0;box-shadow:0 1px 16px rgba(111, 35, 51, 0.4) inset;
}
.street:after {content:'';display:block;position:absolute;width:100%;height:10px;background:#cdbcb4;bottom:0;border-bottom:3px solid #72625a;z-index:1;
}
.street:before {content:'';display:block;position:absolute;width:100%;height:7px;background:#c2a99d;bottom:-7px;z-index:1;
}.street-stripe {background:#d4d4d4;height:8px;width:100px;position:absolute;bottom:44px;border-radius:2px;box-shadow:200px 0 0 #d4d4d4, 400px 0 0 #d4d4d4 , 600px 0 0 #d4d4d4 , 800px 0 0 #d4d4d4 , 1000px 0 0 #d4d4d4 , 1200px 0 0 #d4d4d4 , 1400px 0 0 #d4d4d4 , 1600px 0 0 #d4d4d4 , 1800px 0 0 #d4d4d4 , 2000px 0 0 #d4d4d4;
}
.grass {height: 40px;width: 100%;background-color: #dbcac2;position:absolute;bottom:60px;
}
.grass:before {position: absolute;content: '';top: 14px;left: 0;height: 8px;width: 100%;background-color: #b99f93;
}
.grass:after {position: absolute;content: '';top: -4px;left: 0;width: 100%;height: 8px;background-color: #0aa;background: linear-gradient(135deg, transparent 25%, #0aa 25%);background-size:10px 10px;
}
.sun {background:#ff9944;width:40px;height:40px;border-radius:50%;box-shadow:0 0 50px rgba(255,153,68,0.7);position:absolute;left:49%;bottom:350px;
}
.tree-1 {position:absolute;z-index:2;bottom:210px;right:10px;width:50px;height:100px;}
.trunk {width:20%;height:30%;background:brown;
}
.branch {position:abslute;width:60%;height:30%;background:green;-moz-transform:rotate(45deg);border-radius:0 0 100% 0;
}
.branch-1 {border:50px solid;border-bottom:90px solid;border-color:transparent transparent #a5894a transparent;height: 0;width: 0;position:absolute;left:-50px;top:-70px;
}
.branch-2 {border-bottom: 40px solid #9d8346;border-left: 30px solid transparent;border-right: 30px solid transparent;height: 0;width: 100px;position:absolute;top:60px;left:-80px;
}
.branch-3 {border-bottom: 50px solid #90713b;border-left: 40px solid transparent;border-right: 40px solid transparent;height: 0;width: 100px;position:absolute;top:100px;left:-90px;
}
.mountain-1 {background:#cea392;width:500px;height:500px;position:absolute;-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);bottom:-150px;border-radius:40px;
}
.mountain-2 {background:#e4dbd2;width:800px;height:800px;position:absolute;-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);bottom:-350px;border-radius:40px;left:250px;z-index:-1;box-shadow: 0 0 25px #e4dbd2;opacity:0.6;
}
.la {position: absolute;bottom: 200px;width: 2px;height: 50px;background: $cd;margin-right: 20px;
}.la:before {top: 5px;left: -10px;width: 22px;height: 2px;background: $cd;
}.la:after {bottom: 0;left: -2px;width: 6px;height: 12px;background: $cd;
}.l {position: absolute;width: 5px;height: 5px;border-radius: 50%;background: #fff;box-shadow: 0 0 10px #fff, 0 0 25px #fff, 0 0 50px #fff;
}.l:nth-child(1) { left: -10px; }
.l:nth-child(2) { right: -10px; }
/*styles for car*/
.car {position:absolute;top:-35%;z-index:10;
-moz-animation:myfirst 10s  linear infinite;
-webkit-animation:myfirst 10s  linear infinite;
}
@-moz-keyframes myfirst 
{0%   {left:-25%;}100% {left:100%;}
} 
@-webkit-keyframes myfirst
{0%   {left:-25%;}100% {left:100%;}
} 
.tyre {width:30px;height:30px;border-radius:50%;background:#3f3f40;position:absolute;z-index:2;left:9px;top:20px;
-moz-animation:tyre-rotate 1s infinite linear;-webkit-animation:tyre-rotate 1s infinite linear;
}
@-moz-keyframes tyre-rotate {
from{-moz-transform:rotate(-360deg);}
to{-moz-transform:rotate(0deg);}}
@-webkit-keyframes tyre-rotate {
from{-webkit-transform:rotate(-360deg);}
to{-webkit-transform:rotate(0deg);}}
.tyre:before {content:'';width:20px;height:20px;border-radius:50%;background:#bdc2bd;position:absolute;top:5px;left:5px;
}
.gap {background:#3f3f40;width:2px;height:4px;position:absolute;left:14px;top:8px;box-shadow:0 9px 0 #3f3f40;
}
.gap:before {content:'';display:block;width:2px;height:4px;position:absolute;background:#3f3f40;box-shadow:0 12px 0 #3f3f40;-webkit-transform:rotate(-90deg);-webkit-transform-origin:0 7px;-moz-transform:rotate(-90deg);-moz-transform-origin:0 7px;z-index:3;
}
.car-base {position:absolute;display:block;width: 125px;height: 30px;background:#000000;border-radius:  10% 10% 50% 50% / 60% 100% 20% 10%;-webkit-transform:rotate(-2deg);-moz-transform:rotate(-2deg);border:solid;border-color:#000000;
}
.back-bonet {background:  #4c4b4b;border-radius: 54% 25% 0 0;height: 22px;left: 11px;position: absolute;top: 8px;width: 40px;
}
.tyre.front {left:94px;
}
.car-body {/*width:125px;height:24px;background:#d1352b;border-top:1px solid #a82e27;*/border-bottom: 24px solid #d1352b;height: 0;top:10px;width: 120px;position:relative;
}
.car-body:before {content:'';display:inline-block;width:30px;height:24px;position:absolute;right:-5px;background:#d1352b;border-top-right-radius:4px;z-index:1;
}
.car-body:after {content:'';display:inline-block;width:121px;border-bottom: 1px solid #942b25;border-right: 2px solid transparent;height: 0;z-index:2;position:absolute;
}
.car-gate {width:32px;height:20px;background:#d1352b;border-radius:0 0 2px 8px / 0 0 2px 8px;box-shadow:0 0 0 1px #892924;position:absolute;left:48px;}
.car-gate:before {content:'';width:8px;height:2px;background:#4c4b4b;position:absolute;top:2px;left:4px;box-shadow:1px 1px 1px rgba(0,0,0,0.1);
}
.car-top-back {background: none repeat scroll 0 0 #4C4B4B;border-radius: 5px 0 0 0;height: 20px;left: 4px;position: absolute;top: -20px;width: 58px;
}
.car-top-back:before {width:30px;height:15px;background:#736f6f;content:'';position:absolute;top:3px;left:8px;border-radius:2px;
}
.car-top-back:after {content:'';background:#4c4b4b;border-radius:  30%;height: 5px;left: 3px;position: absolute;top: -1px;width: 62px;
}
.car-top-front {top:-19px;position:absolute;left:47px;width:20px;height:20px;background:#dc4630;border-left: 1px solid #892924;border-radius: 2px 0 0 0;}
.car-top-front:after {width:26px;height:20px;-webkit-transform:skew(37deg);-moz-transform:skew(37deg);background:#dc4630;content:'';position:absolute;top:0;left:6px;border-radius:4px 0 4px 4px;
}
.car-top-front:before {width:12px;height:5px;background:#dc4630;content:'';position:absolute;top:14px;left:28px;z-index:1;border:solid #a82e27;border-width:0 1px 1px 0;
}
.wind-sheild {top:3px;left:3px;position:absolute;z-index:3;width:18px;height:12px;background:#f5e7e7;border-radius:0 3px 0 0;
}
.wind-sheild:after {width:12px;height:12px;-webkit-transform:skew(25deg);-moz-transform:skew(25deg);background:#f5e7e7;content:'';position:absolute;top:0;left:10px;border-radius:3px;
}
.boundary-tyre-cover {position:absolute;top:14px; left:10px;border-bottom: 20px solid #4c4b4b;border-right: 10px solid transparent;height:0;width:20px;
}
.boundary-tyre-cover:before {content:'';position:absolute;display:inline-block;background:#4c4b4b;height:20px;width:15px;-webkit-transform:skewX(-20deg);-moz-transform:skewX(-20deg);border-radius:3px;left:-6px;top:0;
}
.boundary-tyre-cover:after {content:'';position:absolute;display:inline-block;background:#4c4b4b;height:20px;width:20px;-webkit-transform:skewx(40deg);-moz-transform:skewX(40deg);border-radius:3px;right:-14px;top:0;
}
.boundary-tyre-cover-inner {position:absolute;top:4px; left:4px;border-bottom: 16px solid black;border-right: 10px solid transparent;height:0;width:15px;z-index:2;
}
.boundary-tyre-cover-inner:before {content:'';position:absolute;display:inline-block;background:black;height:16px;width:15px;-webkit-transform:skewX(-20deg);-moz-transform:skewX(-20deg);border-radius:3px 3px 0 0;left:-6px;top:0;
}
.boundary-tyre-cover-inner:after {content:'';position:absolute;display:inline-block;background:black;height:16px;width:20px;-webkit-transform:skewx(40deg);-moz-transform:skewX(40deg);border-radius:3px 3px 0 0;right:-11px;top:0;
}
.boundary-tyre-cover-back-bottom {position: absolute;width: 14px;height: 8px;background: #4c4b4b;top: 12px;left: -19px;
}
.bonet-front {background: #d1352b;border-radius: 5px 258px 0 38px / 36px 50px 0 0;height: 4px;position: absolute;right: 0;top: -4px;width: 40px;z-index: 0;
}
.back-curve {background: none repeat scroll 0 0 #4C4B4B;border-radius: 960% 100% 0 0;height: 20px;left: -3px;position: absolute;top: 1px;transform: rotate(6deg);width: 5px;
}
.stepney {height: 6px;left: -4px;position: absolute;top: 6px;width: 8px;z-index: -1;background:#3f3f40;
}
.stepney:before {width:8px;height:12px;background:#3f3f40;content:'';position:absolute;top:-10px;left:-7px;border-radius:3px 3px 0 0;
}
.stepney:after {width:8px;height:12px;background:#0d0c0d;content:'';position:absolute;top:0px;left:-7px;border-radius:0 0 3px 3px;
}
.tyre-cover-front {background:#4c4b4b;height: 4px;left: 97px;position: absolute;top: 13px;width: 22px;z-index: 1;
}
.tyre-cover-front:before {background: none repeat scroll 0 0 #4c4b4b;content: "";display: inline-block;height: 21px;left: -10px;position: absolute;top: 0;transform: skewX(-30deg);width: 10px;z-index: 6;border-radius:4px 0 0 0;
}
.tyre-cover-front:after {background: none repeat scroll 0 0 #4c4b4b;content: "";display: inline-block;height: 6px;left: 14px;position: absolute;top: 0;transform: skewX(30deg);width: 17px;z-index: 6;border-radius:0 4px 2px 0;
}
.boundary-tyre-cover-inner-front {position:absolute;top:4px; left:4px;border-bottom: 16px solid black;border-right: 10px solid transparent;height:0;width:15px;z-index:7;
}
.boundary-tyre-cover-inner-front:before {background: none repeat scroll 0 0 #000000;border-radius: 3px 3px 0 0;content: "";display: inline-block;height: 17px;left: -10px;position: absolute;top: 0;transform: skewX(-30deg);width: 15px;
}
.boundary-tyre-cover-inner-front:after {content:'';position:absolute;display:inline-block;background:black;height:16px;width:20px;-webkit-transform:skewx(25deg);-moz-transform:skewX(25deg);border-radius:3px 3px 0 0;right:-12px;top:0;
}
.base-axcel {background: none repeat scroll 0 0 black;bottom: -15px;height: 10px;left: 30px;position: absolute;transform: rotate(-2deg);width: 70px;z-index:-1;
}
.base-axcel:before {background: none repeat scroll 0 0 black;border-radius: 0 0 0 10px / 0 0 0 5px;content: "";height: 10px;left: -35px;position: absolute;top: -2px;transform: rotate(6deg);width: 30px;	
}
.base-axcel:after {background: none repeat scroll 0 0 black;border-radius: 0 0 0 10px / 0 0 0 5px;content: "";height: 10px;right: -33px;position: absolute;top: -1px;transform: rotate(-4deg);width: 40px;border-radius:0 10px 5px 0;	
}
.front-bumper {background: none repeat scroll 0 0 #4c4b4b;border-radius: 0 2px 2px 0;height: 8px;position: absolute;right: -15px;width: 11px;z-index: 1;-moz-transform:rotate(-5deg);-webkit-transform:rotate(-5deg);
}
.front-bumper:before {background: none repeat scroll 0 0 #000000;content: "";height: 10px;left: -7px;position: absolute;transform: rotate(-22deg);width: 9px;z-index: 1;
}
.car-shadow {background: none repeat scroll 0 0 rgba(0, 0, 0, 0);bottom: -15px;box-shadow: -5px 10px 15px 3px #000000;left: -7px;position: absolute;width: 136px;
}
/*noise css*/.noise {position: relative;z-index: 1;}.noise:before, .body-noise:before {content: "";position: absolute;z-index: -1;top:0;bottom:0;left:0;right:0;background-image: url(data:image/png;base64,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);}
.hill {position: absolute;bottom: 0;right: 0;width: 100%;height: 250px;border-top-right-radius: 160%;border-top-left-radius: 100%;background-color: #adde60;z-index:-1;
}
.hill:after {content: '';position: absolute;bottom: -100px;right: -400px; width: 120%;height: 110%;border-top-right-radius: 100%;border-top-left-radius: 0%;background-color: #94c943;-moz-transform:rotate(-12deg);-webkit-transform:rotate(-12deg);box-shadow:0 0 25px #cbf191 inset;
}
.hill:before {background-color: #93cc3a;border-top-left-radius: 0;border-top-right-radius: 100%;bottom: -70px;content: "";height: 110%;left: -54px;position: absolute;transform: rotate(4deg);width: 120%;
}
.cloud {background:#fff;width:150px;height:50px;border-radius:50px;position:absolute;left:450px;top:150px;
}
.cloud:before {width:100px;height:100px;content:'';position:absolute;bottom:0;left:-15px;border-radius:50px;box-shadow:100px 0 0 #fff;background:#fff;
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/650389.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【时间序列篇】基于LSTM的序列分类-Pytorch实现 part1 案例复现

【时间序列篇】基于LSTM的序列分类-Pytorch实现 part1 案例复现

系列文章目录 【时间序列篇】基于LSTM的序列分类-Pytorch实现 part1 案例复现 【时间序列篇】基于LSTM的序列分类-Pytorch实现 part2 自有数据集构建 【时间序列篇】基于LSTM的序列分类-Pytorch实现 part3 化为己用 本篇文章是对已有一篇文章的整理归纳&#xff0c;并对文章中…
阅读更多...
HybridA* 论文解读

HybridA* 论文解读

本文旨在对原论文进行翻译&#xff0c;对混合A*有一个大概的理解 论文题目&#xff1a;Practical Search Techniques in Path Planning for Autonomous Driving 1 摘要 本文描述了一个实用的路径规划算法&#xff0c;无人驾驶汽车在未知的环境中&#xff0c;障碍物通过机器人…
阅读更多...
计算机毕业设计 | SSM 凌云招聘平台(附源码)

计算机毕业设计 | SSM 凌云招聘平台(附源码)

1&#xff0c;绪论 人力资源是企业产生效益、创造利润的必不可少的、最重要的资源。人作为人力资源的个体可看作是一个承载着有效知识、能力的信息单元。这样的信息单元可看作是一个为企业产生价值和利润的个体。从而使得这样的信息单元所具有的信息就是一个有价值的信息。 校…
阅读更多...
day34WEB 攻防-通用漏洞文件上传黑白盒审计逻辑中间件外部引用

day34WEB 攻防-通用漏洞文件上传黑白盒审计逻辑中间件外部引用

目录 一&#xff0c;白盒审计-Finecms-代码常规-处理逻辑 黑盒思路&#xff1a;寻找上传点抓包修改突破获取状态码及地址 审计流程&#xff1a;功能点-代码文件-代码块-抓包调试-验证测试 二&#xff0c;白盒审计-CuppaCms-中间件-.htaccess 三&#xff0c;白盒审计-Metin…
阅读更多...
银行数据仓库体系实践（11）--数据仓库开发管理系统及开发流程

银行数据仓库体系实践（11）--数据仓库开发管理系统及开发流程

数据仓库管理着整个银行或公司的数据&#xff0c;数据结构复杂&#xff0c;数据量庞大&#xff0c;任何一个数据字段的变化或错误都会引起数据错误&#xff0c;影响数据应用&#xff0c;同时业务的发展也带来系统不断升级&#xff0c;数据需求的不断增加&#xff0c;数据仓库需…
阅读更多...
adb测试冷启动和热启动 Permission Denial解决

adb测试冷启动和热启动 Permission Denial解决

先清理日志 adb shell logcat -c 打开手机模拟器中的去哪儿网&#xff0c;然后日志找到包名和MainActivity adb shell logcat |grep Main com.Qunar/com.mqunar.atom.alexhome.ui.activity.MainActivity 把手机模拟器的去哪儿的进程给杀掉 执行 命令 adb shell am start -W…
阅读更多...
专业133总分400+上海交通大学819考研经验分享上交819电子信息与通信工程

专业133总分400+上海交通大学819考研经验分享上交819电子信息与通信工程

今年专业819信号系统与信号处理133&#xff0c;总分400&#xff0c;如愿考上梦中上海交通大学&#xff0c;通过自己将近一年的复习&#xff0c;实现了人生中目前为止最大的逆袭&#xff08;自己本科学校很普通&#xff09;&#xff0c;总结自己的复习经历&#xff0c;希望可以给…
阅读更多...
苹果Arcade会员的交易开通

苹果Arcade会员的交易开通

arcade是苹果的游戏订阅服务&#xff0c;会员可以畅玩200多个苹果商店精品游戏&#xff0c;包括美区apple id绑卡apple tv购买内购游戏apple one、A2K、狂野飙8&#xff0c;同时ChatGPT也可以&#xff0c;并且这些游戏没有广告没有内购项目&#xff0c;可以在线玩也可以离线玩&…
阅读更多...
华为云WAF，开启web网站的专属反爬虫防护罩

华为云WAF，开启web网站的专属反爬虫防护罩

背景 从保护原创说起 作为一个原创技术文章分享博主&#xff0c;日常除了Codeing就是总结Codeing中的技术经验。 之前并没有对文章原创性的保护意识&#xff0c;直到在某个非入驻的平台看到了我的文章&#xff0c;才意识到&#xff0c;辛苦码字、为灵感反复试验创作出来的文…
阅读更多...
JavaScript模块系统入门教程

JavaScript模块系统入门教程

&#x1f9d1;‍&#x1f393; 个人主页&#xff1a;《爱蹦跶的大A阿》 &#x1f525;当前正在更新专栏&#xff1a;《VUE》 、《JavaScript保姆级教程》、《krpano》、《krpano中文文档》 ​ 目录 ✨ 前言 ✨ 正文 一、模块 (Module) 简介 什么是模块 导出与导入 默…
阅读更多...
QGIS编译（跨平台编译）之二十四：libbz2编译（Windows、Linux、MacOS环境下编译）

QGIS编译（跨平台编译）之二十四：libbz2编译（Windows、Linux、MacOS环境下编译）

文章目录 1、libbz2介绍2、文件下载3、Linux下编译4、MacOS下编译5、Windows下编译1、libbz2介绍 bzip2是一个基于Burrows-Wheeler 变换的无损压缩软件，压缩效果比传统的LZ77/LZ78压缩算法来得好。它是一款免费软件。可以自由分发免费使用。 bzip2能够进行高质量的数据压缩。…
阅读更多...
【代码随想录15】110.平衡二叉树 257. 二叉树的所有路径 404.左叶子之和

【代码随想录15】110.平衡二叉树 257. 二叉树的所有路径 404.左叶子之和

目录 110. 平衡二叉树题目描述参考代码 257. 二叉树的所有路径题目描述参考代码 404.左叶子之和题目描述参考代码 110. 平衡二叉树 题目描述 给定一个二叉树&#xff0c;判断它是否是高度平衡的二叉树。 本题中&#xff0c;一棵高度平衡二叉树定义为&#xff1a; 一个二叉树…
阅读更多...
AI数字人-数字人视频创作数字人直播效果媲美真人

AI数字人-数字人视频创作数字人直播效果媲美真人

在科技的不断革新下&#xff0c;数字人技术正日益融入到人们的生活中。近年来&#xff0c;随着AI技术的进一步发展&#xff0c;数字人视频创作领域出现了一种新的创新方式——AI数字人。数字人视频通过AI算法生成虚拟主播&#xff0c;其外貌、动作、语音等方面可与真实人类媲美…
阅读更多...
huggingface高速下载模型的实战代码

huggingface高速下载模型的实战代码

大家好，我是herosunly。985院校硕士毕业，现担任算法研究员一职，热衷于机器学习算法研究与应用。曾获得阿里云天池比赛第一名，CCF比赛第二名，科大讯飞比赛第三名。拥有多项发明专利。对机器学习和深度学习拥有自己独到的见解。曾经辅导过若干个非计算机专业的学生进入到算法…
阅读更多...
Neo4j 国内镜像下载与安装

Neo4j 国内镜像下载与安装

Neo4j 5.x 简体中文版指南 社区版&#xff1a;https://neo4j.com/download-center/#community 链接地址&#xff08;Linux版&#xff09;&#xff1a;https://neo4j.com/artifact.php?nameneo4j-community-3.5.13-unix.tar.gz 链接地址&#xff08;Windows&#xff09;&#x…
阅读更多...
蓝桥杯省赛无忧 编程13 肖恩的投球游戏

蓝桥杯省赛无忧 编程13 肖恩的投球游戏

#include <iostream> #include <vector> using namespace std; int main() {int n, q;cin >> n >> q;vector<int> a(n 1);vector<int> diff(n 2, 0); // 初始化差分数组// 读取初始球数&#xff0c;构建差分数组for (int i 1; i < …
阅读更多...
Go 从标准输入读取数据

Go 从标准输入读取数据

fmt.Scan系列 fmt.Scan函数定义如下&#xff1a; // Scan scans text read from standard input, storing successive space-separated values into successive arguments. // Newlines count as space. // It returns the number of items successfully scanned. // If tha…
阅读更多...
DS：单链表的实现（超详细！！）

DS：单链表的实现（超详细！！）

创作不易&#xff0c;友友们点个三连吧&#xff01; 在博主的上一篇文章中&#xff0c;很详细地介绍了顺序表实现的过程以及如何去书写代码&#xff0c;如果没看过的友友们建议先去看看哦&#xff01; DS&#xff1a;顺序表的实现&#xff08;超详细&#xff01;&#xff01;&…
阅读更多...
JAVA大学生兼职平台后台管理

JAVA大学生兼职平台后台管理

运行环境&#xff1a; tomcat7.0jdk1.7或以上 eclipse或idea 使用技术&#xff1a; springboot 功能描述&#xff1a; 求职人员 注册&#xff0c;登录 选定登录角色&#xff08;1、兼职人员2、发布兼职招聘人员&#xff09; 书写简历&#xff0c;上传学生证照片&#…
阅读更多...
力扣每日一题 ---- 1039. 多边形三角剖分的最低得分

力扣每日一题 ---- 1039. 多边形三角剖分的最低得分

这题的难点在哪部分呢&#xff0c;其实是怎么思考。这道题如果之前没做过类似的话&#xff0c;还是很难看出一些性质的&#xff0c;这题原本的话是没有图片把用例显示的这么详细的。这题中有个很隐晦的点没有说出来 剖出来的三角形是否有交叉&#xff0c;这题中如果加一个三角…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023