<!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>基于AngularJS实现简化版大航海游戏动画</title>
<style>
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#sky {
background: linear-gradient(#266BE8 30%, #A5D0F4);
overflow: hidden;
width: 100%;
height: 50%;
}
#sea {
background: #0F369D;
overflow: hidden;
width: 100%;
height: 50%;
display: flex;
flex-direction: column;
}
#overlay {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background: rgba(81, 50, 0, 0.19);
}
#sun {
position: absolute;
top: 20%;
left: 75%;
background: #FBEA74;
height: 100px;
width: 100px;
box-shadow: 0px 0px 180px #fff1b6;
-webkit-animation: sun-animation-one 6s infinite;
/* Safari 4+ */
-moz-animation: sun-animation-one 6s infinite;
/* Fx 5+ */
-o-animation: sun-animation-one 6s infinite;
/* Opera 12+ */
animation: sun-animation-one 6s infinite;
/* IE 10+, Fx 29+ */
-webkit-animation-timing-function: linear;
/* Chrome, Safari, Opera */
animation-timing-function: linear;
}
@keyframes sun-animation-one {
0% {
box-shadow: 0px 0px 180px #fff1b6;
}
50% {
box-shadow: 0px 0px 120px #fff40f;
}
100% {
box-shadow: 0px 0px 180px #fff1b6;
}
}
.ripple {
background-image: linear-gradient(to right, #174fb4 46%, rgba(255, 255, 255, 0) 0%);
background-position: top;
background-size: 130px 6px;
background-repeat: repeat-x;
margin: 10px 0;
flex: 1;
}
.duration-1 {
-webkit-animation: ripple-animation-one 6s infinite;
/* Safari 4+ */
-moz-animation: ripple-animation-one 6s infinite;
/* Fx 5+ */
-o-animation: ripple-animation-one 6s infinite;
/* Opera 12+ */
animation: ripple-animation-one 6s infinite;
/* IE 10+, Fx 29+ */
-webkit-animation-timing-function: linear;
/* Chrome, Safari, Opera */
animation-timing-function: linear;
}
.duration-2 {
-webkit-animation: ripple-animation-one 5s infinite;
/* Safari 4+ */
-moz-animation: ripple-animation-one 5s infinite;
/* Fx 5+ */
-o-animation: ripple-animation-one 5s infinite;
/* Opera 12+ */
animation: ripple-animation-one 5s infinite;
/* IE 10+, Fx 29+ */
-webkit-animation-timing-function: linear;
/* Chrome, Safari, Opera */
animation-timing-function: linear;
zoom: 1.1;
}
.duration-3 {
-webkit-animation: ripple-animation-one 4s infinite;
/* Safari 4+ */
-moz-animation: ripple-animation-one 4s infinite;
/* Fx 5+ */
-o-animation: ripple-animation-one 4s infinite;
/* Opera 12+ */
animation: ripple-animation-one 4s infinite;
/* IE 10+, Fx 29+ */
-webkit-animation-timing-function: linear;
/* Chrome, Safari, Opera */
animation-timing-function: linear;
zoom: 1.3;
}
.duration-4 {
-webkit-animation: ripple-animation-one 3s infinite;
/* Safari 4+ */
-moz-animation: ripple-animation-one 3s infinite;
/* Fx 5+ */
-o-animation: ripple-animation-one 3s infinite;
/* Opera 12+ */
animation: ripple-animation-one 3s infinite;
/* IE 10+, Fx 29+ */
-webkit-animation-timing-function: linear;
/* Chrome, Safari, Opera */
animation-timing-function: linear;
zoom: 1.5;
}
.duration-5 {
-webkit-animation: ripple-animation-one 2s infinite;
/* Safari 4+ */
-moz-animation: ripple-animation-one 2s infinite;
/* Fx 5+ */
-o-animation: ripple-animation-one 2s infinite;
/* Opera 12+ */
animation: ripple-animation-one 2s infinite;
/* IE 10+, Fx 29+ */
-webkit-animation-timing-function: linear;
/* Chrome, Safari, Opera */
animation-timing-function: linear;
zoom: 1.7;
}
.duration-6 {
-webkit-animation: ripple-animation-one 1s infinite;
/* Safari 4+ */
-moz-animation: ripple-animation-one 1s infinite;
/* Fx 5+ */
-o-animation: ripple-animation-one 1s infinite;
/* Opera 12+ */
animation: ripple-animation-one 1s infinite;
/* IE 10+, Fx 29+ */
-webkit-animation-timing-function: linear;
/* Chrome, Safari, Opera */
animation-timing-function: linear;
zoom: 1.9;
}
.duration-7 {
-webkit-animation: ripple-animation-one 1s infinite;
/* Safari 4+ */
-moz-animation: ripple-animation-one 1s infinite;
/* Fx 5+ */
-o-animation: ripple-animation-one 1s infinite;
/* Opera 12+ */
animation: ripple-animation-one 1s infinite;
/* IE 10+, Fx 29+ */
-webkit-animation-timing-function: linear;
/* Chrome, Safari, Opera */
animation-timing-function: linear;
zoom: 2.1;
}
@keyframes ripple-animation-one {
0% {
background-position-x: 0px;
}
100% {
background-position-x: 130px;
}
}
#boat {
width: 126px;
height: 126px;
position: absolute;
z-index: 12000;
top: 65%;
left: 65%;
transform: translate(-50%, -50%);
-webkit-animation: boat-animation-one 3s infinite;
/* Safari 4+ */
-moz-animation: boat-animation-one 3s infinite;
/* Fx 5+ */
-o-animation: boat-animation-one 3s infinite;
/* Opera 12+ */
animation: boat-animation-one 3s infinite;
/* IE 10+, Fx 29+ */
-webkit-animation-timing-function: linear;
/* Chrome, Safari, Opera */
animation-timing-function: linear;
}
#boat:after {
content: '';
display: block;
width: 6px;
height: 6px;
background: transparent;
box-shadow: 12px 84px #ababab, 18px 84px #ababab, 24px 84px #ababab, 30px 84px #ababab, 36px 84px #ababab, 48px 84px #ababab, 42px 84px #ababab, 54px 84px #ababab, 66px 84px #ababab, 60px 84px #ababab, 78px 84px #ababab, 72px 84px #ababab, 90px 84px #ababab, 84px 84px #ababab, 96px 84px #ababab, 102px 84px #ababab, 108px 84px #ababab, 36px 78px #696969, 36px 72px #696969, 36px 66px #696969, 36px 60px #696969, 36px 54px #696969, 36px 48px #696969, 36px 42px #696969, 36px 36px #696969, 36px 30px #696969, 36px 24px #696969, 30px 24px #ffffff, 24px 30px #ffffff, 18px 36px #ffffff, 12px 42px #ffffff, 12px 48px #ffffff, 12px 54px #ffffff, 18px 60px #ffffff, 24px 66px #ffffff, 30px 72px #ffffff, 30px 66px #ffffff, 30px 60px #ffffff, 24px 60px #ffffff, 24px 54px #ffffff, 30px 54px #ffffff, 18px 54px #ffffff, 24px 48px #ffffff, 30px 48px #ffffff, 30px 42px #ffffff, 18px 48px #ffffff, 18px 42px #ffffff, 24px 42px #ffffff, 30px 36px #ffffff, 24px 36px #ffffff, 30px 30px #ffffff, 6px 60px #ffffff, 12px 60px #ffffff, 12px 66px #ffffff, 18px 66px #ffffff, 24px 72px #ffffff, 18px 72px #ffffff, 12px 72px #ffffff, 6px 72px #ffffff, 6px 66px #ffffff, 18px 90px #ffffff, 24px 90px #ffffff, 30px 90px #ffffff, 36px 90px #ffffff, 42px 90px #ffffff, 54px 90px #ffffff, 48px 90px #ffffff, 66px 90px #ffffff, 60px 90px #ffffff, 78px 90px #ffffff, 72px 90px #ffffff, 84px 90px #ffffff, 90px 90px #ffffff, 96px 90px #ffffff, 102px 90px #ffffff, 108px 90px #ffffff, 108px 96px #ffffff, 96px 96px #ffffff, 102px 96px #ffffff, 90px 96px #ffffff, 84px 96px #ffffff, 90px 102px #ffffff, 84px 102px #ffffff, 78px 102px #ffffff, 78px 96px #ffffff, 72px 96px #ffffff, 66px 96px #ffffff, 30px 96px #ffffff, 36px 96px #ffffff, 42px 96px #ffffff, 48px 96px #ffffff, 60px 96px #ffffff, 54px 96px #ffffff, 72px 102px #ffffff, 66px 102px #ffffff,
AngularJS实现的帆船在大海中航行动画效果源码.zip
版权申诉
188 浏览量
2022-10-31
01:40:40
上传
评论
收藏 1.09MB ZIP 举报
AngularJS实现的帆船在大海中航行动画效果源码.zip （5个子文件） 
132689946484952741 
index.html 46KB js 
angular2-polyfills.min.js 27KB jquery-1.11.1.min.js 94KB angular2-all.umd.dev.js 4.91MB Rx.umd.min.js 184KB资源评论
