菜单 搜索
首页 前端知识 用html写一个窗口风景动画

用html写一个窗口风景动画

2024-05-14 23:05:15 前端知识 前端哥 324 105 我要收藏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>窗边风景动画</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>

/* 根据 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"));
});

/* 设置需要用的参数 */
: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;
}
转载请注明出处或者链接地址：https://www.qianduange.cn//article/8648.html
标签
风景
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！