标志动画向你走来
我想让这个徽标文本朝我走来，就像它弹出与文本缩放一样，当我将鼠标悬停在上面，但没有左右移动！但我似乎无法正确地做到这一点！有人可以帮忙吗？
下面是我的 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 INDUSTRIES</a>
<div class="social">
<a class="facebook" href="https://facebook.com" target="_blank" title="Facebook Page"><i class="fa-brands fa-facebook"></i>  Facebook</a
>
<a
class="instagram"
href="https://instagram.com"
target="_blank"
title="Instagram Page"
><i class="fa-brands fa-instagram"></i>  Instagram</a
>
<a
class="twitter"
href="https://twitter.com"
target="_blank"
title="Twitter Page"
id="twitter"
><i class="fa-brands fa-twitter"></i>  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>I want to make this Logo Text come towards me like its popping out of place with the Text Zoomed, when I Hover Over it but not moving left and right! But I can't seem to do it properly! Can someone help please?
Below is my HTML and CSS code!
Try it on Your Editor for better understanding!
The element on CSS is #logo and #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 INDUSTRIES</a>
<div class="social">
<a class="facebook" href="https://facebook.com" target="_blank" title="Facebook Page"><i class="fa-brands fa-facebook"></i> Facebook</a
>
<a
class="instagram"
href="https://instagram.com"
target="_blank"
title="Instagram Page"
><i class="fa-brands fa-instagram"></i> Instagram</a
>
<a
class="twitter"
href="https://twitter.com"
target="_blank"
title="Twitter Page"
id="twitter"
><i class="fa-brands fa-twitter"></i> 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>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
也许您可以在该徽标上使用transform:scale()
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale()
Maybe you can use transform: scale() on that logo
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale()
使用变换属性来实现悬停时的效果。
Use the transform property to achieve that on hover.
是的，拉斯塔法，
你可以只用scale()来做到这一点；
建议：您也可以添加动画效果，您可以从以下站点获取参考，并且可以从中复制代码以获取帮助。
https://animate.style/
谢谢。
Yes Rasta,
you can do it with only scale();
Suggestions: Also you may add animation effects as well and you may take references from below site and you may copy the code from it for your help.
https://animate.style/
Thanks.