设计一个swiper-pagination的css,要求淡灰色透明白点,在页面高度居中距离右侧100px
时间: 2024-06-11 18:07:00 浏览: 13
以下是一个可能的CSS样式代码:
.swiper-pagination {
position: absolute;
bottom: 50%;
right: 100px;
transform: translateY(50%);
}
.swiper-pagination-bullet {
width: 8px;
height: 8px;
background-color: rgba(200, 200, 200, 0.5);
border-radius: 50%;
margin: 0 6px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.swiper-pagination-bullet-active {
background-color: white;
}
解释一下:
- 首先,我们使用绝对定位将分页器放置在页面底部中心。
- 我们使用transform: translateY(50%)将分页器垂直居中。
- right: 100px将分页器离页面右侧100px。
- 我们使用.swiper-pagination-bullet来样式化每个分页器点。
- 我们使用rgba(200, 200, 200, 0.5)来设置淡灰色和半透明。
- 我们使用border-radius: 50%将点形状变为圆形。
- 我们使用margin: 0 6px来设置点之间的间距。
- 我们使用cursor: pointer来在鼠标悬停时显示手形光标。
- 我们使用transition: background-color 0.3s ease来添加一个渐变动画效果。
- 最后,我们使用.swiper-pagination-bullet-active来样式化当前活动的分页器点。在这里,我们将背景颜色设置为白色。