拯救萤火虫

洋-Yang

已于 2023-06-26 16:17:25 修改

阅读量82

点赞数

文章标签： html css

于 2023-06-26 16:13:29 首次发布

本文链接：https://blog.csdn.net/Yang_heihei/article/details/131399885

版权

该文章展示了一个使用HTML和CSS构建的互动效果，模拟萤火虫被困在瓶中，当鼠标划过时，萤火虫会飞走，同时瓶口的盖子打开，显示感谢信息。通过CSS动画，实现了萤火虫翅膀振动、瓶子晃动以及萤火虫飞走的视觉效果。

摘要由CSDN通过智能技术生成

通过使用HTML与CSS构建一个萤火虫困在瓶中的效果，通过鼠标划入使其飞走效果！！！

HTML部分：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Firefly CSS</title>

    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <div class="container">
      <div class="jar">
        <!-- 文字部分 -->
        <div class="wording help">HELP!</div>
        <div class="wording thanks">THANKS! :)</div>
        <!-- 瓶口 -->
        <div class="jartop"></div>
        <!-- 瓶盖 -->
        <div class="jarlid"></div>
        <!-- 瓶体 -->
        <div class="firefly">
          <!-- 萤火虫身体 -->
          <div class="body">
            <!-- 萤火虫尾部 -->
            <div class="bodybottom"></div>
          </div>
          <!-- 左翅膀 -->
          <div class="wing wing-left"></div>
          <!-- 右翅膀 -->
          <div class="wing wing-right"></div>
          <!-- 萤火虫头部 -->
          <div class="head"></div>
        </div>
      </div>
    </div>
  </body>
</html>

css部分：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  position: relative; 
  display: flex;
  justify-content: center;
  align-items: center; 
  width: 100%; 
  height: 100vh;
  background: #3b3b3b;
  overflow-y: hidden; 
}

.container {
  position: relative; 
  width: 80vmin; 
  height: 80vmin; 
}

.jar {
  position: absolute; 
  width: 60vmin; 
  height: 50vmin; 
  background: #768c90; 
  border-bottom-left-radius: 10vmin; 
  border-bottom-right-radius: 10vmin; 
  top: 30vmin;
  left: 10vmin;
}
/* 瓶口左边 */
.jar:before {
  position: absolute; 
  content: "";
  border-radius: 25% 75% 0% 100% / 100% 0% 100% 0%; 
  background: #768c90;
  width: 31vmin;
  height: 20vmin;
  top: -19vmin;
}
.jar:after {
  position: absolute;
  content: "";
  border-radius: 25% 75% 0% 100% / 100% 0% 100% 0%;
  background: #768c90;
  width: 31vmin;
  height: 20vmin;
  top: -19vmin;
  left: 29vmin;
  transform: scaleX(-1);
}
/* 瓶口 */
.jartop {
  position: absolute;
  width: 48vmin;
  height: 20vmin;
  background: #768c90;
  top: -21vmin;
  left: 6vmin;
  z-index: 1;
}
/* 瓶盖 */
.jarlid {
  position: absolute;
  width: 55vmin;
  height: 6vmin;
  background: #dcdedf;
  border-radius: 10vmin;
  top: -28vmin;
  left: 2.3vmin;
  transform-origin: 100% 100%;
}
/* 文字部分 */
.wording {
  position: absolute;
  left: 10vmin;
  font-family: "Gloria Hallelujah", cursive;
  font-size: 5vmin;
  color: #3b3b3b;
  user-select: none;
}
/* HELP!文字 */
.help {
  transform: rotate(-15deg);
  opacity: 1;
  transition: opacity 2s;
  transition-delay: 1s;
}
/* THANKS! :) */
.thanks {
  transform: rotate(15deg);
  opacity: 0;
  left: 15vmin;
  top: 10vmin;
}
/* 瓶体 */
.firefly {
  position: absolute;
  width: 0vmin;
  height: 0vmin;
  left: 10vmin;
  top: -5vmin;
  z-index: 1;
}
/* 萤火虫身体 */
.body {
  position: absolute;
  width: 12vmin;
  height: 10vmin;
  background: #c7535d;
  z-index: 1;
  left: 14vmin;
  top: 15vmin;
  z-index: 1;
}
/* 萤火虫尾部 */
.bodybottom {
  position: absolute;
  width: 12vmin;
  height: 8vmin;
  background: #fec14f;
  top: 9vmin;
  border-radius: 0 0 10vmin 10vmin;
  z-index: -1;
}
/* 翅膀 */
.wing {
  position: absolute;
  background: #3b3b3b;
  border-radius: 50%;
  width: 25vmin;
  height: 9.5vmin;
  left: -5vmin;
  top: 7vmin;
  transform: rotate(-45deg);
  z-index: 3;
  transform-origin: 100% 50%;
}

