Javascript 基于时间的动画背景_Javascript_Html_Css_Animation

Javascript 基于时间的动画背景

javascript html css animation

Javascript 基于时间的动画背景,javascript,html,css,animation,Javascript,Html,Css,Animation,我这里有一些代码，可以为一整天（从日出到日落）设置动画：（）我很想知道是否有可能使它更具动态性，使动画随着时间的推移而移动例如：如果是中午，太阳应该在天空的最高点。相反，如果是午夜，月亮将在天空的最高点我怀疑它可以通过几行javascript实现： <script type="text/javascript"> var currentTime = new Date().getHours(); if (document.html) { '''psue

我这里有一些代码，可以为一整天（从日出到日落）设置动画：（）

我很想知道是否有可能使它更具动态性，使动画随着时间的推移而移动

例如：如果是中午，太阳应该在天空的最高点。相反，如果是午夜，月亮将在天空的最高点

我怀疑它可以通过几行javascript实现：

<script type="text/javascript">
var currentTime = new Date().getHours();
if (document.html) {
    '''psuedo_code'''
    while true
        for hour in day
            move sun and moon according to currentTime
}
</script>


var currentTime=new Date（）.getHours（）；
if（document.html）{
“psuedo_代码”
虽然是真的
一天中的一小时
根据当前时间移动太阳和月亮
}

HTML和CSS：

<html>
<div class="canvas">
    <div class="cloud"></div>
    <div class="cloud a"></div>
    <div class="cloud b"></div>
    <div class="cloud c"></div>
    <div class="land">
        <div class="tree"></div>
        <div class="tree a"></div>
        <div class="tree b"></div>
        <div class="tree c"></div>
        <div class="tree d"></div>
    </div>
    <div class="star"></div>
    <div class="star a"></div>
    <div class="star b"></div>
    <div class="star c"></div>
    <div class="star d"></div>
    <div class="wind"></div>
<!-- <div class="swirly-wind">
  <span></span>
  <span></span>
  <span></span>
</div>
<div class="swirly-wind a"></div>
<div class="swirly-wind b"></div> -->
    <div class="eclipse">
        <div class="sun"></div>
        <div class="sun a"></div>
        <div class="moon"></div>
        <div class="moon a"></div>
    </div>
</div>
</html>


/*身体{
位置：相对位置；
}*/
.帆布{
宽度：600px；
高度：600px；
边框：1px实心#000；
保证金：0自动；
位置：相对位置；
动画延迟：1s；
背景#70c4c6；
动画名称：日光；
动画持续时间：20秒；
动画迭代次数：无限；
溢出：隐藏；
动画计时功能：线性；
}
.月食{
宽度：600px；
高度：600px；
/*边框：1px实心#000*/
位置：绝对位置；
左：60%；
最高：20%；
动画名称：时间；
动画持续时间：40秒；
动画迭代次数：无限；
z指数：0；
动画计时功能：线性；
}
孙先生{
宽度：70px；
高度：70像素；
边界半径：50%；
背景色：#ffa；
位置：绝对位置；
顶部：-35px；
左：-35px；
}
孙先生{
底部：-35px；
右：-35px；
左：自动；
顶部：自动；
}
月亮先生{
位置：绝对位置；
顶部：-35px；
右：-35px；
宽度：70px；
高度：70像素；
边界半径：50%；
背景色：#fff；
}
.月亮{
底部：-35px；
左：-35px；
顶部：自动；
右：自动；
}
.云{
宽度：50px；
高度：45px；
边界半径：50%；
背景色：#fff；
位置：绝对位置；
顶部：20px；
左-20%；
动画名称：云；
动画持续时间：70秒；
动画迭代次数：无限；
z指数：1；
}
.cloud：：以前{
内容：''；
宽度：35px；
高度：30px；
背景色：#fff；
左边距：-20px；
边缘顶部：10px；
显示：块；
边界半径：50%；
}
.cloud：：之后{
内容：''；
宽度：20px；
高度：20px；
背景色：#fff；
位置：绝对位置；
右：-10px；
顶部：17px；
边界半径：50%；
}
.云{
顶部：150px；
动画持续时间：55秒；
}
.云{
顶部：100px；
左-15%；
动画持续时间：38s；
}
.cloud.c{
顶部：250px；
左-10%；
动画持续时间：25秒；
}
.土地{
宽度：100%；
高度：320px；
位置：绝对位置；
左：-50px；
底部：-120px；
背景色：#83a81c；
边界半径：50%；
z指数：1；
动画名称：土地；
动画持续时间：20秒；
动画迭代次数：无限；
}
.土地：：以前{
宽度：100%；
高度：200px；
内容：''；
位置：绝对位置；
左：40%；
最高：20%；
边界半径：50%；
背景色：#96be29；
变换：旋转（-15度）；
动画名称：land1；
动画持续时间：20秒；
动画迭代次数：无限；
}
.树{
宽度：10px；
高度：40px；
背景色：#766257；
左：200px；
位置：绝对位置；
}
.树：：以前{
内容：''；
位置：绝对位置；
底部：125%；
左：-7px；
宽度：0；
身高：0；
边框样式：实心；
边框宽度：0 20px 43px 20px；
边框颜色：透明透明#bfde3b透明；
z指数：1；
动画名称：windy；
动画持续时间：5s；
动画迭代次数：无限；
}
.树：：之后{
内容：''；
位置：绝对位置；
底部：100%；
左：-25px；
宽度：0；
身高：0；
边框样式：实心；
边框宽度：0 30px 60px 30px；
边框颜色：透明透明#93ae29透明；
}
.树{
变换：比例（0.5）；
左：250px；
}
.树{
变换：比例（0.75）；
左：280px；
}
.树{
转换：比例（1.5）；
左：450px；
顶部：100px；
}
.树{
转换：比例（1.25）；
左：530px；
顶部：80px；
z指数：0；
}
.明星{
宽度：4px；
高度：4px；
边界半径：50%；
背景色：#fff；
位置：绝对位置；
顶部：50px；
左：100px；
动画名称：推子；
动画持续时间：20秒；
动画迭代次数：无限；
}
明星：以前{
内容：''；
宽度：3倍；
高度：3倍；
边界半径：50%；
背景色：#fff；
位置：绝对位置；
左：20px；
顶部：20px；
动画名称：闪烁；
动画持续时间：20秒；
动画迭代次数：无限；
}
.明星：之后{
内容：''；
宽度：2倍；
高度：2倍；
边界半径：50%；
背景色：#fff；
位置：绝对位置；
左：-200px；
顶部：50px；
动画名称：闪烁；
动画持续时间：20秒；
动画迭代次数：无限；
}
.明星{
顶部：30px；
左：90%；
}
.星{
顶部：120px；
左：70%；
}
.星{
顶部：100px；
左：65%；
}
.star.d{
顶部：200px；
左：15%；
}
.旋风{
位置：绝对位置；
最高：30%；
动画名称：风；
动画持续时间：12秒；
动画迭代次数：无限；
动画计时功能：线性；
}
.漩涡风>跨度{
宽度：150px；
背景色：#eee；
高度：2倍；
显示：块；
位置：相对位置；
}
.旋风>跨度：第一个孩子{
宽度：200px；
}
.漩涡风>跨度：第n个孩子（1）：：之前{
显示：无；
}
.漩涡风>跨度：第n个孩子（2）{
利润上限：-10px；
浮动：对；
}
.漩涡风>跨度：第n个孩子（3）{
边缘顶部：15px；
宽度：75px；
浮动：对；
}
.涡流风跨度：：之前{
内容：''；
职位：绝对
<style>
/*body {
    position: relative;
}*/
.canvas {
    width: 600px;
    height: 600px;
    border: 1px solid #000;
    margin: 0 auto;
    position: relative;
    animation-delay: 1s;
    background: #70c4c6;
    animation-name: daylight;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    overflow: hidden;
    animation-timing-function: linear;
}
.eclipse {
    width: 600px;
    height: 600px;
    /*border: 1px solid #000;*/
    position: absolute;
    left:60%;
    top:20%;
    animation-name: time;
    animation-duration: 40s;
    animation-iteration-count: infinite;
    z-index: 0;
    animation-timing-function: linear;
}
.sun {
    width:70px;
    height:70px;
    border-radius: 50%;
    background-color: #ffa;
    position: absolute;
    top: -35px;
    left: -35px;
}
.sun.a {
    bottom: -35px;
    right: -35px;
    left: auto;
    top:auto;
}
.moon {
    position: absolute;
    top: -35px;
    right: -35px;
    width:70px;
    height:70px;
    border-radius: 50%;
    background-color: #fff;
}
.moon.a {
    bottom: -35px;
    left: -35px;
    top:auto;
    right: auto;
}
.cloud {
    width: 50px;
    height: 45px;
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
    top:20px;
    left: -20%;
    animation-name: cloud;
    animation-duration: 70s;
    animation-iteration-count: infinite;
    z-index: 1;
}
.cloud::before {
    content:'';
    width: 35px;
    height: 30px;
    background-color: #fff;
    margin-left: -20px;
    margin-top: 10px;
    display: block;
    border-radius: 50%;
}
.cloud::after {
    content:'';
    width: 20px;
    height: 20px;
    background-color: #fff;
    position: absolute;
    right: -10px;
    top: 17px;
    border-radius: 50%;
}
.cloud.a {
    top:150px;
    animation-duration: 55s;
}
.cloud.b {
    top:100px;
    left:-15%;
    animation-duration: 38s;
}
.cloud.c {
    top:250px;
    left:-10%;
    animation-duration: 25s;
}
.land {
    width: 100%;
    height: 320px;
    position: absolute;
    left:-50px;
    bottom: -120px;
    background-color: #83a81c;
    border-radius: 50%;
    z-index: 1;
    animation-name: land;
    animation-duration: 20s;
    animation-iteration-count: infinite;
}
.land::before {
    width: 100%;
    height: 200px;
    content: '';
    position: absolute;
    left: 40%;
    top: 20%;
    border-radius: 50%;
    background-color: #96be29;
    transform: rotate(-15deg);
    animation-name: land1;
    animation-duration: 20s;
    animation-iteration-count: infinite;
}
.tree {
    width:10px;
    height:40px;
    background-color: #766257;
    left: 200px;
    position: absolute; 
}
.tree::before {
    content: '';
    position: absolute;
    bottom: 125%;
    left: -7px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 20px 43px 20px;
    border-color: transparent transparent #bfde3b transparent;
    z-index: 1;

    animation-name: windy;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}
.tree::after {
    content: '';
    position: absolute;
    bottom:100%;
    left:-25px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 30px 60px 30px;
    border-color: transparent transparent #93ae29 transparent;  
}
.tree.a {
    transform: scale(0.5);
    left: 250px;
}
.tree.b {
    transform: scale(0.75);
    left: 280px;
}
.tree.c {
    transform: scale(1.5);
    left:450px;
    top: 100px;
}
.tree.d {
    transform: scale(1.25);
    left: 530px;
    top: 80px;
    z-index: 0;
}
.star {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
    top: 50px;
    left: 100px;
    animation-name: fader;
    animation-duration: 20s;
    animation-iteration-count: infinite;
}
.star::before {
    content: '';
    width:3px;
    height:3px;
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
    left:20px;
    top:20px;
    animation-name: blinker;
    animation-duration: 20s;
    animation-iteration-count: infinite;
}
.star::after {
    content: '';
    width:2px;
    height:2px;
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
    left:-200px;
    top:50px;
    animation-name: blinker;
    animation-duration: 20s;
    animation-iteration-count: infinite;    
}
.star.a {
    top:30px;
    left:90%;
}
.star.b {
    top:120px;
    left:70%;
}
.star.c {
    top:100px;
    left:65%;
}
.star.d {
    top:200px;
    left:15%;
}
.swirly-wind {
    position: absolute;
    top:30%;
  animation-name: wind;
    animation-duration: 12s;
    animation-iteration-count: infinite;    
    animation-timing-function: linear;
}
.swirly-wind > span {
  width: 150px;
    background-color: #eee;
    height: 2px;
  display: block;
  position: relative;
}
.swirly-wind > span:first-child {
  width: 200px;
}
.swirly-wind > span:nth-child(1)::before {
  display: none;
}
.swirly-wind > span:nth-child(2) {
  margin-top: -10px;
  float: right;
}
.swirly-wind > span:nth-child(3) {
  margin-top: 15px;
  width: 75px;
  float: right;
}
.swirly-wind span::before {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: #fff 2px solid;
  bottom: calc(100% - 2px);
  right: -15px;
  -webkit-clip-path: polygon(100% 0, 100% 100%, 50% 100%, 0 0);
  clip-path: polygon(100% 0, 100% 100%, 50% 100%, 0 0);
}
.swirly-wind > span:nth-child(3)::before  {
  top: calc(100% - 2px);
  -webkit-clip-path: polygon(100% 0, 100% 100%, 14% 100%, 35% 0);
clip-path: polygon(100% 0, 100% 100%, 14% 100%, 35% 0);
}

.swirly-wind.a {
  top:20%;
  width: 75px;
    animation-duration: 8s;
}
.swirly-wind.b {
  top:45%;
  width: 120px;
    animation-duration: 15s;
  height :1px;
}
.swirly-wind.b::before {
  border: #fff 1px solid;
  bottom: calc(100% - 1px);
}
.wind {
    width: 150px;
    background-color: #eee;
    height: 2px;
    position: absolute;
    top:30%;
    animation-name: wind;
    animation-duration: 8s;
    animation-iteration-count: infinite;    
    animation-timing-function: linear;
}
.wind::before {
    content: '';
    position: absolute;
    left: 200px;
    width: 100px;
    height: 1px;
    background-color: #eee;
    top:100px;
}
.wind::after {
    content: '';
    position: absolute;
    left: 400px;
    width: 180px;
    height: 1px;
    background-color: #eee;
    top:30px;
}
@keyframes time {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes daylight {
    0% {  background-color: #70c4c6; }
    15% {  background-color: #524b64; }
    40% { background-color: #354a4a; }
    70% { background-color: #354a4a; }
    80% {  background-color: #e2b553; }
    100% {  background-color: #70c4c6;}
}
@keyframes land {
    40% { background-color: #4d6932; }
    70% { background-color: #4d6932;}
}
@keyframes land1 {
    40% { background-color: #5b793e; }
    70% { background-color: #5b793e;}
}
@keyframes cloud {
    0% { transform: translateX(0); }
    100% { transform: translateX(850px); }
}
@keyframes rotate {
    0% { transform: rotate(0); }
    100% { transform: rotate(360deg); }
}
@keyframes fader {
    0% { opacity: 0; }
    15% { opacity: 0; }
    40% { opacity: 1; }
    60% { opacity: 0.4; }
    70% { opacity: 1; }
    80% {  opacity: 0; }
    100% { opacity: 0; }
}
@keyframes blinker {
    0% { opacity: 0; }
    18% { opacity: 0; }
    25% { opacity: 1; }
    40% { opacity: 0; }
    60% { opacity: 1; }
    70% {  opacity: 0; }
    100% { opacity: 0; }    
}
@keyframes blinker-1 {
    0% { opacity: 0; }
    30% { opacity: 0; }
    40% { opacity: 1; }
    60% { opacity: 1; }
    80% {  opacity: 0; }
    100% { opacity: 0; }    
}
@keyframes windy {
    15% {  transform: translateX(5px); transform: rotate(5deg); }
    80% {  transform: translateX(7px); transform: rotate(7deg);}
    80% {  transform: translateX(5px); transform: rotate(5deg);}
}
@keyframes wind {
    0% {  left: -800px; opacity: 0 }
    15% { opacity: 1; }
    70% { left: 800px; opacity: 1;}
    80% {  left: 800px; opacity: 0;}
    100% {  left: -1000px; opacity: 0;}
}


@keyframes snowday {
    0% {
        top: 0;
    }
    100% {
        top: 100%;
    }
}
.snow {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
    top: 0;
}
.snow.fall {
    animation-name: snowday ;
    animation-duration: 5s;
}
</style>