網頁平滑過渡效果和自適用，三角圖形，動效

時間 2019-12-01

標籤網頁平滑過渡效果適用三角圖形欄目 HTML 简体版

原文原文鏈接

1，index.html 引入css

normalize.css

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>css3 slide</title>
 6         <!--適應設備大小-->
 7         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 8         <!--適應低級瀏覽器-->
 9         <meta http-equiv="X-UA-Compatible" content="IE-edge,chrome=1">
10         <!--導入css-->
11         <link rel="stylesheet" type="text/css" href="./normalize.css"/>
12         <link rel="stylesheet" type="text/css" href="./style.css"/>
13     </head>
14     <body>
15     
16     <div class="container">
17       <div class="st-container">
18           <input type="radio" name="radio-set" checked="checked" id="st-control-1">
19           <a href="#st-control-1">Serendipity</a>
20           <input type="radio" name="radio-set"  id="st-control-2">
21           <a href="#st-control-2">Happiness</a>
22           <input type="radio" name="radio-set" id="st-control-3">
23           <a href="#st-control-3">Tranquillity</a>
24           <input type="radio" name="radio-set"  id="st-control-4">
25           <a href="#st-control-4">Positivity</a>
26           <input type="radio" name="radio-set"  id="st-control-5">
27           <a href="#st-control-5">Passion</a>
28 
29           <div class="st-scroll">
30               <section class="st-panel" id="st-panel-1">
31                   <div class="st-desc" data-icon="H"></div>
32                   <h2>Serendipity</h2>
33                   <p>Mr. Johnson had never been up in an aerophane before and he had read a lot about air accidents,
34                       so one day when a friend offered to take him for a ride in his own small phane</p>
35               </section>
36 
37               <section class="st-panel st-color" id="st-panel-2">
38                   <div class="st-desc" data-icon="2"></div>
39                   <h2>Happiness</h2>
40                   <p> Mr. Johnson was very worried about accepting. Finally, however, his friend persuaded him that
41                       it was very safe, and Mr. Johnson boarded the plane.</p>
42               </section>
43 
44               <section class="st-panel st-color" id="st-panel-3">
45                   <div class="st-desc" data-icon="A"></div>
46                   <h2>Tranquillity</h2>
47                   <p>His friend started the engine and began to taxi onto the runway of the airport. Mr. Johnson had heard
48                       that the most dangerous part of a flight were the take-off and the landing</p>
49               </section>
50 
51               <section class="st-panel" id="st-panel-4">
52                   <div class="st-desc" data-icon="B"></div>
53                   <h2>Positivity</h2>
54                   <p>fter a minute or two he opened them again, looked out of the window of the plane, and said to his friend,
55                       "Look at those people down there. They look as small as ants, don't they?"</p>
56               </section>
57 
58               <section class="st-panel" id="st-panel-5">
59                   <div class="st-desc" data-icon="C"></div>
60                   <h2>Passion</h2>
61                   <p>Those are ants," answered his friend. "We're still on the ground</p>
62               </section>
63           </div>
64       </div>
65     </div>
66        </body>
67 </html>

