當我將滑鼠懸停在它上面但不左右移動時，我想讓這個徽標文本 像文本縮放后突然出現在我身邊一樣！但我似乎無法正確地做到這一點！有人可以幫忙嗎？
下面是我的 HTML 和 CSS 代碼！
在您的編輯器上嘗試以更好地理解！
CSS 上的元素是#logo和#logo:hover
HTML：
<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>
CSS：
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;
padding: ;
}
.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;
}
uj5u.com熱心網友回復：
使用 transform 屬性在懸停時實作。
transform: scale(1.1);
uj5u.com熱心網友回復：
也許您可以在該徽標上使用 transform: scale()
transform: scale(1.1)
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale()
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/438388.html
下一篇：pygame：精靈的動作沒有改變