夕阳落山图（js 夕阳下山）

最新推荐文章于 2021-06-26 05:36:44 发布

原创最新推荐文章于 2021-06-26 05:36:44 发布 · 354 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html

js 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS和JavaScript实现的夕阳落山动画效果。通过设置圆形元素的背景渐变来模仿夕阳，并利用JavaScript控制其位置变化，实现夕阳缓缓落下的视觉效果。

该文章已生成可运行项目，

直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>夕阳落山图</title>
   <style>
       
       #xy{
           width: 150px;
           height: 150px;
           background:radial-gradient(orange 30%, yellow);
           box-shadow: 0px 0px 15px yellow inset;
           border-radius: 50%;
       }
   </style>
</head>
<body>
    <button onclick="dian()">点击开始落山</button>
    <div id="xy"></div>
    </body>
</html>

JavaScript 代码

<script>
        var a,b;//创建两个变量，为太阳每次变化的位置
         function bt() {   
           var sd= document.getElementById('xy');
           if(a<=1800&&b<=900){             //太阳移动落下的最后位置
                sd.style.marginLeft=a+"px";         //太阳移动的值
                sd.style.marginTop=b+"px";
                a=a+25;         //每次移动的值
                b=b+10;
           }else{           //当太阳到达最后值时从新开始。
               a=0;
               b=0;
           }
          
         }
         var t;             //创建定时器
         function dian() {
             clearInterval(t);
            t=setInterval('bt()',500);
         }
    </script>

本文章已经生成可运行项目