CSS鏈接滾動, 是一種常見的Web頁面效果之一。其通過CSS樣式來實現鼠標懸浮在鏈接上時,鏈接會平滑滾動到頁面指定位置的效果。這種效果可以增強Web頁面的可視性、可用性和互動性, 并且非常適合導航欄或頁面內部鏈接的使用。
<html>
<head>
<style>
a
{
color: #333;
text-decoration: none;
padding: 5px;
margin: 5px;
border-radius: 5px;
background-color: #eee;
transition: all 0.3s ease-in-out;
}
a:hover
{
color: #fff;
background-color: #F3722C;
transform: translateY(-5px);
}
#section1, #section2, #section3
{
height: 500px;
font-size: 50px;
text-align: center;
line-height: 500px;
}
#section1
{
background-color: #F92772;
}
#section2
{
background-color: #F3722C;
}
#section3
{
background-color: #CDBB70;
}
html
{
scroll-behavior: smooth;
}
</style>
</head>
<body>
<div class="wrapper">
<nav class="navbar">
<a href="#section1">Section 1</a>
<a href="#section2">Section 2</a>
<a href="#section3">Section 3</a>
</nav>
<div id="section1">Section 1</div>
<div id="section2">Section 2</div>
<div id="section3">Section 3</div>
</div>
</body>
</html>上面是一個實現CSS鏈接滾動的例子。HTML頁面包含一個導航欄和三個DIV，其中DIV的ID屬性與導航欄中的鏈接的href屬性相對應，并可實現頁面內滾動目標。CSS中的scroll-behavior: smooth;屬性可以使頁面在滾動時平滑滾動。
當鼠標懸停在鏈接上時，鏈接的字體顏色、背景色和位置都發生了改變,實現了簡單的交互動效。這使用CSS中的:hover選擇器和transition屬性完成。
總而言之, CSS鏈接滾動是一種十分實用且不難實現的Web效果。您可以在自己的網站或個人博客中嘗試使用，以增強頁面的交互體驗。
上一篇css高度獲取寬度的比例
下一篇css高度填滿父級