二、style.css 引入fontshtml

  1 @font-face {
  2     font-family: "Raphaelicons";
  3     src:url('./fonts/raphaelicons-webfont.eot') format('eot'),
  4         url('./fonts/raphaelicons-webfont.woff') format('woff'),
  5         url('./fonts/raphaelicons-webfont.ttf') format('truetype'),
  6         url('./fonts/raphaelicons-webfont.svg') format('svg');
  7     font-weight: normal;
  8     font-style: normal;
  9 
 10 }
 11 
 12 body{
 13     font-family: Georgia,Serif;
 14     background: #ddd;
 15     font-weight: 400;
 16     font-size: 15px;
 17     color:#333;
 18     overflow: hidden;
 19     -webkit-font-smoothing: antialiased;
 20 }
 21 
 22 a{
 23     text-decoration: none;
 24     color:#555;
 25 }
 26 
 27 .clr{
 28     width:0;
 29     height:0;
 30     overflow: hidden;
 31     clear:both;
 32     padding: 0;
 33     margin: 0;
 34 }
 35 
 36 .st-container{
 37     width:100%;
 38     height:100%;
 39     position: absolute;
 40     left: 0;
 41     top:0;
 42     font-family: "Josefin Slab","Myriad Pro",Arial,sans-serif;
 43 }
 44 
 45 .st-container>input,
 46 .st-container >a{
 47     width:20%;
 48     height:34px;
 49     line-height: 34px;
 50     position: fixed;
 51     bottom: 0;
 52 }
 53 
 54 
 55 .st-container>input{
 56     opacity: 0;
 57     z-index:1000;
 58 }
 59 
 60 .st-container > a{
 61     z-index: 10;
 62     font-weight: 700;
 63     font-size: 16px;
 64     background:#e23a6e;
 65     color:#fff;
 66     text-align: center;
 67     box-shadow: 1px 1px 1px rgba(151,24,64,0.2);
 68 }
 69 
 70 #st-control-1,#st-control-1 + a{
 71     left:0%;
 72 }
 73 
 74 #st-control-2,#st-control-2 + a{
 75     left:20%;
 76 }
 77 
 78 #st-control-3,#st-control-3 + a{
 79     left:40%;
 80 }
 81 
 82 #st-control-4,#st-control-4 + a{
 83     left:60%;
 84 }
 85 
 86 #st-control-5,#st-control-5 + a{
 87     left:80%;
 88 }
 89 
 90 .st-container input:checked + a,
 91     .st-container input:checked:hover+a{
 92     background: #821134;
 93 }
 94 /*三角*/
 95 .st-container input:checked + a:after{
 96     content: "";
 97     width:0;
 98     height:0;
 99     overflow: hidden;
100     border:20px solid transparent;
101     border-bottom-color:#821134;
102     position: absolute;
103     bottom: 100%;
104     left:50%;
105     margin-left: -20px;
106 }
107 
108 .st-container input:hover +a{
109     background-color: #AD244F;
110 }
111 
112 .st-scroll,
113 .st-panel{
114     width: 100%;
115     height: 100%;
116     position: relative;
117 }
118 
119 .st-scroll{
120     left:0;
121     top:0;
122     -webkit-transform: translate3d(0,0,0);
123     backface-visibility: hidden;
124     -webkit-transition: all 0.6s ease-in-out;
125     -o-transition:  all 0.6s ease-in-out;
126     -moz-transition:  all 0.6s ease-in-out;
127     -ms-transition: all 0.6s ease-in-out;
128     transition: all 0.6s ease-in-out;
129 }
130 .st-panel{
131     background: #fff;
132     overflow: hidden;
133 }
134 
135 #st-control-1:checked~ .st-scroll{
136     -webkit-transform: translateY(0%);
137     -moz-transform: translateY(0%);
138     -o-transform: translateY(0%);
139     -ms-transform: translateY(0%);
140     transform: translateY(0%);
141 }
142 #st-control-2:checked~ .st-scroll{
143     -webkit-transform: translateY(-100%);
144     -moz-transform: translateY(-100%);
145     -o-transform: translateY(-100%);
146     -ms-transform: translateY(-100%);
147     transform: translateY(-100%);
148 }
149 
150 #st-control-3:checked~ .st-scroll{
151     -webkit-transform: translateY(-200%);
152     -moz-transform: translateY(-200%);
153     -o-transform: translateY(-200%);
154     -ms-transform: translateY(-200%);
155     transform: translateY(-200%);
156 }
157 
158 #st-control-4:checked~ .st-scroll{
159     -webkit-transform: translateY(-300%);
160     -moz-transform: translateY(-300%);
161     -o-transform: translateY(-300%);
162     -ms-transform: translateY(-300%);
163     transform: translateY(-300%);
164 }
165 
166 #st-control-5:checked~ .st-scroll{
167     -webkit-transform: translateY(-400%);
168     -moz-transform: translateY(-400%);
169     -o-transform: translateY(-400%);
170     -ms-transform: translateY(-400%);
171     transform: translateY(-400%);
172 }
173 
174 
175 .st-desc{
176    width:200px;
177     height:200px;
178     background: #e23a6e;
179     position: absolute;
180     left: 50%;
181     top:0;
182     margin-left: -100px;
183     -webkit-transform: translateY(-50%) rotate(45deg);
184     -moz-transform: translateY(-50%) rotate(45deg);
185     -ms-transform: translateY(-50%) rotate(45deg);
186     -o-transform: translateY(-50%) rotate(45deg);
187     transform: translateY(-50%) rotate(45deg);
188 }
189 
190 
191 [data-icon]:after{
192     content:attr(data-icon);
193     width:200px;
194     height: 200px;
195     /*background: #0f0;*/
196     font-size: 90px;
197     text-align: center;
198     line-height: 200px;
199     position: absolute;
200     left: 50%;
201     top:50%;
202     margin: -100px 0 0 -100px;
203     -webkit-transform: rotate(-45deg) translateY(25%);
204     font-family: "Raphaelicons";
205 }
206 
207 .st-panel h2{
208     color:#e23a6e;
209     font-size: 54px;
210     line-height: 50px;
211     text-align: center;
212     font-weight: 900;
213     width: 80%;
214     position: absolute;
215     left: 10%;
216     top:50%;
217     margin-top: -70px;
218     -webkit-backface-visibility: hidden;
219 }
220 
221 
222 #st-control-1:checked~.st-scroll #st-panel-1 h2,
223 #st-control-2:checked~.st-scroll #st-panel-2 h2,
224 #st-control-3:checked~.st-scroll #st-panel-3 h2,
225 #st-control-4:checked~.st-scroll #st-panel-4 h2,
226 #st-control-5:checked~.st-scroll #st-panel-5 h2{
227     -webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards;
228     -moz-animation: moveDown 0.6s ease-in-out 0.2s backwards;
229     -o-animation: moveDown 0.6s ease-in-out 0.2s backwards;
230     -ms-animation: moveDown 0.6s ease-in-out 0.2s backwards;
231 }
232 
233 
234 @-webkit-keyframes moveDown{
235     0%{
236         -webkit-transform: translateY(-300px);
237         opacity: 0;
238      }
239 
240     100%{
241         -webkit-transform: translateY(0px);
242         opacity: 1;
243     }
244 }
245 
246 @-o-keyframes moveDown{
247     0%{
248         -webkit-transform: translateY(-300px);
249         opacity: 0;
250     }
251 
252     100%{
253         -webkit-transform: translateY(0px);
254         opacity: 1;
255     }
256 }
257 
258 @-moz-keyframes moveDown{
259     0%{
260         -webkit-transform: translateY(-300px);
261         opacity: 0;
262     }
263 
264     100%{
265         -webkit-transform: translateY(0px);
266         opacity: 1;
267     }
268 }
269 
270 @-webkit-keyframes moveDown{
271     0%{
272         -webkit-transform: translateY(-100px);
273         opacity: 0;
274     }
275 
276     100%{
277         -webkit-transform: translateY(0px);
278         opacity: 1;
279     }
280 }
281 
282 
283 .st-panel p{
284     position: absolute;
285     width:90%;
286     left:5%;
287     top:50%;
288     font-size: 16px;
289     line-size:16px;
290     line-height: 22px;
291     padding: 0;
292     text-align: center;
293     -webkit-backface-visibility: hidden;
294     color:#8b8b8b;
295     margin-top: 10px;
296 }
297 
298 #st-control-1:checked~.st-scroll #st-panel-1 p,
299 #st-control-2:checked~.st-scroll #st-panel-2 p,
300 #st-control-3:checked~.st-scroll #st-panel-3 p,
301 #st-control-4:checked~.st-scroll #st-panel-4 p,
302 #st-control-5:checked~.st-scroll #st-panel-5 p{
303     -webkit-animation: moveUp 0.6s ease-in-out 0.2s backwards;
304     -moz-animation: moveUp 0.6s ease-in-out 0.2s backwards;
305     -o-animation: moveUp 0.6s ease-in-out 0.2s backwards;
306     -ms-animation: moveUp 0.6s ease-in-out 0.2s backwards;
307 }
308 
309 
310 @-webkit-keyframes moveUp{
311     0%{
312         -webkit-transform: translateY(100px);
313         opacity: 0;
314     }
315 
316     100%{
317         -webkit-transform: translateY(0px);
318         opacity: 1;
319     }
320 }
321 
322 .st-color{
323     background: #fa96b5;
324 }
325 
326 .st-color .st-desc{
327     background: #fff;
328 }
329 
330 .st-color h2{
331     color: #fff;
332     text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
333 }
334 
335 .st-color p{
336     color:rgba(255,255,255,0.8);
337 }
338 
339 @media screen and (max-width:600px) {
340     .st-panel h2{
341         font-size: 42px;
342     }
343     .st-panel p{
344         width:90%;
345         left:10%;
346         margin-top: 0;
347     }
348     .st-container > a{
349         font-size: 13px;
350     }
351 }
352 
353 
354 @media screen and (max-width:360px) {
355     .st-panel h2{
356         font-size: 30px;
357     }
358 
359     .st-container > a{
360         font-size: 10px;
361     }
362     .st-desc{
363         width:120px;
364         height:120px;
365         margin-left: -60px;
366     }
367 
368     [data-icon]:after{
369         font-size: 60px;
370         -webkit-transform: rotate(-45deg) translateY(15%);
371         -moz-transform: rotate(-45deg) translateY(15%);
372         -o-transform: rotate(-45deg) translateY(15%);
373         -ms-transform: rotate(-45deg) translateY(15%);
374         transform: rotate(-45deg) translateY(15%);
375     }
376 }

三、效果圖：css3

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。