IFE_2016_1_12
学习了一下评分最高的代码,写得比较巧妙,关于第三部分初始地方的图片(&background-color)使用slider-init动画,使整个盒子产生移动来抵消浏览器初始化渲染时slider-out动画显示的影响,很聪明的做法。但是我觉得使用两个动画有些麻烦,想了一下似乎没有更好的办法,就暂时学习他的做法了。(顺便收获了一种比较好看的蓝色,cornflowerblue)又去看了一下评分第二高的代码,写得不如第一份,第三部分动画效果切换的时间不一,而且显得不连贯(可能在以后会是一种好的方法,但是和目前的网页上平滑的动画显现效果不同),而且第三部分为了达到显示而使用的三倍宽度的盒子会对其他布局产生影响(就当我吹毛求疵好了)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>IFE_2016_1_12</title> 6 </head> 7 <style> 8 body{ 9 margin: 0; 10 } 11 12 .page{ 13 padding: 10px; 14 } 15 16 .rank-table{ 17 border: 1px solid tomato; 18 margin-left: auto; 19 margin-right: auto; 20 font-size: 20px; 21 } 22 23 .rank-thead .rank-td{ 24 background-color: #2ea7e0; 25 color: #fff; 26 } 27 28 .rank-tbody > .rank-tr:nth-of-type(odd) .rank-td{ 29 background-color: #fff; 30 } 31 32 .rank-table .rank-tr:nth-of-type(even) .rank-td{ 33 background-color: #c5c5c5; 34 } 35 36 .rank-td{ 37 padding-left: 10px; 38 padding-right: 10px; 39 text-align: center; 40 } 41 42 .rank-table .rank-tr:nth-child(-n+3){ 43 color: tomato; 44 } 45 46 .box-input{ 47 margin: 10px auto; 48 text-align: center; 49 } 50 51 .change-input{ 52 width: 200px; 53 margin: 10px auto; 54 border: 2px solid #ddd; 55 height: 20px; 56 transition: border-color 1s, width 0.5s; 57 padding: 10px; 58 text-align: center; 59 } 60 61 .change-input:focus{ 62 width: 320px; 63 border-color: #2ea7e0; 64 font-size: 20px; 65 } 66 67 .banner{ 68 width: 300px; 69 height: 250px; 70 margin: 10px auto; 71 overflow: hidden; 72 position: relative; 73 background-color: tomato; 74 } 75 76 /* 77 使用slider-init动画的原因是消除下面slider-in 78 动画在页面第一次加载时的影响 79 .sliders因为slider-init滑动到.banner的可视 80 区域的过程中,子盒子的slider-out动画同时发生, 81 .sliders刚好有多少部分进入可视区域,子盒子就有 82 多少滑出 83 (如果不能理解可以将动画的时间设置成不一样,就能 84 看到效果) 85 */ 86 .sliders{ 87 position: absolute; 88 width: 100%; 89 height: 100%; 90 animation: .5s slider-init linear; 91 } 92 93 /* 94 产生平滑切换效果的原理 95 当使用锚点定位时,页面会重新渲染,执行动画效果 96 */ 97 98 .sliders > div{ 99 position: absolute; 100 width: 100%; 101 height: 100%; 102 left: -100%; 103 animation: 0.5s slider-out linear; 104 } 105 106 .sliders > div:target{ 107 left: 0; 108 animation: 0.5s slider-in linear; 109 } 110 111 #slider-1{ 112 background-color: tomato; 113 } 114 115 #slider-2{ 116 background-color: cornflowerblue; 117 } 118 119 #slider-3{ 120 background-color: #39b94e; 121 } 122 123 @keyframes slider-init{ 124 0%{ 125 left: -100%; 126 } 127 128 100%{ 129 left: 0; 130 } 131 } 132 133 @keyframes slider-in{ 134 0%{ 135 left: 100%; 136 } 137 138 100%{ 139 left: 0; 140 } 141 } 142 143 @keyframes slider-out{ 144 0%{ 145 left: 0; 146 } 147 148 100%{ 149 left: -100%; 150 } 151 } 152 153 .btns{ 154 position: absolute; 155 right: 0; 156 bottom: 0; 157 display: flex; 158 z-index: 2; 159 } 160 161 .btns > a{ 162 width: 20px; 163 height: 20px; 164 text-decoration: none; 165 background-color: rgba(255,255,255,0.3); 166 padding: 2px; 167 color: black; 168 } 169 </style> 170 <body> 171 <div class="page"> 172 <table class="rank-table"> 173 <thead class="rank-thead"> 174 <tr class="rank-tr"> 175 <td class="rank-td">排名</td> 176 <td class="rank-td">网站</td> 177 <td class="rank-td">热度</td> 178 </tr> 179 </thead> 180 <tbody class="rank-tbody"> 181 <tr class="rank-tr"> 182 <td class="rank-td">1</td> 183 <td class="rank-td">百度前端技术学院</td> 184 <td class="rank-td">13000</td> 185 </tr> 186 <tr class="rank-tr"> 187 <td class="rank-td">2</td> 188 <td class="rank-td">百度前端技术学院</td> 189 <td class="rank-td">12000</td> 190 </tr> 191 <tr class="rank-tr"> 192 <td class="rank-td">3</td> 193 <td class="rank-td">百度前端技术学院</td> 194 <td class="rank-td">11000</td> 195 </tr> 196 <tr class="rank-tr"> 197 <td class="rank-td">4</td> 198 <td class="rank-td">百度前端技术学院</td> 199 <td class="rank-td">10000</td> 200 </tr> 201 </tbody> 202 </table> 203 <div class="box-input"><input class="change-input"></div> 204 <div class="box-input"><input class="change-input"></div> 205 <div class="box-input"><input class="change-input"></div> 206 <div class="banner"> 207 <div class="sliders"> 208 <div id="slider-1"></div> 209 <div id="slider-2"></div> 210 <div id="slider-3"></div> 211 </div> 212 <div class="btns"> 213 <a href="#slider-1">1</a> 214 <a href="#slider-2">2</a> 215 <a href="#slider-3">3</a> 216 </div> 217 </div> 218 </div> 219 </body> 220 </html>