有趣的HTML实例（十四） 窗边风景动画（css+js）

最新推荐文章于 2024-02-22 20:59:24 发布
最新推荐文章于 2024-02-22 20:59:24 发布
阅读量559 收藏
点赞数
分类专栏： HTML实例 前端开发 文章标签： javascript css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63244368/article/details/129251312
版权

不要憎恨你的敌人，那会影响你的判断力。

——《教父》

目录

一、前言

二、往期作品回顾

三、作品介绍

四、本期代码介绍

五、效果显示 

六、编码实现

index.html

style.css 

script.js

 七、获取源码

公众号获取源码 

获取源码？私信？关注？点赞？收藏？

一、前言

        在我们的 html 学习过程中，会用到并见识到各种各样的实例，以及各种插件，并且有些 web 网页中的小插件又非常的吸引眼球，提升 web 网页的层次，显得非常好看并且非常使用。在本系列中，我将持续为大家更新有趣且使用的 html 实例，放在 web 网页中，凸显效果。

        特点一：都是符合学校或者学生考试期末作业的水平，都是最基础的简单的 html 样例，提升web网页整理效果，都是 div+css 框架原创代码写的，内容包括 js / css，也包含 视频+音乐+flash 等元素的插入…

        特点二：内容包括多种丰富类型，例如： 倒计时，404页面，Blog顶置卡片设计 (css+js)，To-Do-List设计 (css+js)，火柴盒动画 (css)，日历便签设计 (css+js)，搜索框设计 (css+js)，卡片式图片展示 (css+js)，咖啡选择 (css+js)……

     

          可满足多种需求，欢迎大家下载！

 

二、往期作品回顾

有趣的HTML实例（一） 倒计时_Enovo_飞鱼的博客-CSDN博客

有趣的HTML实例（二） 404页面_Enovo_飞鱼的博客-CSDN博客

有趣的HTML实例（三） 加载页面动画_Enovo_飞鱼的博客-CSDN博客

有趣的HTML实例（四） 旋转菜单_Enovo_飞鱼的博客-CSDN博客

有趣的HTML实例（五） 加载页面动画Ⅱ（css）_Enovo_飞鱼的博客-CSDN博客

有趣的HTML实例（六） 卡片翻转时钟_Enovo_飞鱼的博客-CSDN博客

有趣的HTML实例（七） 注册登录界面Ⅱ（css+js）_Enovo_飞鱼的博客-CSDN博客

有趣的HTML实例（八） 一个很有趣的动态背景（css+js）_Enovo_飞鱼的博客-CSDN博客

有趣的HTML实例（九） 文本变形动画（css+js）_Enovo_飞鱼的博客-CSDN博客

有趣的HTML实例（十） 悬停时有旋转效果的图标_Enovo_飞鱼的博客-CSDN博客

有趣的HTML实例（十一） 烟花特效（css+js）_Enovo_飞鱼的博客-CSDN博客

有趣的HTML实例（十二） 早安、晚安动画（css+js）_Enovo_飞鱼的博客-CSDN博客

有趣的HTML实例（十三） 咖啡选择（css+js）_Enovo_飞鱼的博客-CSDN博客

三、作品介绍

        1.作品简介 ：HTML响应式布局网站源码！兼容 pc 以及移动端，内涵 js 交互，ui 交互。直接点击即可查看效果！

        2.作品编辑：个人主页网页设计题材，代码为 html+css 布局制作，作品下载后可使用任意HTML编辑软件（例如：DW、HBuilder、Vscode 、Sublime  所有编辑器均可使用）。

        3.作品技术：使用DIV+CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等。

四、本期代码介绍

一款简单的 HTML+ CSS+JS  窗边风景动画（css+js）  实例

1、HTML

2、CSS

3、JS

4、舒适的画面感

5、床边风景动画

6、白天夜晚点击效果

 可通用多种不同情景，放置在web网页上，可以作为跳转页面之后使用

五、效果显示 

​

可使用在多种情景下，提升层次轮廓效果、美化界面、自定义文字修改——>

根据需求修改

六、编码实现

显示完整代码

注意路径(⊙o⊙)？

