css右侧圆点滚动导航 |css首选

// HTML代码
<div class="container">
<div class="nav">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Portfolio</a>
<a href="#">Contact</a>
</div>
</div>
// CSS代码
.container {
position: relative;
height: 100%;
}
.nav {
position: absolute;
top: 50%;
right: -5rem;
transform: translateY(-50%);
}
.nav a {
display: block;
margin-bottom: 1rem;
padding: 0.5rem;
border: 2px solid #fff;
border-radius: 50%;
color: #fff;
font-size: 2rem;
text-align: center;
text-decoration: none;
transition: all .3s ease;
}
.nav a:hover {
border-color: #f00;
color: #f00;
}

首先，在HTML中创建一个包含导航链接的容器。然后，在CSS中设置容器的相对位置，并将导航链接的绝对位置设置为容器的右侧。这样可以保证导航条不会遮挡页面内容。

接下来，大家使用CSS的transform功能将导航条垂直居中。然后，为导航链接设置样式，包括边框、颜色、字体大小等。大家使用了border-radius属性，将导航链接变为圆点的形式。

最后，为导航链接设置鼠标悬停的效果。大家使用了transition属性，为链接设置一个过渡动画，让用户在使用导航时可以有更好的体验。

通过这样的方式，大家就可以轻松创建一个漂亮、实用的CSS右侧圆点滚动导航。