思路:
- 首先先定义一个足够宽的大容器 例如300vw 三个页面宽度的大小
- 里面放3个小盒子 每个小盒子占满全屏,100vw 100vh
- 点击下面的按钮然后选择大容器元素
- 给大容器的left值 (相对定位),向左偏移一个页面的宽度100vw 就达到切换每个页面的效果
- 动画主要采用的 transition 过渡
首先我们看下实现的效果:
代码里面都标有注释,具体看代码:
Html
<div class="container">
<div class="tabs">
<!-- type radio 单选框 name 为一组 这样三个单选只能选择一个 -->
<input type="radio" id="web" name="slider">
<input type="radio" id="grap" name="slider">
<input type="radio" id="photo" name="slider">
<div class="buttons">
<!-- for 绑定 input -->
<label for="web"></label>
<label for="grap"></label>
<label for="photo"></label>
</div>
<!-- 定义大容器 大盒子 -->
<div class="content">
<!-- 定义小容器 小盒子 -->
<!-- 这里定义三个box相同的类名,是为了在css写三个盒子的共同样式 -->
<div class="box web"></div>
<div class="box grap"></div>
<div class="box photo"></div>
</div>
</div>
</div>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
position: relative;
/* width: 100%; */
height: 100vh;
background: #000;
overflow: hidden;
}
.tabs input {
visibility: hidden;
display: none;
}
.buttons {
/* 实现水平居中 */
position: absolute;
bottom: 50px;
left: 50%;
transform: translateX(-50%);
/* 变为横向布局 */
display: flex;
/* 设置间距10px */
gap: 10px;
/* 设置层级 */
z-index: 10000000;
}
.buttons label {
/* 初始化按钮样式 */
width: 20px;
height: 20px;
background-color: #fff;
opacity: 0.5;
border-radius: 20px;
cursor: pointer;
transition: 0.5s;
}
/* 当tabs的第一个input被选中，buttons的第一个label的不透明度设为1，宽度为50px */
.tabs input:nth-child(1):checked~.buttons label:nth-child(1),
.tabs input:nth-child(2):checked~.buttons label:nth-child(2),
.tabs input:nth-child(3):checked~.buttons label:nth-child(3) {
opacity: 1;
width: 50px;
}
/* 定义 content 主要内容 */
.content {
/* 设置相对定位,方便后面在点击按钮的时候进行left属性进行偏移*/
position: relative;
/* 3 个 页面宽度 */
width: 300vw;
/* 横向布局 */
display: flex;
/* 添加过渡效果 */
transition: 0.5s;
}
/* 定义每一个页面的共同样式 */
.content .box {
position: relative;
width: 100vw;
height: 100vh;
/* flex布局 水平垂直居中 */
display: flex;
justify-content: center;
align-items: center;
user-select: none;
padding: 40px
}
/* 设置每个页面的背景颜色*/
.content .box:nth-child(1) {
background: linear-gradient(to right, #1cefff, #c0c0aa);
}
.content .box:nth-child(2) {
background: linear-gradient(to right, #9cecfb, #65c7f7, #0052d4);
}
.content .box:nth-child(3) {
background: linear-gradient(to right, #3494e6, #ec6ead);
}
/* 这里是实现轮播的关键点 , 主要实现思路是运用到的相对定位 的偏移值
当我们点击第一个button 的适时候 button 已经绑定input元素
点击第一个button content大盒子的left 向左偏移100vw
因为一个页面 是100vw 这个content 盒子定义的大小是300vw
*/
.tabs input:nth-child(1):checked~.content {
left: 0;
}
.tabs input:nth-child(2):checked~.content {
left: -100vw;
}
.tabs input:nth-child(3):checked~.content {
left: -200vw;
}
推荐几个我常用的渐变色示例网站 (也支持定制):
最后有什么疑问可以在评论区回复,作者看到就会回复的.
