我们要创建基于CSS的动画滑块,这个滑块的工作没有任何JavaScript的使用。对于基于CSS的滑块控件一样,分页,下一步,上一步,我们使用单选按钮和标签”属性。
首先我们创建HTML CSS滑块结构。需要一个div和应用类的名称如“css-slider-wrapper”所有元素都将放在这个结构中
1 | < div class = "css-slider-wrapper" ></ div > |
这样的div css 其具有全屏幻灯片,所以我们设置位置绝对
1 2 3 4 5 6 7 8 9 10 | .css-slider-wrapper { display : block ; background : #FFF ; overflow : hidden ; position : absolute ; left : 0 ; right : 0 ; top : 0 ; bottom : 0 ; } |
我们创建了外层div,接下来我们要创建4个内部轮播滑块,html和css如下所示
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | < div class = "css-slider-wrapper" > < div class = "slider slide1" > < div > < h2 >Css Based slider</ h2 > </ div > </ div > < div class = "slider slide2" > < div > < h2 >CSS Slider without use of any javascript or jQuery</ h2 > </ div > </ div > < div class = "slider slide3" > < div > < h2 >Full screen animation slider</ h2 > </ div > </ div > < div class = "slider slide4" > < div > < h2 >css3 slider</ h2 > </ div > </ div > </ div > |
每个幻灯片创建4个类,CSS如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | .slider { width : 100% ; height : 100% ; background : red ; position : absolute ; left : 0 ; top : 0 ; opacity: 1 ; z-index : 0 ; display : flex; display : -webkit-flex; display : -ms-flexbox; flex- direction : row; flex-wrap: wrap; -webkit-flex-align: center ; -webkit-align-items: center ; align-items: center ; justify- content : center ; align- content : center ; -webkit-transition: -webkit-transform 1600 ms; transition: -webkit-transform 1600 ms, transform 1600 ms; -webkit-transform: scale( 1 ); transform: scale( 1 ); } /* each slide background color */ .slide 1 { background : #00bcd7 ; left : 0 ; } .slide 2 { background : #009788 ; left : 100% } .slide 3 { background : #ff5608 ; left : 200% } .slide 4 { background : #607d8d ; left : 300% ; } |
我们已经做了滑块的CSS和HTML。接下来要创建控制分页,上下按钮,滑块。滑块控件的HTML和CSS如下。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | /* slider-pagination */ .slider-pagination { position : absolute ; bottom : 20px ; width : 100% ; left : 0 ; text-align : center ; z-index : 1000 ; } .slider-pagination label { width : 10px ; height : 10px ; border-radius: 50% ; display : inline- block ; background : rgba( 255 , 255 , 255 , 0.2 ); margin : 0 2px ; border : solid 1px rgba( 255 , 255 , 255 , 0.4 ); cursor : pointer ; } /* Next and previous button*/ .control { position : absolute ; top : 50% ; width : 50px ; height : 50px ; margin-top : -25px ; z-index : 55 ; } .control label { z-index : 0 ; display : none ; text-align : center ; line-height : 50px ; font-size : 50px ; color : #FFF ; cursor : pointer ; opacity: 0.2 ; } .control label:hover { opacity: 0.5 ; } .next { right : 1% ; } .previous { left : 1% ; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | < div class = "slider-pagination" > < label for = "slider_1" class = "page1" ></ label > < label for = "slider_2" class = "page2" ></ label > < label for = "slider_3" class = "page3" ></ label > < label for = "slider_4" class = "page4" ></ label > </ div > < div class = "next control" > < label for = "slider_1" class = "numb1" >< i class = "fa fa-arrow-circle-right" ></ i ></ label > < label for = "slider_2" class = "numb2" >< i class = "fa fa-arrow-circle-right" ></ i ></ label > < label for = "slider_3" class = "numb3" >< i class = "fa fa-arrow-circle-right" ></ i ></ label > < label for = "slider_4" class = "numb4" >< i class = "fa fa-arrow-circle-right" ></ i ></ label > </ div > < div class = "previous control" > < label for = "slider_1" class = "numb1" >< i class = "fa fa-arrow-circle-left" ></ i ></ label > < label for = "slider_2" class = "numb2" >< i class = "fa fa-arrow-circle-left" ></ i ></ label > < label for = "slider_3" class = "numb3" >< i class = "fa fa-arrow-circle-left" ></ i ></ label > < label for = "slider_4" class = "numb4" >< i class = "fa fa-arrow-circle-left" ></ i ></ label > </ div > |
完成控制元素的HTML和CSS后,我们要创建单选按钮。因为我们使用此单选按钮主要功能为移动滑块这个单选按钮,把我们在第一位置像下面的HTML结构主滑块容器div
1 2 3 4 5 6 | < div class = "css-slider-wrapper" > < input type = "radio" name = "slider" class = "slide-radio1" checked id = "slider_1" > < input type = "radio" name = "slider" class = "slide-radio2" id = "slider_2" > < input type = "radio" name = "slider" class = "slide-radio3" id = "slider_3" > < input type = "radio" name = "slider" class = "slide-radio4" id = "slider_4" > |
对于CSS或单选按钮我们隐藏浏览器,因为我们不想显示在浏览器中,我们将使用属性标签
现在我们做滑动控制CSS,当你点击“下一步”,以前和分页按钮。我们使用:检查伪类来控制滑动。
为控制滑动效果的CSS这样
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | /* Slider control sliding effect */ .slide-radio 1: checked ~ .slider { -webkit-transform: translateX( 0% ); transform: translateX( 0% ); } .slide-radio 2: checked ~ .slider { -webkit-transform: translateX( -100% ); transform: translateX( -100% ); } .slide-radio 3: checked ~ .slider { -webkit-transform: translateX( -200% ); transform: translateX( -200% ); } .slide-radio 4: checked ~ .slider { -webkit-transform: translateX( -300% ); transform: translateX( -300% ); } /* next and previous will be active when slider moving*/ .slide-radio 1: checked ~ .next .numb 2 , .slide-radio 2: checked ~ .next .numb 3 , .slide-radio 3: checked ~ .next .numb 4 , .slide-radio 2: checked ~ .previous .numb 1 , .slide-radio 3: checked ~ .previous .numb 2 , .slide-radio 4: checked ~ .previous .numb 3 { display : block ; z-index : 1 } /* css for active current pagination */ .slide-radio 1: checked ~ .slider-pagination .page 1 , .slide-radio 2: checked ~ .slider-pagination .page 2 , .slide-radio 3: checked ~ .slider-pagination .page 3 , .slide-radio 4: checked ~ .slider-pagination .page 4 { background : rgba( 255 , 255 , 255 , 1 ) } |
最后的HTML和css的滑块代码是如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | < div class = "css-slider-wrapper" > < input type = "radio" name = "slider" class = "slide-radio1" checked id = "slider_1" > < input type = "radio" name = "slider" class = "slide-radio2" id = "slider_2" > < input type = "radio" name = "slider" class = "slide-radio3" id = "slider_3" > < input type = "radio" name = "slider" class = "slide-radio4" id = "slider_4" > < div class = "slider-pagination" > < label for = "slider_1" class = "page1" ></ label > < label for = "slider_2" class = "page2" ></ label > < label for = "slider_3" class = "page3" ></ label > < label for = "slider_4" class = "page4" ></ label > </ div > < div class = "next control" > < label for = "slider_1" class = "numb1" >< i class = "fa fa-arrow-circle-right" ></ i ></ label > < label for = "slider_2" class = "numb2" >< i class = "fa fa-arrow-circle-right" ></ i ></ label > < label for = "slider_3" class = "numb3" >< i class = "fa fa-arrow-circle-right" ></ i ></ label > < label for = "slider_4" class = "numb4" >< i class = "fa fa-arrow-circle-right" ></ i ></ label > </ div > < div class = "previous control" > < label for = "slider_1" class = "numb1" >< i class = "fa fa-arrow-circle-left" ></ i ></ label > < label for = "slider_2" class = "numb2" >< i class = "fa fa-arrow-circle-left" ></ i ></ label > < label for = "slider_3" class = "numb3" >< i class = "fa fa-arrow-circle-left" ></ i ></ label > < label for = "slider_4" class = "numb4" >< i class = "fa fa-arrow-circle-left" ></ i ></ label > </ div > < div class = "slider slide1" > < div > < h2 >Css Based slider</ h2 > < a href = "#" class = "button" >Download</ a > </ div > </ div > < div class = "slider slide2" > < div > < h2 >CSS Slider without use of any javascript or jQuery</ h2 > < a href = "#" class = "button" >Download</ a > </ div > </ div > < div class = "slider slide3" > < div > < h2 >Full screen animation slider</ h2 > < a href = "#" class = "button" >Download</ a > </ div > </ div > < div class = "slider slide4" > < div > < h2 >css3 slider</ h2 > < a href = "#" class = "button" >Download</ a > </ div > </ div > </ div > |
最后的CSS如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 | /* Slider wrapper*/ .css-slider-wrapper { display : block ; background : #FFF ; overflow : hidden ; position : absolute ; left : 0 ; right : 0 ; top : 0 ; bottom : 0 ; } /* Slider */ .slider { width : 100% ; height : 100% ; background : red ; position : absolute ; left : 0 ; top : 0 ; opacity: 1 ; z-index : 0 ; display : flex; display : -webkit-flex; display : -ms-flexbox; flex- direction : row; flex-wrap: wrap; -webkit-flex-align: center ; -webkit-align-items: center ; align-items: center ; justify- content : center ; align- content : center ; -webkit-transition: -webkit-transform 1600 ms; transition: -webkit-transform 1600 ms, transform 1600 ms; -webkit-transform: scale( 1 ); transform: scale( 1 ); } /* each slide background color */ .slide 1 { background : #00bcd7 ; left : 0 ; } .slide 2 { background : #009788 ; left : 100% } .slide 3 { background : #ff5608 ; left : 200% } .slide 4 { background : #607d8d ; left : 300% ; } .slider > div { text-align : center ; } /* Slider inner content */ .slider h 2 { color : #FFF ; font-weight : 900 ; text-transform : uppercase ; font-size : 45px ; line-height : 120% ; opacity: 0 ; -webkit-transform: translateX( 500px ); transform: translateX( 500px ); } .slider .button { color : #FFF ; padding : 5px 50px ; background : rgba( 255 , 255 , 255 , 0.3 ); text-decoration : none ; opacity: 0 ; font-size : 15px ; line-height : 30px ; display : inline- block ; -webkit-transform: translateX( -500px ); transform: translateX( -500px ); } .slider h 2 , .slider .button { -webkit-transition: opacity 800 ms, -webkit-transform 800 ms; transition: transform 800 ms, opacity 800 ms; -webkit-transition-delay: 1 s; /* Safari */ transition-delay: 1 s; } /* Next and previous button */ .control { position : absolute ; top : 50% ; width : 50px ; height : 50px ; margin-top : -25px ; z-index : 55 ; } .control label { z-index : 0 ; display : none ; text-align : center ; line-height : 50px ; font-size : 50px ; color : #FFF ; cursor : pointer ; opacity: 0.2 ; } .control label:hover { opacity: 0.5 ; } .next { right : 1% ; } .previous { left : 1% ; } /* Slider pagination */ .slider-pagination { position : absolute ; bottom : 20px ; width : 100% ; left : 0 ; text-align : center ; z-index : 1000 ; } .slider-pagination label { width : 10px ; height : 10px ; border-radius: 50% ; display : inline- block ; background : rgba( 255 , 255 , 255 , 0.2 ); margin : 0 2px ; border : solid 1px rgba( 255 , 255 , 255 , 0.4 ); cursor : pointer ; } /* Slider control active css */ .slide-radio 1: checked ~ .next .numb 2 , .slide-radio 2: checked ~ .next .numb 3 , .slide-radio 3: checked ~ .next .numb 4 , .slide-radio 2: checked ~ .previous .numb 1 , .slide-radio 3: checked ~ .previous .numb 2 , .slide-radio 4: checked ~ .previous .numb 3 { display : block ; z-index : 1 } /* Slider pagination active css */ .slide-radio 1: checked ~ .slider-pagination .page 1 , .slide-radio 2: checked ~ .slider-pagination .page 2 , .slide-radio 3: checked ~ .slider-pagination .page 3 , .slide-radio 4: checked ~ .slider-pagination .page 4 { background : rgba( 255 , 255 , 255 , 1 ) } /* css for sliding effect when you click on control button*/ .slide-radio 1: checked ~ .slider { -webkit-transform: translateX( 0% ); transform: translateX( 0% ); } .slide-radio 2: checked ~ .slider { -webkit-transform: translateX( -100% ); transform: translateX( -100% ); } .slide-radio 3: checked ~ .slider { -webkit-transform: translateX( -200% ); transform: translateX( -200% ); } .slide-radio 4: checked ~ .slider { -webkit-transform: translateX( -300% ); transform: translateX( -300% ); } .slide-radio 1: checked ~ .slide 1 h 2 , .slide-radio 2: checked ~ .slide 2 h 2 , .slide-radio 3: checked ~ .slide 3 h 2 , .slide-radio 4: checked ~ .slide 4 h 2 , .slide-radio 1: checked ~ .slide 1 .button, .slide-radio 2: checked ~ .slide 2 .button, .slide-radio 3: checked ~ .slide 3 .button, .slide-radio 4: checked ~ .slide 4 .button { -webkit-transform: translateX( 0 ); transform: translateX( 0 ); opacity: 1 } @media only screen and ( max-width : 767px ) { .slider h 2 { font-size : 20px ; } .slider > div { padding : 0 2% } .control label { font-size : 35px ; } .slider .button { padding : 0 30px ; } } |
完成您可以查看演示和从下面的链接下载源代码。