纯CSS实现的轮播图
2020-12-22 18:27
标签：博客 本地 family otto bottom tom inpu 函数 改变 一、自动跳转轮播图 1、HTML结构 2、CSS样式 主要是通过#wrap元素css样式设置 overflow：hidden，通过改变#main元素 的 left 属性和 animation 属性，实现轮播图，其中.page元素设置float：left ，使之并排。 3、效果图（不懂怎么在博客园插入本地电脑的视频，见谅！） 拓展： steps()是一个timing-function（animation中），允许我们将动画或者过渡分割成段，而不是从一种状态持续到另一种状态的过渡。 但有些效果不需要补间，只需要关键帧之间的跳跃，这时应该使用 使用方法： steps ( n,[start | end] ) n是一个自然数， 二、点击跳转轮播图 1、HTML结构 2、CSS样式 3、效果图（等我了解怎么传本地视频再看了） 以上内容参考各位大神，还有些自己的见解，多多包涵！！ 纯CSS实现的轮播图 标签：博客 本地 family otto bottom tom inpu 函数 改变 原文地址：https://www.cnblogs.com/daheiylx/p/14150382.html1 div id="wrap">
2 div id="main">
3 div class="page">Onediv>
4 div class="page">Twodiv>
5 div class="page">Threediv>
6 div class="page">Fourdiv>
7 div>
8 div>
1 #wrap{
2 position: relative;
3 margin: auto;
4 top: 10px;
5 left: 0;
6 height: 250px;
7 width: 500px;
8 overflow:hidden;
9 #main{
10 width: 2000px;
11 position:relative;
12 transition: all 0.5s;
13 animation: auto_slide 6s steps(1, end) infinite;
14 .page{
15 float: left;
16 height: 250px;
17 width: 500px;
18 margin:0;
19 font-size: 26px;
20 font-weight: bold;
21 color: #fff;
22 display: flex;
23 align-items: center;
24 justify-content: center;
25 &:nth-child(1) {
26 background:rgb(195, 185, 240);
27 }
28 &:nth-child(2) {
29 background: rgb(15, 221, 211);
30 }
31 &:nth-child(3) {
32 background: rgb(236, 173, 217);
33 }
34 &:nth-child(4) {
35 background: rgb(241, 161, 141);
36 }
37 }
38 }
39 @keyframes auto_slide {
40 0% , 100% {
41 left: 0;
42 }
43 25% {
44 left: -500px;
45 }
46 50% {
47 left: -1000px;
48 }
49 80% {
50 left: -1500px;
51 }
52
53 }
54 }
nimation默认以ease方式过渡，会以在每个关键帧之间插入补充动画，所以动画效果是连贯性的。ease，linear等之类的过渡函数都会为其插入缓慢的效果。steps过渡方式。如上面所示。steps函数把动画分成n等份。
step-start 等同于 steps(1,start) ，动画分成 1 步，动画执行时以左侧端点为开始step-end 等同于 steps(1,end) ，动画分成 1 步，动画执行时以结尾端点为开始举例子： steps(4,start) 与 steps(1,start) 的最大区别就是每次动画”跳跃”的时候，即从 0% -> 25% 的时候，steps(1) 直接一步到位，瞬间从0%的状态跳到25%的状态，steps(4)会逐渐走4步，即从 0% -> 25% 要跳 4 步 。 1 div id="click_slider">
2 input type="radio" name="sliderInput" value="0" id="sliderInput1" checked hidden/>
3 label for=‘sliderInput1‘>1label>
4 input type="radio" name="sliderInput" value="1" id="sliderInput2" hidden/>
5 label for=‘sliderInput2‘>2label>
6 input type="radio" name="sliderInput" value="2" id="sliderInput3" hidden/>
7 label for=‘sliderInput3‘>3label>
8 input type="radio" name="sliderInput" value="3" id="sliderInput4" hidden/>
9 label for=‘sliderInput4‘>4label>
10 div id="click_main">
11 div class="page">点击Onediv>
12 div class="page">点击Twodiv>
13 div class="page">点击Threediv>
14 div class="page">点击Fourdiv>
15 div>
16 div>
1 #click_slider{
2 position: relative;
3 margin: auto;
4 top: 10px;
5 left: 0;
6 height: 250px;
7 width: 500px;
8 overflow:hidden;
9 margin-top: 50px;
10 #click_main{
11 width: 2000px;
12 position:relative;
13 transition: all 0.5s;
14 .page{
15 float: left;
16 height: 250px;
17 width: 500px;
18 margin:0;
19 font-size: 26px;
20 font-weight: bold;
21 color: #fff;
22 display: flex;
23 align-items: center;
24 justify-content: center;
25 &:nth-child(1) {
26 background:rgb(195, 185, 240);
27 }
28 &:nth-child(2) {
29 background: rgb(15, 221, 211);
30 }
31 &:nth-child(3) {
32 background: rgb(236, 173, 217);
33 }
34 &:nth-child(4) {
35 background: rgb(241, 161, 141);
36 }
37 }
38 }
39 label[for^=‘sliderInput‘] {
40 position: absolute;
41 bottom: 20px;
42 width: 20px;
43 height: 20px;
44 margin: 0 30px;
45 border-radius: 50%;
46 cursor: pointer;
47 z-index: 2;
48 color: #000;
49 background-color: #fff;
50 font-weight: bold;
51 font-size: 14px;
52 text-align: center;
53 line-height: 20px;
54 }
55 label[for="sliderInput1"] {
56 left: 0px;
57 }
58 label[for="sliderInput2"] {
59 left: 30px;
60 }
61 label[for="sliderInput3"] {
62 left: 60px;
63 }
64 label[for="sliderInput4"] {
65 left: 90px;
66 }
67 #sliderInput1:checked {
68 &+label {
69 color: #fff;
70 background-color: #000;
71 }
72 &~div[id=‘click_main‘] {
73 left: 0px;
74 }
75 }
76 #sliderInput2:checked {
77 &+label {
78 color: #fff;
79 background-color: #000;
80 }
81 &~div[id=‘click_main‘] {
82 left: -500px;
83 }
84 }
85 #sliderInput3:checked {
86 &+label {
87 color: #fff;
88 background-color: #000;
89 }
90 &~div[id=‘click_main‘] {
91 left: -1000px;
92 }
93 }
94 #sliderInput4:checked {
95 &+label {
96 color: #fff;
97 background-color: #000;
98 }
99 &~div[id=‘click_main‘] {
100 left: -1500px;
101 }
102 }
103 }
下一篇：HTTP压缩