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>

 

posted @ 2017-05-01 16:42  ZackBee  阅读(219)  评论(0)  编辑  收藏  举报