css实现出租车驾车行驶轨迹地图动画效果代码-html代码-BFW代码库

css实现出租车驾车行驶轨迹地图动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现出租车驾车行驶轨迹地图动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        body {
    	padding:0px;
    	margin:0px;
    	width:100%;
    	height:100vh;
    	background-color:#222f3e;
    }
    .map {
    	position:absolute;
    	width:455px;
    	height:455px;
    	top:50%;
    	left:50%;
    	transform:translate(-50%,-50%);
    	background-image:url('//repo.bfw.wiki/bfwrepo/image/62bd3df45f392.png');
    	background-size:cover;
    	background-repeat:no-repeat;
    	border:10px solid #ff6b6b;
    	box-shadow:0px 5px 10px rgba(0,0,0,.5);
    }
    .car {
    	width:80px;
    	height:40px;
    	background-image:url('//repo.bfw.wiki/bfwrepo/icon/62bd3e4304e6f.png');
    	background-size:cover;
    	background-repeat:no-repeat;
    	transform:scale(.4);
    	offset-path:path("M288.4,129.9l-26.6,4.3c-0.8,0.2-1.5,0.6-1.9,1.3l-18.2,26.6c-0.6,0.9-1.6,1.4-2.6,1.3l-78.2-4.9c-1.1-0.1-2.1-0.7-2.5-1.8l-25.6-60.9c-0.6-1.3-2-2-3.4-1.7l-24.7,6.5c-0.5,0.1-1,0.4-1.4,0.9l-56.1,63c-1.1,1.2-3.1,3.9-1.2,6l77.9,68.3c2.4,1.4,1.8,4.9,1.3,6.1l-26.6,59.7c-0.4,0.8-0.3,1.7,0.1,2.5l17.8,35.8l13.4,29.4c0.4,0.5,5.9,3.5,6.5,3.6l31.8,9l42,9.5c0.3-0.7,0.4-3.3,0.2-4.1l-20.2-56.6c-0.4-1.2-4.2-8.8-0.7-10.3l46.8-32.6l44.3-36.4c-0.2-3.1-1.5-6.8-1.9-8l-3-8.4c-0.6-2,1.1-4,3.2-3.7l109,14.4c1.3,0.2,2.6-0.5,3.1-1.7l7.8-18c0.5-1.2,0.2-2.6-0.8-3.4l-66.8-57.3l-39.9-37.7C290.2,130,289.3,129.8,288.4,129.9z");
    	animation:move 15s linear infinite;
    }
    .car:before,.car:after {
    	content:'';
    	width:10px;
    	height:10px;
    	position:absolute;
    	top:15px;
    	left:-5px;
    	border-radius:50%;
    	background-color:#000;
    	filter:blur(2px);
    }
    .car:before {
    	animation:carSmoke .5s linear infinite .7s;
    }
    .car:after {
    	animation:carSmoke .7s linear infinite;
    }
    @keyframes move {
    	100% {
    	offset-distance:100%;
    }
    }@keyframes c.........完整代码请登录后点击上方下载按钮下载查看