/* 右翅膀 */
.wing-right {
  position: absolute;
  content: "";
  background: #3b3b3b;
  width: 25vmin;
  height: 9.5vmin;
  transform: rotate(45deg);
  left: 20vmin;
  top: 7vmin;
  border-radius: 50%;
  transform-origin: 0% 50%;
}
/* 萤火虫头部 */
.head {
  position: absolute;
  width: 8vmin;
  height: 8vmin;
  border-radius: 50%;
  background: #3b3b3b;
  left: 16vmin;
  top: 4vmin;
  z-index: 2;
}

/* 右触角 */
.head:before {
  position: absolute;
  content: "";
  width: 6vmin;
  height: 6vmin;
  border: 0.6vmin solid;
  border-radius: 50%;
  border-color: #3b3b3b transparent transparent transparent;
  left: 5vmin;
  top: -2vmin;
  transform: rotate(-30deg);
}

/* 左触角 */
.head:after {
  position: absolute;
  content: "";
  width: 6vmin;
  height: 6vmin;
  border: 0.6vmin solid;
  border-radius: 50%;
  border-color: #3b3b3b transparent transparent transparent;
  left: -4vmin;
  top: -2vmin;
  transform: rotate(30deg);
}
/* 发光 */
.jar:hover .firefly .bodybottom {
  box-shadow: inset 0vmin 18vmin 0vmin #ffeac4, 0px 0px 40vmin 20vmin #fec14f;
}
/* 划过时翅膀变色 */
.jar:hover .firefly .wing {
  background: #767676;
}

.jar:hover .firefly .wing-left {
  animation: flap-left 0.2s 2.4s 10 linear;
}
.jar:hover .firefly .wing-right {
  animation: flap-right 0.2s 2.4s 10 linear;
}

.jar:hover .firefly .wing:after {
  background: #767676;
}

.jar:hover .firefly .head {
  background: #767676;
}

.jar:hover .firefly .head:after {
  border-color: #767676 transparent transparent transparent;
}

.jar:hover .firefly .head:before {
  border-color: #767676 transparent transparent transparent;
}

.jar:hover {
  animation: shake 1s 3 linear;
}

.jar:hover .firefly {
  animation: shake 0.5s linear infinite;
}

.jar:hover .jarlid {
  animation: lid-rise 5s 2s linear;
}

.jar:hover .firefly {
  animation: fly 2s 3s linear forwards;
}
.jar:hover > .help {
  opacity: 0;
}
.jar:hover > .thanks {
  animation: fade-in 5s 1s normal forwards 1;
}
/* 左翅膀振动 */
@keyframes flap-left {
  0% {
    transform: rotate(-75deg);
  }
  50% {
    transform: rotate(-15deg);
  }
}
/* 右翅膀振动 */
@keyframes flap-right {
  0% {
    transform: rotate(75deg);
  }
  50% {
    transform: rotate(15deg);
  }
}
/* 瓶子晃动 */
@keyframes shake {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }

  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }

  20% {
    transform: translate(-3px, 0px) rotate(1deg);
  }

  30% {
    transform: translate(3px, 2px) rotate(0deg);
  }

  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }

  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }

  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }

  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }

  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }

  90% {
    transform: translate(1px, 2px) rotate(0deg);
  }

  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}

@keyframes move {
  0% {
    transform: translateY(-5vmin);
  }
  100% {
    transform: translateY(0vmin);
  }
}
/* 瓶盖开起 */
@keyframes lid-rise {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(90deg);
  }
  100% {
    transform: rotate(90deg);
  }
}
/* 向上飞 */
@keyframes fly {
  0% {
    transform: translateY(-5vmin);
  }
  100% {
    transform: translateY(-150vmin);
  }
}
/* 飞走显示THANKS! :) */
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  66% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}