<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery + CSS3 大漠日落风景画</title>
<style>
/* line 3, ../sass/tmp.scss */
html {
background: #333;
overflow: hidden;
}
/* line 4, ../sass/tmp.scss */
body {
height: 100vh;
background: linear-gradient(to bottom, #fbac86, #fef5e0);
overflow: hidden;
display: block;
position: relative;
transition: 0.5s;
top: 0px;
}
/* line 12, ../sass/tmp.scss */
body:hover {
height: 80vh;
top: 10vh;
}
/* line 18, ../sass/tmp.scss */
.sun {
position: absolute;
width: 100px;
height: 100px;
background: #fff;
border-radius: 50%;
right: 10%;
top: 10%;
box-shadow: 0px 0px 50px #fff;
}
/* line 28, ../sass/tmp.scss */
.layer {
width: 100%;
height: 100%;
display: block;
position: absolute;
}
/* line 34, ../sass/tmp.scss */
.mountain_b {
position: absolute;
width: 300px;
height: 300px;
border-radius: 30px;
transform: rotateZ(-45deg);
bottom: 50px;
left: -6%;
background: linear-gradient(to bottom left, #fddabf, #fbac86);
}
/* line 43, ../sass/tmp.scss */
.mountain_b:nth-of-type(2) {
bottom: 40px;
left: 10%;
}
/* line 47, ../sass/tmp.scss */
.mountain_b:nth-of-type(3) {
bottom: 60px;
left: 50%;
}
/* line 51, ../sass/tmp.scss */
.mountain_b:nth-of-type(4) {
bottom: 40px;
left: 80%;
}
/* line 56, ../sass/tmp.scss */
.mountain_s {
position: absolute;
width: 200px;
height: 200px;
background: #FCB895;
border-radius: 30px;
transform: rotateZ(-25deg);
bottom: 80px;
left: -10%;
}
/* line 65, ../sass/tmp.scss */
.mountain_s::after {
content: '';
position: absolute;
background: #FCB895;
width: 200px;
height: 200px;
border-radius: 30px;
transform: rotateZ(50deg);
top: 30px;
left: 70px;
}
/* line 76, ../sass/tmp.scss */
.mountain_s:nth-of-type(2) {
bottom: 40px;
left: 15%;
}
/* line 80, ../sass/tmp.scss */
.mountain_s:nth-of-type(3) {
bottom: 60px;
left: 40%;
}
/* line 84, ../sass/tmp.scss */
.mountain_s:nth-of-type(4) {
bottom: 40px;
left: 60%;
}
/* line 88, ../sass/tmp.scss */
.mountain_s:nth-of-type(5) {
bottom: 80px;
left: 80%;
}
/* line 93, ../sass/tmp.scss */
.cactus {
position: absolute;
background: #A06C7A;
left: 10%;
bottom: 240px;
height: 25px;
width: 10px;
border-radius: 10px 10px 0px 0px;
}
/* line 101, ../sass/tmp.scss */
.cactus::after, .cactus::before {
content: '';
position: absolute;
border-bottom: 5px solid #A06C7A;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
width: 10px;
height: 10px;
border-radius: 50%;
left: -10px;
top: -2px;
transform: rotateZ(45deg);
}
/* line 114, ../sass/tmp.scss */
.cactus::before {
left: 0px;
top: 5px;
transform: rotateZ(-45deg);
}
/* line 119, ../sass/tmp.scss */
.cactus:nth-of-type(2) {
left: 50%;
height: 30px;
}
/* line 122, ../sass/tmp.scss */
.cactus:nth-of-type(2)::after {
top: 2px;
}
/* line 125, ../sass/tmp.scss */
.cactus:nth-of-type(2)::before {
left: 0px;
top: 0px;
transform: rotateZ(-45deg);
}
/* line 131, ../sass/tmp.scss */
.cactus:nth-of-type(3) {
left: 94%;
}
/* line 133, ../sass/tmp.scss */
.cactus:nth-of-type(3)::after {
top: 0px;
}
/* line 136, ../sass/tmp.scss */
.cactus:nth-of-type(3)::before {
left: 0px;
top: 6px;
transform: rotateZ(-45deg);
}
/* line 143, ../sass/tmp.scss */
.refill {
position: absolute;
bottom: 240px;
right: 20%;
width: 80px;
height: 60px;
background: #A06C7A;
box-sizing: border-box;
border-top: 5px solid #845562;
z-index: 5;
}
/* line 153, ../sass/tmp.scss */
.refill::after, .refill::before {
content: '';
position: absolute;
background: #A06C7A;
}
/* line 158, ../sass/tmp.scss */
.refill::after {
right: 0px;
top: -15px;
width: 210px;
height: 10px;
}
/* line 164, ../sass/tmp.scss */
.refill::before {
left: 99%;
bottom: -4px;
width: 100px;
height: 40px;
transform: skewY(3deg);
}
/* line 171, ../sass/tmp.scss */
.refill .col {
position: absolute;
bottom: 0px;
left: -50px;
width: 30px;
height: 5px;
background: #A06C7A;
}
/* line 178, ../sass/tmp.scss */
.refill .col::after, .refill .col::before {
content: '';
position: absolute;
background: #A06C7A;
}
/* line 183, ../sass/tmp.scss */
.refill .col::after {
width: 10px;
height: 60px;
bottom: 0px;
left: -10px;
background: #A06C7A;
}
/* line 190, ../sass/tmp.scss */
.refill .col::before {
width: 15px;
height: 30px;
bottom: 0px;
left: 5px;
border-radius: 10px 10px 0px 0px;
background: #A06C7A;
}
/* line 198, ../sass/tmp.scss */
.refill .col:nth-of-type(2) {
left: -110px;
}
/* line 203, ../sass/tmp.scss */
.earth {
position: absolute;
bottom: 0px;
left: 50%;
width: 110%;
height: 240px;
background: linear-gradient(to bottom, #926374, #2f2546);
overflow: hidden;
transform: translateX(-50%);
perspective: 100px;
z-index: 10;
box-shadow: inset 0px 10px 30px -10px #4B3757;
}
/* line 215, ../sass/tmp.scss */
.earth .road {
position: absolute;
width: 100px;
height: 50%;
background: #614761;
top: 50%;
left: 30%;
transform: translate(-50%, -50%) skewX(-20deg) rotateX(15deg);
perspective: 100px;
border-left: 10px solid #855d76;
}
/* line 225, ../sass/tmp.scss */
.earth .road::after, .earth .road::before {
content: '';
position: absolute;
width: 100px;
height: 50%;
background: #614761;
}
/* line 232, ../sass/tmp.scss */
.earth .road::after {
top: 108px;
left: -23px;
width: 130px;
transform: skewX(30deg) rotateX(85deg);
border-left: 10px solid #855d76;
}
/* line 239, ../sass/tmp.scss */
.earth .road::before {
bottom: 80%;
height: 200%;
left: -125px;
width: 60px;
transform: skewX(50deg) rotateX(15deg);
border-right: 10px solid #4f3957;
}
/* line 249, ../sass/tmp.scss */
.car {
position: absolute;
bottom: 230px;
right: 24%;
width: 60px;
height: 15px;
background: #2f2546;
animation: car_shake 0.6s infinite, car_pos 6s;
border-radius: 2px 10px 5px 5px;
animation-fill-mode: forwards;
box-sizing: border-box;
}
/* line 260, ../sass/tmp.scss */
.car::after, .car::before {
content: '';
position: absolute;
background: #2f2546;
width: 10px;
height: 10px;
bottom: -8px;
left: 20%;
border-radius: 50%;
animation: car_c_shake 0.6s 4;
}
/* line 271, ../sass/tmp.scss */
.car::after {
left: 70%;
}
/* line 274, ../sass/tmp.scss */
.car .up {
position: absolute;
background: #2f2546;
width: 50%;
height: 15px;
bottom: 100%;
left: 30%;
border-radius: 10px 20px 0px 0px;
}
@keyframes car_shake {
0% {
bottom: 230px;
}
50% {
bottom: 233px;
}
100% {
bottom: 230px;
}
}
@keyframes car_c_shake {
0% {
bottom: -5px;
}
50% {
bottom: -8px;
}
100% {
bottom: -5px;
}
}
@keyframes car_pos {
0% {
right: 24%;
z-index: 11;
}
50% {
right: -70px;
transform: scaleX(1);
z-index: 11;
bottom: 230px;
}
51% {
transform: scaleX(-1);
z-index: 4;
bottom: 246px;
}
100% {
right: 30%;
transform: scaleX(-1);
z-index: 4;
bottom: 246px;
}
}
/* line 300, ../sass/tmp.scss */
.sign {
position: absolute;
left: 25%;
width: 150px;
height: 150px;
bottom: 220px;
background: #2b2348;
transform: rotateZ(-45deg);
z-index: 11;
border-radius: 10px;
box-sizing: border-box;
border: 10px solid #2b2348;
box-shadow: inset 0px 0px 0px 6px #583e5a;
jQuery + CSS3 实现的大漠日落风景动画效果源码.zip （7个子文件） 
132689944676028765 css 
font-awesome.min.css 21KB fonts fontawesome-webfont.eot 25KB fontawesome-webfont.woff 70KB
fontawesome-webfont.svg 348KB fontawesome-webfont.ttf 54KB
index.html 10KB js jquery-1.11.1.min.js 94KB资源评论
