标志动画向你走来

Question

我想让这个徽标文本 朝我走来，就像它的弹出一样文本缩放，当我将鼠标悬停在上时没有左右移动！但我似乎无法正确地做到这一点！有人可以帮忙吗？

下面是我的 HTML 和 CSS 代码！

在你的编辑器上试试，以便更好地理解！

CSS 上的元素是 #logo 和 #logo:hover

body {
  background-image: url(../images/index_bg.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

.topnav {
  background-color: black;
  overflow: hidden;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  border-top: 3px solid rgb(32, 236, 255);
  border-bottom: 3px solid rgb(32, 236, 255);
  outline: none;
  border-color: rgb(32, 236, 255);
  box-shadow: 0 0 10px rgb(32, 236, 255);
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);
}

.topnav a {
  float: left;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  color: rgb(32, 236, 255);
  text-align: center;
  padding: 11px 15px;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
  position: relative;
}

.topnav a:hover {
  color: hotpink;
  transition: ease 0.6s;
  font-weight: bold;
}

.topnav a.active {
  background-color: rgb(32, 236, 255);
  color: white;
  text-shadow: 0px 0px 10px black;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
}

#logo {
  font-family: "Playball";
  position: absolute;
  left: 43%;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
  transition: ease 0.6s;
}

#logo:hover {
  background-color: blue;
  transform: scale(1.1);
}

.social {
  float: right;
}

.footer {
  position: fixed;
  bottom: 3px;
  left: 8px;
  right: 8px;
  text-align: center;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
  background-color: black;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  border-top: 3px solid rgb(32, 236, 255);
  border-bottom: 3px solid rgb(32, 236, 255);
  outline: none;
  border-color: rgb(32, 236, 255);
  box-shadow: 0 0 10px rgb(32, 236, 255);
}

#footerdesc a:hover {
  background-color: rgb(32, 236, 255);
  color: black;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
  transition: ease 0.6s;
  padding: 5px 5px;
}

#footerdesc {
  text-decoration: none;
  color: cyan;
}

<body>
  <header>
    <div class="topnav">
      <a class="active" href="index.html" title="Homepage"><i class="fa-solid fa-house"></i> Home</a
            >
            <a href="portfolio.html"
            title="Portfolio Website"
              ><i class="fa-solid fa-wallet"></i> Portfolio</a
            >
            <a href="contact.html"
            title="Contact Website"
              ><i class="fa-regular fa-circle-user"></i> Contact</a
            >
            <a href="about.html"
            title="About Website">
            <i class="fa-regular fa-comment"></i> About</a>
      <a href="index.html" id="logo" title="You are already at the Homepage!">BESMART &nbsp; INDUSTRIES</a>
      <div class="social">
        <a class="facebook" href="https://facebook.com" target="_blank" title="Facebook Page"><i class="fa-brands fa-facebook"></i>&nbsp Facebook</a
              >
              <a
                class="instagram"
                href="https://instagram.com"
                target="_blank"
                title="Instagram Page"
                ><i class="fa-brands fa-instagram"></i>&nbsp Instagram</a
              >
              <a
                class="twitter"
                href="https://twitter.com"
                target="_blank"
                title="Twitter Page"
                id="twitter"
                ><i class="fa-brands fa-twitter"></i>&nbsp Twitter</a
              >
            </div>
          </div>
        </header>
    
        <footer>
          <div class="footer">
            <p id="footerdesc">
              Made with love by >
              <a href="index.html" id="footerdesc" title="Visit Our Website"><em>BE'SMART INDUSTRIES</em></a>
        < </p>
      </div>
      </footer>
</body>

</html>

Answer 1

使用变换属性在悬停时实现这一点。

 transform: scale(1.1);

Answer 2

也许你可以在那个标志上使用 transform: scale()

transform: scale(1.1)

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale()

Answer 3

是拉斯塔，你可以只用 scale();

Syntax: transform: scale(2, 0.5); where, 2 belongs to x axis and 0.5 belongs to y axis from the origin.

建议：您也可以添加动画效果，您可以从下面的站点获取参考，您可以从中复制代码以获取帮助。

https://animate.style/

谢谢。

标志动画向你走来

Logo Animation Coming Towards You

html

css

animation

hover