o(*￣▽￣*)ブ 

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Enovo窗边风景动画</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <!-- 窗户 -->
  <div class="window-top" id="window-top"></div>
  <div class="window-square" id="window-main"></div>

  <!-- 窗框线 -->
  <div class="inner-line-hz-one"></div>
  <div class="inner-line-hz-two"></div>
  <div class="inner-line-hz-three"></div>
  <div class="inner-line-vt"></div>
  <div class="floor-line"></div>

  <!-- 植物 -->
  <div class="plant-one"></div>
  <div class="plant-two"></div>
  <div class="plant-two-shadow"></div>
  <div class="flower-blue-leaf"></div>
  <div class="flower-blue-line"></div>
  <div class="flower-blue-leaf-two"></div>
  <div class="flower-blue-line-two"></div>
  <div class="plant-shadow"></div>

  <!-- 植物的茎 -->
  <div class="root-one"></div>
  <div class="root-two"></div>
  <div class="root-three"></div>
  <div class="root-four"></div>
  <div class="root-five"></div>
  <div class="root-six"></div>

  <!-- 叶子 -->
  <div class="main-leaf-one"></div>
  <div class="main-leaf-two"></div>
  <div class="main-leaf-three"></div>
  <div class="main-leaf-four"></div>
  <div class="main-leaf-five"></div>
  <div class="main-leaf-six"></div>

  <!-- 云彩 -->
  <div class="cloud-one c"></div>
  <div class="cloud-two c"></div>
  <div class="cloud-three c"></div>
  <div class="cloud-ball-one c"></div>
  <div class="cloud-ball-two c"></div>
  <div class="cloud-ball-three c"></div>
  <div class="cloud-ball-four c"></div>
  <div class="cloud-ball-five c"></div>
  <div class="cloud-ball-six c"></div>

  <!-- 灯 -->
  <div class="lamp" id="light-switch"></div>
  <div class="lamp-wire"></div>
  <div class="lamp-shadow"></div>

  <!-- 夜晚部分-星星 -->
  <div class="star-one s"></div>
  <div class="star-two s"></div>
  <div class="star-three s"></div>
  <div class="star-four s"></div>
  <div class="star-five s"></div>
  <div class="star-six s"></div>

  <!-- 月亮 -->
  <div class="moon"></div>
  <div class="moon-crater"></div>

  <!-- 灯光 -->
  <div class="light-source"></div>

  <!-- partial -->
  <script src="./script.js"></script>
</body>
</html>

style.css 

/* 设置需要用的参数 */
:root {
  --page-background: #fef5e7;
  --light-purple: #adbdfc;
  /* 窗户部分用到的参数 */
  --window-top-height: 45;
  --window-top-width: 40;
  --window-day-background: #d6eaf8;
  --window-square-height: 40;
  --window-square-width: 40;
  --floor-line-height: 1;
  --floor-line-width: 80;
  --inner-line-vt-width: 62;
  /* 植物部分用到的参数 */
  --plant-one-height: 6;
  --plant-one-width: 9;
  --plant-two-shadow-height: .5;
  --plant-two-shadow-width: 4;
  --flower-blue-height: 6;
  --flower-blue-width: 3;
  --flower-blue-line-height: .2;
  --flower-blue-line-width: 5;
  --flower-two-blue-height: 7;
  --flower-two-blue-width: 4.5;
  --root-height: 10;
  --root-width: 33;
  /* 叶子部分需要的参数 */
  --main-leaf-height: 8;
  --main-leaf-width: 8;
  /* 云彩部分用到的参数 */
  --cloud-base-height: 8;
  --cloud-base-width: 17;
  --cloud-ball-height: 5;
  --cloud-ball-width: 5;
  /* 灯部分用到的参数 */
  --lamp-height: 15;
  --lamp-width: 19;
  --lamp-wire-height: 70;
  --lamp-wire-width: .1; 
  /* 星星部分用到的参数 */
  --star-height: 1.2;
  --star-width: 1.2;
  /* 灯光部分需要的参数 */
  --light-source-height: 20;
  --light-source-width: 20;
  /* 月亮部分需要的参数 */
  --moon-height: 10;
  --moon-width: 10;
} 

/* 页面主体背景、位置 */
body {
  position: fixed;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--page-background);
}

/* 窗户 */
.window-square {
  height: calc(var(--window-square-height) * 1vmin);
  width: calc(var(--window-square-width) * 1vmin);
  background: var(--window-day-background);
}

