jquery+css实现公交车行驶在天气晴朗白云飘飘的城市道路上代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：jquery+css实现公交车行驶在天气晴朗白云飘飘的城市道路上代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        @import url("https://fonts.googleapis.com/css?family=Dancing+Script");
            body {
        	background:#fff7b0;
        	width:100%;
        	height:100vh;
        	margin:0;
        	padding:0;
        	position:relative;
        	-webkit-font-smoothing:antialiased;
        	-moz-osx-font-smoothing:grayscale;
        	font-family:"Dancing Script",cursive;
        }
        .credit-section {
        	position:absolute;
        	text-align:left;
        	left:15px;
        	bottom:20px;
        	color:#fff;
        	font-size:16px;
        }
        .credit-section a {
        	color:#faee5a;
        	cursor:pointer;
        }
        .heading {
        	top:50px !important;
        	left:30% !important;
        	font-family:"Dancing Script",cursive;
        }
        .heading h1 {
        	font-size:60px;
        	color:#68b69f;
        }
        .main-section {
        	height:700px;
        	max-width:992px;
        	margin:0 auto;
        	border:15px solid #fff;
        	background:#68cdaf;
        	position:absolute;
        	top:50%;
        	left:0;
        	right:0;
        	-webkit-transform:translateY(-50%);
        	transform:translateY(-50%);
        }
        #scene {
        	height:100%;
        	overflow:hidden;
        }
        .cloud_3 {
        	top:20px !important;
        	left:-150px !important;
        	width:400px;
        	-webkit-animation:animateCloud3 15s linear infinite alternate both;
        	animation:animateCloud3 15s linear infinite alternate both;
        }
        .cloud_3 img {
        	width:100%;
        }
        .cloud_1 {
        	top:200px !important;
        	left:-150px !important;
        }
        .cloud_2 {
        	left:auto !important;
        	top:-50px !important;
        	right:-50px !important;
        	width:300px;
        	-webkit-animation:animateCloud4 15s linear infinite alternate both;
        	animation:animateCloud4 15s linear infinite alternate both;
        }
        .rope-line {
        	top:auto !important;
        	bottom:140px;
        	height:85px;
        	left:-50px !important;
        	right:-50px;
        	z-index:2;
        }
        .rope-line >.inner {
        	background:url("//repo.bfw.wiki/bfwrepo/images/radar/rope-line_zd9qwz.png");
        	background-size:1500px;
        	background-repeat:repeat-x;
        	height:100%;
        }
        .hills-background-wrap {
        	top:auto !important;
        	bottom:145px;
        	z-index:-1;
        	height:230px;
        	left:-50px !important;
        	right:-50px;
        }
        .hills-background-wrap >.inner {
        	background:url("https://res.cloudinary.com/dyquku6bs/image/upload/v1537333316/hill-bg_rzukmt.png");
        	background-size:3000px;
        	background-repeat:repeat-x;
        	height:100%;
        }
        .buildings-bg {
        	top:auto !important;
        	bottom:145px;
        	z-index:1;
        	height:255px;
        	left:-50px !important;
        	right:-50px;
        }
        .buildings-bg >.inner {
        	position:absolute;
        	left:0;
        	right:0;
        	top:0;
        	bottom:0;
        	height:100%;
        	background:url("https://res.cloudinary.com/dyquku6bs/image/upload/v1537333316/buildings-background_rxiq0u.png") 0% 0% repeat-x;
        	animation:move-bg 1000s linear reverse;
        	background-size:3000px;
        }
        .bus-wrap {
        	position:absolute;
        	bottom:15px;
        	top:auto !important;
        	z-index:3;
        	left:auto !important;
        	right:80px;
        	width:400px;
        }
        .bus-wrap >.inner {
        	position:relative;
        	-webkit-animation:bus-bounce 0.75s linear infinite;
        	animation:bus-bounce 0.75s linear infinite;
        }
        .bus-wrap svg {
        	width:100%;
        }
        .bus-wrap .tyres-wrapper {
        	position:absolute;
        	top:0;
        	left:0;
        	right:0;
        	bottom:0;
        }
        .bus-wrap .tyres-wrapper .tyres-content:nth-child(1) {
        	position:absolute;
        	bottom:36px;
        	left:80px;
        }
        .bus-wrap .tyres-wrapper .tyres-content:nth-child(2) {
        	position:absolute;
        	bottom:36px;
        	right:105px;
        }
        .bus-wrap .tyres {
        	position:relative;
        	z-index:1;
        	width:18px;
        	height:18px;
        	background:#f4f4f4;
        	border-radius:50%;
        	border:8px solid #333;
        }
        .bus-wrap .rim-section {
        	position:relative;
        	width:14px;
        	height:14px;
        	background:#f3f3f3;
        	border-radius:50%;
        	border:2px solid #f1f1f1;
        }
        .bus-wrap .rim-dot {
        	position:absolute;
        	width:10px;
        	height:10px;
        	border:2px dashed #4e5066;
        	border-radius:50%;
        	-webkit-animation:rim-dot 2s linear infinite;
        	animation:rim-dot 2s linear infinite;
        }
        .road-wrap {
        	height:150px;
        	background:#4a4953;
        	position:absolute;
        	top:auto !important;
        	left:0;
        	right:0;
        	bottom:0;
        }
        .road-wrap .bar {
        	position:absolute;
        	content:"";
        	background-image:linear-gradient(to right,rgba(255,255,255,0.3) 40%,rgba(255,255,255,0) 0%);
        	background-position:bottom;
        	background-size:39px 9px;
        	background-repeat:repeat-x;
        	height:4px;
        	left:0;
        	width:100%;
        	right:0;
        	top:50%;
        	-webkit-transform:translateY(-50%);
        	transform:translateY(-50%);
        }
        .road-wrap .bar:before {
        	content:"";
        	position:absolute;
        	background-image:linear-gradient(to right,rgba(255,255,255,0.3) 40%,rgba(255,255,255,0) 0%);
        	background-size:39px 9px;
        	height:4px;
        	left:-101%;
        	display:block;
        	width:100%;
        }
        .road-wrap:before {
        	position:absolute;
        	content:"";
        	left:0;
        	right:0;
        	top:10px;
        	border-top:5px solid #e6db69;
        }
        /* KEYFRAMES */@-webkit-keyframes animateCloud {
        	0% {
        	left:-20%;
        }
        100% {
        	left:100%;
        }
        }@keyframes animateCloud {
        	0% {
        	left:-20%;
        }
        100% {
        	left:100%;
        }
        }@-webkit-keyframes animateCloud1 {
        	0% {
        	left:-10%;
        }
        100% {
        	left:100%;
        }
        }@keyframes animateCloud1 {
        	0% {
        	left:-10%;
        }
        100% {
        	left:100%;
        }
        }@-webkit-keyframes animateCloud2 {
        	0% {
        	left:-30%;
        }
        100% {
        	left:100%;
        }
        }@keyframes animateCloud2 {
        	0% {
        	left:-30%;
        }
        100% {
        	left:100%;
        }
        }@-webkit-keyframes animateCloud3 {
        	0% {
        	margin-left:0;
        }
        100% {
        	margin-left:100px;
        }
        }@keyframes animateCloud3 {
        	0% {
        	margin-left:0;
        }
        100% {
        	margin-left:100px;
        }
        }@-webkit-keyframes animateCloud4 {
        	0% {
        	margin-right:0;
        }
        100% {
        	margin-right:150px;
        }
        }@keyframes animateCloud4 {
        	0% {
        	margin-right:0;
        }
        100% {
        	margin-right:150px;
        }
        }@-webkit-keyframes wire-move {
        	0% {
        	margin-bottom:0;
        }
        100% {
        	margin-bottom:-30px;
        }
        }@keyframes wire-move {
        	0% {
        	margin-bottom:0;
        }
        100% {
        	margin-bottom:-30px;
        }
        }/* ANIMATIONS */#background-wrap {
        	opacity:0.7;
        }
        .x1 {
        	-webkit-animation:animateCloud 100s linear infinite;
        	animation:animateCloud 100s linear infinite;
        	-webkit-transform:scale(0.2);
        	transform:scale(0.2);
        	position:absolute;
        	top:50px;
        }
        .x2 {
        	-webkit-animation:animateCloud1 200s linear infinite;
        	animation:animateCloud1 200s linear infinite;
        	-webkit-transform:scale(0.3);
        	transform:scale(0.3);
        	position:absolute;
        	top:300px;
        }
        .x3 {
        	-webkit-animation:animateCloud2 150s linear infinite;
        	animation:animateCloud2 150s linear infinite;
        	-webkit-transform:scale(0.4);
        	transform:scale(0.4);
        	position:absolute;
        	top:150px;
        }
        /* Clouds */.cloud {
        	background:#fff;
        	background:linear-gradient(top,#fff 5%,#f1f1f1 100%);
        	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr="#fff",endColorstr="#f1f1f1",GradientType=0 );
        	border-radius:100px;
        	box-shadow:0 8px 5px rgba(0,0,0,0.1);
        	height:120px;
        	position:relative;
        	width:350px;
        }
        .cloud:after,.cloud:before {
        	background:#fff;
        	content:"";
        	position:absolute;
        	z-index:-1;
        }
        .cloud:after {
        	border-radius:100px;
        	height:100px;
        	left:50px;
        	top:-50px;
        	width:100px;
        }
        .cloud:before {
        	border-radius:200px;
        	width:180px;
        	height:180px;
        	right:50px;
        	top:-90px;
        }
        .slide-right {
        	-webkit-animation:slide-right 30s linear infinite both;
        	animation:slide-right 30s linear infinite both;
        }
        .slide-right-img {
        	-webkit-animation:slide-right-img 100s linear infinite;
        	animation:slide-right-img 100s linear infinite;
        }
        .slide-right-buildings {
        	-webkit-animation:slide-right-buildings 115s linear infinite;
        	animation:slide-right-buildings 115s linear infinite;
        }
        .slide-right-rope {
        	-webkit-animation:slide-right-rope 90s linear infinite;
        	animation:slide-right-rope 90s linear infinite;
        }
        @-webkit-keyframes slide-right {
        	0% {
        	-webkit-transform:translateX(0);
        	transform:translateX(0);
        }
        100% {
        	-webkit-transform:translateX(100%);
        	transform:translateX(100%);
        }
        }@keyframes slide-right {
        	0% {
        	-webkit-transform:translateX(0);
        	transform:translateX(0);
        }
        100% {
        	-webkit-transform:translateX(100%);
        	transform:translateX(100%);
        }
        }@-webkit-keyframes slide-right-rope {
        	100% {
        	background-position:5000px 0;
        }
        }@keyframes slide-right-rope {
        	100% {
    .........完整代码请登录后点击上方下载按钮下载查看