B站回顶小火箭，如何实现悬停效果？外加平泽唯挥手表情包！

2023-12-20 05:52:51

B站上那个萌萌哒的回顶小火箭，相信大家都见过。它不仅颜值爆表，而且功能强大，轻轻一点，就能瞬间回到页首。今天，我们就来揭秘一下，这个小火箭是如何实现悬浮和点击效果的。

准备工作

在开始之前，我们需要准备一些东西：

一个文本编辑器，比如记事本、Sublime Text、Visual Studio Code等。
一个现代浏览器，比如Chrome、Firefox、Edge等。
一些基本的HTML和CSS知识。

代码实现

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="rocket">
      <div class="rocket-body">
        <div class="rocket-fin"></div>
        <div class="rocket-fin"></div>
        <div class="rocket-fin"></div>
      </div>
      <div class="rocket-fire"></div>
    </div>
    <div class="content">
      <h1>B站回顶小火箭</h1>
      <p>这是一个使用CSS动画实现的B站回顶小火箭效果。点击小火箭，即可快速回到页首。</p>
      <a href="#top" class="btn">回到顶部</a>
    </div>
  </div>
</body>
</html>

CSS样式

/* 重置样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 容器样式 */
.container {
  position: relative;
  height: 100vh;
}

/* 小火箭样式 */
.rocket {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 60px;
  height: 60px;
  cursor: pointer;
}

/* 小火箭主体样式 */
.rocket-body {
  position: relative;
  width: 40px;
  height: 40px;
  background-color: #FF6347;
  border-radius: 50%;
}

/* 小火箭尾翼样式 */
.rocket-fin {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #FFD700;
  transform: rotate(45deg);
}

/* 小火箭火焰样式 */
.rocket-fire {
  position: absolute;
  bottom: -10px;
  width: 20px;
  height: 20px;
  background-color: #FFEA00;
  border-radius: 50%;
  animation: fire 1s infinite alternate;
}

/* 小火箭火焰动画 */
@keyframes fire {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

/* 内容样式 */
.content {
  position: relative;
  padding: 20px;
}

/* 回到顶部按钮样式 */
.btn {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 10px 20px;
  background-color: #FF6347;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
}

/* 回到顶部按钮悬停样式 */
.btn:hover {
  background-color: #FFD700;
}

实现原理

悬浮效果

小火箭的悬浮效果是通过CSS的position属性来实现的。我们把小火箭定位为fixed，这样它就会固定在页面上，不会随着页面的滚动而移动。然后，我们再把小火箭放在页面的右下角，这样它就始终显示在页面的右下角了。

点击效果

小火箭的点击效果是通过JavaScript来实现的。我们给小火箭添加了一个点击事件监听器，当用户点击小火箭时，就会触发这个事件监听器。在事件监听器中，我们使用window.scrollTo()方法让页面滚动到页首。

平泽唯挥手表情包

除了实现B站回顶小火箭的效果外，我们还可以使用CSS动画来实现平泽唯挥手的表情包效果。

HTML结构

<div class="yui">
  <div class="yui-head">
    <div class="yui-hair"></div>
    <div class="yui-face"></div>
  </div>
  <div class="yui-body"></div>
  <div class="yui-arm">
    <div class="yui-hand"></div>
  </div>
</div>

CSS样式

/* 平泽唯样式 */
.yui {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

/* 平泽唯头部样式 */
.yui-head {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #FF6347;
}

/* 平泽唯头发样式 */
.yui-hair {
  position: absolute;
  top: -20px;
  left: 50%;
  width: 50px;
  height: 50px;
  background-color: #000;
  border-radius: 50%;
}

/* 平泽唯脸部样式 */
.yui-face {
  position: absolute;
  top: 20px;
  left: 50%;
  width: 80px;
  height: 80px;
  background-color: #FFD700;
  border-radius: 50%;
}

/* 平泽唯身体样式 */
.yui-body {
  position: absolute;
  top: 100px;
  left: 50%;
  width: 100px;
  height: 100px;
  background-color: #FFEA00;
  border-radius: 50%;
}

/* 平泽唯手臂样式 */
.yui-arm {
  position: absolute;
  top: 100px;
  left: 50%;
  width: 50px;
  height: 100px;
  transform: rotate(45deg);
}

/* 平泽唯手部样式 */
.yui-hand {
  position: absolute;
  top: 90px;
  left: 50%;
  width: 20px;
  height: 20px;
  background-color: #FF6347;
  border-radius: 50%;
  animation: wave 1s infinite alternate;
}

/* 平泽唯挥手动画 */
@keyframes wave {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(45deg);
  }
  100% {
    transform: rotate(0deg);
  }
}