.window-top {
  height: calc(var(--window-top-height) * 1vmin);
  width: calc(var(--window-top-width) * 1vmin);
  border-radius: 50%;
  position: fixed;
  top: -55%;
  background: linear-gradient(to bottom, var(--window-day-background) 50%, transparent 50%);
}

/* 窗框 + 地面 */
.floor-line {
  position: fixed;
  left: -45%;
  height: calc(var(--floor-line-height) / 3 * 1vmin);
  width: calc(var(--floor-line-width) * 1vmin);
  background: #AAA;
  border-radius: 1rem;
}

.inner-line-hz-one,
.inner-line-hz-two,
.inner-line-hz-three,
.inner-line-vt {
  position: fixed;
  top: -5%;
  height: calc(var(--floor-line-height) / 6 * 1vmin);
  width: calc(var(--window-square-width) * 1vmin);
  background: #AAA;
}

.inner-line-hz-one {
  top: 33%;
}

.inner-line-hz-two {
  top: 70%;
}

.inner-line-vt {
  top: 22.4%;
  left: -27%;
  transform: rotate(90deg);
  width: calc(var(--inner-line-vt-width) * 1vmin);
}

/* 花盆 */
.plant-one {
  position: fixed;
  bottom: -1%;
  right: -8%;
  height: calc(var(--plant-one-height) * 1vmin);
  width: calc(var(--plant-one-width) * 1vmin);
  background: linear-gradient(to bottom, #000 6%, #ba4a00 12%);
  border-radius: 13%;
  clip-path: polygon(0 0, 100% 0, 80% 100%, 19% 100%);
}

.plant-two {
  position: fixed;
  bottom: -5.2%;
  right: -12%;
  z-index: 999;
  height: calc(var(--plant-one-height) / 1.5 * 1vmin);
  width: calc(var(--plant-one-width) / 2 * 1vmin);
  background: linear-gradient(to bottom, #000 5%, #eb8fbb 10%);
  border-radius: 10%;
  clip-path: polygon(0 0, 100% 0, 80% 100%, 19% 100%);
}

/* 花盆的阴影 */
.plant-two-shadow {
  height: calc(var(--plant-two-shadow-height) * 1vmin);
  width: calc(var(--plant-two-shadow-width) * 1vmin);
  background: #000;
  position: fixed;
  z-index: -1;
  bottom: -4.9%;
  right: -15%;
  border-radius: 50%;
  box-shadow: 0px 0px 1px 0px #000;
}

/* 植物叶子 */
.flower-blue-leaf {
  position: fixed;
  height: calc(var(--flower-blue-height) * 1vmin);
  width: calc(var(--flower-blue-width) * 1vmin);
  background: #6e8ce9;
  border-radius: 95% 0;
  transform: rotate(185deg);
  border-left: 1px solid #111;
  border-right: 1px solid #111;
  bottom: 4.3%;
  right: -16%;
}

.flower-blue-line {
  position: fixed;
  height: calc(var(--flower-blue-line-height) * 1vmin);
  width: calc(var(--flower-blue-line-width) * 1vmin);
  background: #333;
  bottom: 10%;
  right: -17.4%;
  transform: rotate(-63deg);
}

.flower-blue-leaf-two {
  position: fixed;
  height: calc(var(--flower-two-blue-height) * 1vmin);
  width: calc(var(--flower-two-blue-width) * 1vmin);
  border-left: 1px solid #111;
  border-right: 1px solid #111;
  background: #6e8ce9;
  border-radius: 95% 0;
  transform: rotate(-48deg);
  bottom: 5.5%;
  right: -10%;
}

.flower-blue-line-two {
  position: fixed;
  height: calc(var(--flower-blue-line-height) * 1vmin);
  width: calc(var(--flower-blue-line-width) * 1vmin);
  background: #333;
  bottom: 10%;
  right: -12%;
  transform: rotate(70deg);
}

/* 植物的茎 */
.root-one {
  position: fixed;
  height: calc(var(--root-height) * 1vmin);
  width: calc(var(--root-width) * 1vmin);
  top: 35%;
  right: -49%;
  z-index: 88;
  border: 1px solid #000;
  border-color: #000 transparent transparent transparent;
  border-radius: 50% / calc(var(--root-height) / 6 * 1vmin) calc(var(--root-height) * 1vmin) 0 0;
  transform: rotate(-90deg);
}

.root-two {
  position: fixed;
  height: calc(var(--root-height) * 1vmin);
  width: calc(var(--root-width) / 1.9 * 1vmin);
  top: 59%;
  right: -2.8%;
  z-index: 88;
  border: 1px solid #000;
  border-color: #000 transparent transparent transparent;
  border-radius: 60% / calc(var(--root-height) * 1vmin) calc(var(--root-height) / 3.5 * 1vmin) 0 0;
  transform: rotate(69deg);
}

.root-two {
  position: fixed;
  height: calc(var(--root-height) * 1vmin);
  width: calc(var(--root-width) / 1.9 * 1vmin);
  top: 59%;
  right: -2.8%;
  z-index: 88;
  border: 1px solid #000;
  border-color: #000 transparent transparent transparent;
  border-radius: 60% / calc(var(--root-height) * 1vmin) calc(var(--root-height) / 3.5 * 1vmin) 0 0;
  transform: rotate(69deg);
}

.root-three {
  position: fixed;
  height: calc(var(--root-height) * 1vmin);
  width: calc(var(--root-width) / 1.5 * 1vmin);
  top: 45%;
  right: -8.1%;
  z-index: 88;
  border: 1px solid #000;
  border-color: #000 transparent transparent transparent;
  border-radius: 60% / calc(var(--root-height) * 1vmin) calc(var(--root-height) / 14 * 1vmin) 0 0;
  transform: rotate(81deg);
}

.root-four {
  position: fixed;
  height: calc(var(--root-height) * 1vmin);
  width: calc(var(--root-width) / 2.7 * 1vmin);
  top: 17%;
  right: -19%;
  z-index: 80;
  border: 1px solid #000;
  border-color: #000 transparent transparent transparent;
  border-radius: 60% / calc(var(--root-height) * 1vmin) calc(var(--root-height) / 8 * 1vmin) 0 0;
  transform: rotate(-85deg);
}

.root-five {
  position: fixed;
  height: calc(var(--root-height) * 1vmin);
  width: calc(var(--root-width) / 1.5 * 1vmin);
  top: 39%;
  right: -39.3%;
  z-index: 88;
  border: 1px solid #000;
  border-color: #000 transparent transparent transparent;
  border-radius: 50% / calc(var(--root-height) / 1.45 * 1vmin) calc(var(--root-height) * 1vmin) 0 0;
  transform: rotate(-60deg);
}

.root-six {
  position: fixed;
  height: calc(var(--root-height) * 1vmin);
  width: calc(var(--root-width) / 1.65 * 1vmin);
  top: 57%;
  right: -38%;
  z-index: 88;
  border: solid 1px #000;
  border-color: #000 transparent transparent transparent;
  border-radius: 50% / calc(var(--root-height) / 1.6 * 1vmin) calc(var(--root-height) * 1vmin) 0 0;
  transform: rotate(-60deg);
}

/* 叶子 */
.main-leaf-one {
  position: fixed;
  top: 28%;
  right: 8%;
  z-index: 50;
  height: calc(var(--main-leaf-height) * 1vmin);
  width: calc(var(--main-leaf-width) * 1vmin);
  border-radius: 85% 5%;
  border-left: .5px solid #111;
  border-bottom: .5px solid #111;
  background: #4d8473;
  transform: rotate(93deg);
}

.main-leaf-two {
  position: fixed;
  top: 48%;
  right: 8%;
  z-index: 50;
  height: calc(var(--main-leaf-height) * 1vmin);
  width: calc(var(--main-leaf-width) * 1vmin);
  border-radius: 85% 0%;
  border-left: 1px solid #111;
  border-bottom: 1px solid #111;
  background: #4d8473;
  transform: rotate(85deg);
}

.main-leaf-three {
  position: fixed;
  top: 0%;
  right: -8.5%;
  z-index: 50;
  height: calc(var(--main-leaf-height) * 1.1 * 1vmin);
  width: calc(var(--main-leaf-width) * 1.3 * 1vmin);
  border-radius: 95% 10%;
  border-right: 1px solid #111;
  border-top: 1px solid #111;
  background: #4d8473;
  transform: rotate(-35deg);
}

.main-leaf-four {
  position: fixed;
  top: 1%;
  right: -19%;
  z-index: 55;
  height: calc(var(--main-leaf-height) * 1.3 * 1vmin);
  width: calc(var(--main-leaf-width) * 1.2 * 1vmin);
  border-radius: 85% 5%;
  border-right: 1px solid #111;
  border-top: 1px solid #111;
  background: #4d8473;
  transform: rotate(-10deg);
}

.main-leaf-five {
  position: fixed;
  top: 21%;
  right: -26%;
  z-index: 55;
  height: calc(var(--main-leaf-height) * 1.3 * 1vmin);
  width: calc(var(--main-leaf-width) * 1vmin);
  border-radius: 85% 5%;
  border-right: 1px solid #111;
  border-top: 1px solid #111;
  background: #4d8473;
  transform: rotate(18deg);
}

.main-leaf-six {
  position: fixed;
  top: 46%;
  right: -30%;
  z-index: 55;
  height: calc(var(--main-leaf-height) / 1.2 * 1vmin);
  width: calc(var(--main-leaf-width) * 1.5 * 1vmin);
  border-radius: 95% 0%;
  border-right: 1px solid #111;
  border-top: 1px solid #111;
  background: #4d8473;
  transform: rotate(-8deg);
}

/* 云彩 */
.cloud-one {
  height: calc(var(--cloud-base-height) / 1.2 * 1vmin);
  width: calc(var(--cloud-base-width) * 1vmin);
  position: fixed;
  top: 50%;
  left: 0%;
  border-radius: 50%;
  background: linear-gradient(to bottom, #fff 50%, transparent 50%);
  animation: cloud 4s infinite;
}

.cloud-two {
  width: calc(var(--cloud-base-width) * 1vmin);
  height: calc(var(--cloud-base-height) / 1.3 * 1vmin);
  background: #fff;
  position: fixed;
  top: 0%;
  left: 0%;
  border-radius: 50%;
  background: linear-gradient(to bottom, #fff 50%, transparent 50%);
  animation: cloud 4s infinite;
}

.cloud-three {
  width: calc(var(--cloud-base-width) * 1.1 * 1vmin);
  height: calc(var(--cloud-base-height) / 1.2 * 1vmin);
  position: fixed;
  top: -30%;
  right: 5%;
  border-radius: 50%;
  background: linear-gradient(to bottom, #fff 50%, transparent 50%);
  animation: cloud 4s infinite;
}

.cloud-ball-one {
  position: fixed;
  height: calc(var(--cloud-ball-height) * 1.5 * 1vmin);
  width: calc(var(--cloud-ball-width) * 1.5 * 1vmin);
  background: linear-gradient(to bottom, #fff 50%, transparent 50%);
  border-radius: 50%;
  z-index: 99;
  top: 48%;
  animation: cloud 4s infinite;
}

.cloud-ball-two {
  position: fixed;
  height: calc(var(--cloud-ball-height) * 2 * 1vmin);
  width: calc(var(--cloud-ball-width) * 2 * 1vmin);
  background: linear-gradient(to bottom, #fff 50%, transparent 50%);
  border-radius: 50%;
  z-index: 99;
  top: 45%;
  left: 10%;
  animation: cloud 4s infinite;
}

.cloud-ball-three {
  position: fixed;
  height: calc(var(--cloud-ball-height) * 1.5 * 1vmin);
  width: calc(var(--cloud-ball-width) * 1.3 * 1vmin);
  background: linear-gradient(to bottom, #fff 50%, transparent 50%);
  border-radius: 50%;
  z-index: 99;
  top: -32%;
  left: 54%;
  animation: cloud 4s infinite;
}

.cloud-ball-four {
  position: fixed;
  height: calc(var(--cloud-ball-height) * 2 * 1vmin);
  width: calc(var(--cloud-ball-width) * 2 * 1vmin);
  background: linear-gradient(to bottom, #fff 50%, transparent 50%);
  border-radius: 50%;
  z-index: 99;
  top: -35%;
  left: 65%;
  animation: cloud 4s infinite;
}

.cloud-ball-five {
  position: fixed;
  height: calc(var(--cloud-ball-height) * 1.5 * 1vmin);
  width: calc(var(--cloud-ball-width) * 1.5 * 1vmin);
  background: linear-gradient(to bottom, #fff 50%, transparent 50%);
  border-radius: 50%;
  z-index: 99;
  top: -3%;
  left: 5%;
  animation: cloud 4s infinite;
}

.cloud-ball-six {
  position: fixed;
  height: calc(var(--cloud-ball-height) * 2 * 1vmin);
  width: calc(var(--cloud-ball-width) * 2 * 1vmin);
  background: linear-gradient(to bottom, #fff 50%, transparent 50%);
  border-radius: 50%;
  z-index: 99;
  top: -5%;
  left: 15%;
  animation: cloud 4s infinite;
}

@-webkit-keyframes cloud {
  0% {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }
  25% {
    -webkit-transform: translate(2px, 2px);
    transform: translate(2px, 2px);
  }
  50% {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }
  75% {
    -webkit-transform: translate(-1px, -1px);
    transform: translate(-1px, -1px);
  }
  100% {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }
}

@keyframes cloud {
  0% {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }
  25% {
    -webkit-transform: translate(2px, 2px);
    transform: translate(2px, 2px);
  }
  50% {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }
  75% {
    -webkit-transform: translate(-1px, -1px);
    transform: translate(-1px, -1px);
  }
  100% {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }
}

/* 灯 */
.lamp {
  position: fixed;
  height: calc(var(--lamp-height) * 1vmin);
  width: calc(var(--lamp-width) * 1vmin);
  top: -31%;
  right: -5%;
  z-index: 999;
  border-radius: 50%;
  background: linear-gradient(to bottom, #eb8fbb 42%, #000 43%, transparent 45%);
}

.lamp:hover {
  /* 触碰到灯时，鼠标箭头会变成小手 */
  cursor: pointer;
}

.lamp-wire {
  position: fixed;
  top: -206%;
  right: 18%;
  z-index: 9999;
  height: calc(var(--lamp-wire-height) * 1vmin);
  width: calc(var(--lamp-wire-width) * 1vmin);
  background: #444;
}

.lamp-shadow {
  height: calc(var(--lamp-width) / 1.01 * 1vmin);
  width: calc(var(--plant-two-shadow-width) / 3.4 * 1vmin);
  background: #222;
  position: fixed;
  z-index: 100;
  top: -38%;
  right: 17.3%;
  border-radius: 90% 50%;
  transform: rotate(89deg);
}

/* 夜晚部分的背景 */
.night {
  background: #120326;
}

/* 切换时需要隐藏云部分 */
.hide-cloud {
  visibility: hidden;
}

/* 星星 */
.star-one,
.star-two,
.star-three,
.star-four,
.star-five,
.star-six {
  position: fixed;
  height: calc(var(--star-height) * 1vmin);
  width: calc(var(--star-width) * 1vmin);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  background: #fff;
  border: 1px solid #eee;
  /* 先隐藏，后面通过 js 使之显示出来 */
  visibility: hidden;
}

.star-one {
  top: 50%;
  left: 60%;
  transform: rotate(45deg);
  animation: twinkle 2s infinite linear;
}

.star-two {
  top: 60%;
  left: 20%;
  transform: rotate(80deg);
  animation: twinkle 4s infinite linear;
}

.star-three {
  top: 10%;
  left: 40%;
  transform: rotate(20deg);
  animation: twinkle 2s infinite linear;
}

.star-four {
  top: -40%;
  left: 60%;
  transform: rotate(45deg);
  animation: twinkle 1s infinite linear;
}

.star-five {
  top: 30%;
  left: 20%;
  transform: rotate(45deg);
  animation: twinkle 3s infinite linear;
}

.star-six {
  top: -10%;
  left: 80%;
  transform: rotate(45deg);
  animation: twinkle 1s infinite linear;
}

@-webkit-keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.8;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0.8;
  }
}

@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.8;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0.8;
  }
}

/* 灯光 */
.light-source {
  position: fixed;
  top: -65%;
  right: -28.5%;
  filter: brightness(105%);
  z-index: 100;
  height: calc(var(--light-source-height) * 1vmin);
  width: calc(var(--lamp-width) / 1.02 * 1vmin);
  border-bottom: calc(var(--light-source-height) * 2.32 * 1vmin) solid #f9e79f;
  opacity: 0.6;
  border-left: calc(var(--lamp-width) / 2 * 1vmin) solid transparent;
  border-right: calc(var(--lamp-width) / 2 * 1vmin) solid transparent;
  border-top: 0;
  visibility: hidden;
  animation: twinkle 10s infinite linear;
}

.show-light,
.show-moon,
.show-star {
  visibility: visible !important;
} 

/* 月亮 */
.moon {
  height: calc(var(--moon-height) * 1vmin);
  width: calc(var(--moon-width) * 1vmin);
  position: fixed;
  background: linear-gradient(-45deg, #fff 40%, #eee 80%);
  border-radius: 50%;
  top: -33%;
  left: 13%;
  box-shadow: 0px 0px 5px 1px #fff;
  visibility: hidden;
}

script.js

/* 根据 id 选择 */
const lamp = document.getElementById("light-switch");
const topWindow = document.getElementById("window-top");
const mainWindow = document.getElementById("window-main");

/* css 选择 */
const lightSource = document.querySelector(".light-source");
const moon = document.querySelector(".moon");
const clouds = document.querySelectorAll(".c");
const stars = document.querySelectorAll(".s");

/* 事件监听 */
lamp.addEventListener("click", () => {
  topWindow.classList.toggle("night");
  mainWindow.classList.toggle("night");
  clouds.forEach(c => c.classList.toggle("hide-cloud"));
  lightSource.classList.toggle("show-light");
  moon.classList.toggle("show-moon");
  stars.forEach(s => s.classList.toggle("show-star"));
});

 七、获取源码

老规矩，先给朋友们看一下完整文件夹，

正确的文件如下图 ，复制源码的朋友们请注意了！！！

公众号获取源码 

第一步，通过微信公众号下载源码压缩包，解压并打开文件夹，即为上图样式（复制源码请注意路径及文件名）

第二步，点击 html 文件 打开即可查看

2023年第二十四期，希望得到大家的喜欢🙇‍

也是新的系列，将会持续更新，🙇‍

希望大家有好的意见或者建议，欢迎私信

以上就是本篇文章的全部内容了

 ~ 关注我，点赞博文~ 每天带你涨知识!

1.看到这里了就 [点赞+好评+收藏] 三连 支持下吧，你的「点赞，好评，收藏」是我创作的动力。

2.关注我 ~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、HTML模板 、C++、数据结构、Python程序设计、Java程序设计、爬虫等！ 「在这里有好多 开发者，一起探讨 前端 开发 知识，互相学习」！

3.以上内容技术相关问题可以相互学习，可 关 注 ↓公 Z 号 获取更多源码 !
 

获取源码？私信？关注？点赞？收藏？

👍+✏️+⭐️+🙇‍

有需要源码的小伙伴可以 关注下方微信公众号 " Enovo开发工厂 "，回复 关键词 " a-wbg "

Enovo_你当像鸟飞往你的山
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
HTML+CSS+JS数据可视化大屏平台模板实例10-大数据地图
03-25
HTML+CSS+JS数据可视化大屏平台模板实例10-大数据地图
web前端期末结课大作业 html+css+javascript网页设计实例 企业网站制作
11-15
期末结课大作业 html+css+javascript网页设计实例 企业网站制作，资源里面有网页的HTML文件、CSS文件、JAVASCRIPT文件和网页中的图片文件，用于大学web网页课程设计参考以及相关从业人员参考学习
HTML好玩代码（正式版）
最新发布
weixin_39518735的博客
02-22 753
后期还想看其他Html代码的话，可以去我的主页看HTML的其它代码（VIP）一、圣诞树效果（音乐可自行选择）
HTML+CSS+JS数据可视化大屏平台模板实例30-智慧物联网+GIS地图通用模板
03-25
HTML+CSS+JS数据可视化大屏平台模板实例30-智慧物联网+GIS地图通用模板
HTML+CSS+JS数据可视化大屏平台模板实例21-大数据可视化通用模板
03-25
HTML+CSS+JS数据可视化大屏平台模板实例21-大数据可视化通用模板
分享12个精妙有趣的HTML5应用
weixin_34090562的博客
01-28 362
　　十天前，W3C发布了HTML5的Logo，不过WHATWG随后宣布取消HTML5的版本号，取而代之的是一个活的HTML标准，这个标准会随着新技术的发展而不断更新。其实大家叫HTML5都叫习惯了，我们还是继续叫HTML5好了，只是这个名称的含义仅是用来指最新的HTML技术而已。下面的例子充分展现了HTML5的优越性，希望你能喜欢，更多更精彩的应用正等着大家去实现 :) The Wilderne...
好玩的html代码
hfhfekjf的博客
12-13 1618
.
分享95个HTML娱乐休闲模板，总有一款适合您
zy0412326的专栏
02-19 426
html
HTML创意动画代码
热门推荐
qq_52108058的博客
02-25 1万+
这个代码使用了 Canvas 技术，创建了一个随机生成的气泡背景并且让气泡动态漂浮，形成了一个很有趣的效果。你可以在这个基础上尝试进行一些自己的创意，比如修改气泡的数量、大小、颜色，以及运动的方式等等。 这个代码使用了 CSS 的动画和阴影特效，让页面中的文字在红、橙、黄、绿、蓝五种颜色之间不断变化，形成了一个很有趣的效果。你可以在这个基础上尝试进行一些自己的创意，比如修改文字的大小、样式、颜色，以及变化的频率和方式等等。 该示例中，我们使用了 transform-style: preserve-3d 属性
html 开关窗效果,逼真的HTML5+CSS3窗帘拉开收起动画特效
weixin_27207591的博客
06-03 915
逼真的HTML5+CSS3窗帘拉开收起动画特效html {box-sizing: border-box;}*, *::after, *::before {box-sizing: inherit;}*, *:before, *:after {box-sizing: border-box;outline: none;}body {width: 100%;height: 100vh;font-famil...
CSS3过渡效果小练习-进度条
nuomi_w的博客
11-15 1324
Document
H5前端实战案例_前端开发_窗边风景动画（css+js）.rar
10-30
CSS+js实例。窗边风景动画（css+js），超简单的代码就能实现高大上的功能，全文注释。
HTML5嘅小游戏,一些有趣的 HTML 5 交互小游戏
weixin_39581995的博客
05-30 529
HTML 5 的诞生已经有些时日，它向我们呈现了令人惊叹的视觉效果。基于网页的交互究竟能有多优秀？这些网站可以告诉你答案。在网页上的精美制作：MakeMePulseMakeMePulse 连续两年制作了基于鼠标的交互网页——MakeMePulse 2017 在这个页面中，你可以看到制作精美的灯泡、拍立得、机器人、纸飞机、登月飞船这五个页面。同样是 MakeMePulse 制作的 2016 Make...
有趣的HTML实例（十一） 烟花特效（css+js）
好好读书
02-15 3675
有趣的HTML实例（十一） 烟花特效（css+js） 一款简单的 HTML+CSS+JS 烟花特效（css+js）实例 1、HTML 2、CSS 3、JS 4、舒适的画面感 5、烟花特效 6、自定义文字
html5 有趣的应用,挚爱HTML5 7款华丽的HTML5/CSS3应用
weixin_34822215的博客
06-16 226
本文作者html5tricks，转载请注明出处新的一周开始了，小编继续为大家分享一些不错的1、HTML5/CSS3图片选择动画 可选择多张图片之前我们已经分享过几款很酷的HTML5图片特效，像HTML5 3D图片折叠特效、HTML5 3D旋转图片相册等应用。今天我们来分享一款既炫酷又实用的HTML5图片选择特效，当图片被选中时，图片上就会覆盖一个半透明的层，上面有一个勾，并且在选中的时候图片出现弹...
用代码来过端午节---基于HTML的端午节划龙舟小游戏
优秀的程序员不应该是CRUD
06-03 3014
作为程序员，虽然可能并没有机会去实时实地滴去试一试划龙舟，但我们还是得发挥一下我们的技术，就来简单的做一个基于HTML+CSS+JS的划龙舟小游戏吧。说干就干！ css代码 js代码 二、运行一下吧 我们可以通过键盘操作龙舟左右移动，躲避障碍物，最后计算出碰撞前的最后得分。很简单的一个html小游戏,直接复制代码，运行一下试试看吧！...
纯HTML+CSS实现动画
cnds123的专栏
06-11 1977
这是从网上收集来的纯HTML+CSS实现的几个网页动画，生动形象，比较有参考价值。
（有趣）好玩的html代码
hfhfekjf的博客
12-29 5086
在线生成炫酷文字，有很多选项，还有一个记录有趣的逝。点评点评我的文章吧，求求了。
html+css+js数据可视化大屏平台模板实例
08-01
HTML、CSS、JS数据可视化大屏平台模板实例是一种用于展示大量数据、实时数据或统计数据的界面模板。通过使用HTML、CSS和JavaScript等前端技术，开发人员可以轻松地创建交互式和可视化的大屏展示页面。 该模板通常由...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Enovo_你当像鸟飞往你的山

好好读书！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值