<!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资源评论
易小侠
- 粉丝: 6633
- 资源: 9万+
最新资源
- “农贸互联”：农产品线上销售系统的开发与应用
- 基于web的音乐网站源码（java毕业设计完整源码+LW）.zip
- 基于扰动观测器的伺服系统摩擦补偿Matlab仿真 1.模型简介 模型为基于扰动观测器的摩擦补偿仿真，仿真基于永磁同步电机速度、电流双闭环控制结构开发，双环均采用PI控制，PI参数已经调好 仿真
- 基于保信息学科平台系统设计与实现源码（java毕业设计完整源码+LW）.zip
- openjdk8u432-ga
- 采用遗传算法来完成自动组卷功能的前后端分离的在线测试练习系统 基于若依框架进行二次开发 功能：用户管理，练习关系，测试管理，题库管理，数据统计，权限控制 自动组卷：使用遗传算法来完成该
- 年终总结，包含今年的参与的项目，工作内容，遇到的问题，建议，来年计划等
- 通用verilog串口控制器: 1.无奇偶校验，通过高低温等实验稳定运行，可靠性强，方便移植 2.提供整体工程，仿真，提供
- 基于深度学习的股票价格预测和量化策略研究python源码+文档说明+报告PPT（高分项目）
- “宠物服务智能化”：宠物服务平台的开发指南
- 基于深度学习的股票价格预测和量化策略研究python源码+文档说明+报告PPT
- 小谢稳定v4-1.zip
- 79e09efba17ad6cb50253b529448c863.jpg
- 证件照处理的Python脚本
- 一个简单的图像加密和解密脚本
- 基于稀疏梯度场的非局部图像去噪算法及其在图像增强中的应用
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
