CSS3实现页面的平滑过渡

这是文件的css，全部文件的话请到Github下载：点击这里

1 @charset "UTF-8";2 @font-face{font-family:'iconfont';
3 src:url('font/iconfont.eot'); /*IE9*/
4 src:url('font/iconfont.eot?#iefix') format('embedded-opentype'),/*IE6-IE8*/
5 url('font/iconfont.woff') format('woff'),/*chrome、firefox*/
6 url('font/iconfont.ttf') format('truetype'),/*chrome、firefox、opera、Safari, Android, iOS 4.2+*/
7 url('font/iconfont.svg#iconfont') format('svg'); /*iOS 4.1-*/
8 font-weight:normal;  /*设置字体宽度和字体样式*/
9 font-style:normal;
10 }
11 body{
12 font-family:Georia,serif;
13 background:#ddd;
14 font-weight:400;
15 font-size:15px;
16 color:#333;
17 overflow:hidden;
18 -webkit-font-smoothing:antialiased;
19 font-smoothing:antialiased;
20 }
21 a{
22 text-decoration:none;
23 color:#555;;24 }
25 .clr{ /*清除浮动*/
26 width:0;
27 height:0;
28 overflow:hidden;
29 clear:both;
30 padding:0;
31 margin:0;
32 }
33 .st-container{
34 width:100%;
35 height:100%;
36 position:absolute;
37 left:0;
38 top:0;
39 font-family:"Josefin Slab","Myriad Pro",Arial,sans-serif;
40 }
41 .st-container > input,42 .st-container > a{
43 width:20%;
44 height:34px;
45 line-height:34px;
46 position:fixed;
47 bottom:0;
48
49 }
50 .st-container > input{
51 opacity:0;
52 z-index:1000;
53 cursor:pointer;
54 }
55 .st-container > a{
56 z-index:10;
57 font-weight:700;
58 font-size:16px;
59 background:#b032da;
60 text-align:center;
61 color:#fff;
62 text-shadow:1px 1px 1px rgba(151,24,64,0.2);
63 }
64 #st-control-1,#st-control-1+a{
65 left:0%;
66 }
67 #st-control-2,#st-control-2+a{
68 left:20%;
69 }
70 #st-control-3,#st-control-3+a{
71 left:40%;
72 }
73 #st-control-4,#st-control-4+a{
74 left:60%;
75 }
76 #st-control-5,#st-control-5+a{
77 left:80%;
78 }
79 .st-container input:checked+a,80 .st-container input:checked:hover+a{
81 background:#792c92;/*使当前选择的input后面的a显示深紫色，并且当鼠标移过的时候不会改变颜色*/
82 }
83 .st-container input:checked+a:after{/*在当前选择的input后面的a下添加小三角形*/
84 content:"";
85 width:0;
86 height:0;
87 overflow:hidden;
88 border:20px solid transparent;
89 border-bottom-color:#792c92;
90 position:absolute;
91 bottom:100%;
92 left:50%;/*居中*/
93 margin-left:-20px;
94 }
95 .st-container input:hover + a{
96 background:#cc69ed;/*底部达到hover变成淡紫红色的效果*/
97 }
98
99 .st-scroll,100 .st-panel{
101 width:100%;
102 height:100%;
103 position:relative;
104 }
105 .st-scroll{
106 left:0;
107 top:0;
108 -webkit-transform:translate3d(0,0,0);
109 -ms-transform:translate3d(0,0,0);
110 -o-transform:translate3d(0,0,0);
111 transform:translate3d(0,0,0);
112 -webkit-backface-visibility:hidden;
113 -webkit-transition:all 0.6s ease-in-out;
114 -o-transition:all 0.6s ease-in-out;
115 transition:all 0.6s ease-in-out;
116 }
117 .st-panel{
118 background:#fff;
119 overflow:hidden;
120 }
121 #st-control-1:checked ~ .st-scroll{
122 -webkit-transform:translateY(0%);
123 -ms-transform:translateY(0%);
124 -o-transform:translateY(0%);
125 transform:translateY(0%);/*火狐已经实现transform这个属性，所以没有前缀了*/
126 }
127 #st-control-2:checked ~ .st-scroll{
128 -webkit-transform:translateY(-100%);
129 -ms-transform:translateY(-100%);
130 -o-transform:translateY(-100%);
131 transform:translateY(-100%);
132 }
133 #st-control-3:checked ~ .st-scroll{
134 -webkit-transform:translateY(-200%);
135 -ms-transform:translateY(-200%);
136 -o-transform:translateY(-200%);
137 transform:translateY(-200%);
138 }
139 #st-control-4:checked ~ .st-scroll{
140 -webkit-transform:translateY(-300%);
141 -ms-transform:translateY(-300%);
142 -o-transform:translateY(-300%);
143 transform:translateY(-300%);
144 }
145 #st-control-5:checked ~ .st-scroll{
146 -webkit-transform:translateY(-400%);
147 -ms-transform:translateY(-400%);
148 -o-transform:translateY(-400%);
149 transform:translateY(-400%);
150 }
151 .st-desc{
152 width:200px;
153 height:200px;
154 background:#8c3da6;
155 position:absolute;
156 left:50%;
157 top:0;
158 margin-left:-100px;
159 -webkit-transform:translateY(-50%) rotate(45deg);
160 -ms-transform:translateY(-50%) rotate(45deg);
161 -o-transform:translateY(-50%) rotate(45deg);
162 transform:translateY(-50%) rotate(45deg);
163 }
164 [data-icon]:after{
165 content:attr(data-icon); /*内容为data-icon属性的值*/
166 width:200px;
167 height:200px;
168 color:#fff;
169 font-size:90px;/*字体图标的大小*/
170 text-align:center;
171 line-height:200px;
172 position:absolute;
173 left:50%;
174 top:50%;
175 margin:-100px 0 0 -100px;
176 -webkit-transform:rotate(-45deg) translateY(25%);
177 -ms-transform:rotate(-45deg) translateY(25%);
178 -o-transform:rotate(-45deg) translateY(25%);
179 transform:rotate(-45deg) translateY(25%);
180
181 font-family:"iconfont" !important; /*覆盖原来设置的字体*/
182 font-size:50px; /*字体大小*/
183 font-style:normal;
184 -webkit-font-smoothing:antialiased; /*字体平滑*/
185 -webkit-text-stroke-width:0.2px;
186 -moz-osx-font-smoothing:grayscale;
187 text-shadow:3px 3px 1px rgba(151,24,64,0.2);
188 }
189 .st-panel h2{
190 color:#b032da;
191 font-size:54px;
192 line-height:50px;
193 text-align:center;
194 font-weight:900;
195 width:80%;  /*宽度设置为100%,left0%也可以居中*/
196 position:absolute;
197 left:10%;
198 top:50%;
199 margin-top:-70px;
200 text-shadow:1px 1px 1px rgba(151,24,64,0.2);
201 -webkit-backface-visibility:hidden; /*?什么用*/
202 }
203 #st-control-1:checked ~ .st-scroll #st-panel-1 h2,204 #st-control-2:checked ~ .st-scroll #st-panel-2 h2,205 #st-control-3:checked ~ .st-scroll #st-panel-3 h2,206 #st-control-4:checked ~ .st-scroll #st-panel-4 h2,207 #st-control-5:checked ~ .st-scroll #st-panel-5 h2{/*bakcwards表示动画默认开始执行，但是0.2S设置了延迟播放时间*/
208 -webkit-animation:moveDown 0.6s ease-in-out 0.2s backwards;
209 -moz-animation:moveDown 0.6s ease-in-out 0.2s backwards;
210 -ms-animation:moveDown 0.6s ease-in-out 0.2s backwards;
211 -o-animation:moveDown 0.6s ease-in-out 0.2s backwards;
212 animation:moveDown 0.6s ease-in-out 0.2s backwards;
213 }
214 @-webkit-keyframes moveDown{ /*关键帧*/
215 0%{216 -webkit-transform:translateY(-40px);
217 transform:translateY(-40px);
218 opacity:0;
219     }
220 100%{
221 -webkit-transform:translateY(0px);
222 transform:translateY(0px);
223 opacity:1;
224     }
225 }226 @-moz-keyframes moveDown{ /*关键帧*/
227 0%{228 -moz-transform:translateY(-40px);
229 transform:translateY(-40px);
230 opacity:0;
231     }
232 100%{
233 -moz-transform:translateY(0px);
234 transform:translateY(0px);
235 opacity:1;
236     }
237 }238 @-ms-keyframes moveDown{ /*关键帧*/
239 0%{240 -ms-transform:translateY(-40px);
241 transform:translateY(-40px);
242 opacity:0;
243     }
244 100%{
245 -ms-transform:translateY(0px);
246 transform:translateY(0px);
247 opacity:1;
248     }
249 }250 @-o-keyframes moveDown{ /*关键帧*/
251 0%{252 -o-transform:translateY(-40px);
253 transform:translateY(-40px);
254 opacity:0;
255     }
256 100%{
257 -o-transform:translateY(0px);
258 transform:translateY(0px);
259 opacity:1;
260     }
261 }262 @keyframes moveDown{ /*关键帧*/
263 0%{264 transform:translateY(-40px);
265 opacity:0;
266     }
267 100%{
268 transform:translateY(0px);
269 opacity:1;
270     }
271 }272 .st-panel p{
273 position:absolute;
274 width:50%;
275 left:25%;
276 top:50%;
277 font-size:16px;
278 line-height:22px;
279 padding:0;
280 text-align:center;
281 backface-visibility:hidden;
282 color:#8b8b8b;
283 margin-top:10px;
284 }
285 #st-control-1:checked ~ .st-scroll #st-panel-1 p,286 #st-control-2:checked ~ .st-scroll #st-panel-2 p,287 #st-control-3:checked ~ .st-scroll #st-panel-3 p,288 #st-control-4:checked ~ .st-scroll #st-panel-4 p,289 #st-control-5:checked ~ .st-scroll #st-panel-5 p{/*bakcwards表示动画默认开始执行，但是0.2S设置了延迟播放时间*/
290 -webkit-animation:moveUp 0.6s ease-in-out 0.2s backwards;
291 -moz-animation:moveUp 0.6s ease-in-out 0.2s backwards;
292 -ms-animation:moveUp 0.6s ease-in-out 0.2s backwards;
293 -o-animation:moveUp 0.6s ease-in-out 0.2s backwards;
294 animation:moveUp 0.6s ease-in-out 0.2s backwards;
295 }
296 @-webkit-keyframes moveUp{
297 0%{298 -webkit-transform:translateY(40px);
299 transform:translateY(40px);
300 opacity:0;
301     }
302 100%{
303 -webkit-transform:translateY(0px);
304 transform:translateY(0px);
305 opacity:1;
306     }
307 }308 @-moz-keyframes moveUp{
309 0%{310 -moz-transform:translateY(40px);
311 transform:translateY(40px);
312 opacity:0;
313     }
314 100%{
315 -moz-transform:translateY(0px);
316 transform:translateY(0px);
317 opacity:1;
318     }
319 }320 @-ms-keyframes moveUp{
321 0%{322 -ms-transform:translateY(40px);
323 transform:translateY(40px);
324 opacity:0;
325     }
326 100%{
327 -ms-transform:translateY(0px);
328 transform:translateY(0px);
329 opacity:1;
330     }
331 }332 @-o-keyframes moveUp{
333 0%{334 -o-transform:translateY(40px);
335 transform:translateY(40px);
336 opacity:0;
337     }
338 100%{
339 -o-transform:translateY(0px);
340 transform:translateY(0px);
341 opacity:1;
342     }
343 }344 @keyframes moveUp{
345 0%{346 transform:translateY(40px);
347 opacity:0;
348     }
349 100%{
350 transform:translateY(0px);
351 opacity:1;
352     }
353 }354 .st-color{
355 background:#CC69ED;
356 }
357 .st-color .st-desc{
358 background:#fff;
359 }
360 .st-color [data-icon]:after{
361 color:#CC69ED;
362 }
363 .st-color h2{
364 color:#fff;
365 text-shadow:1px 1px 1px rgba(0,0,0,0.1);
366 }
367 .st-color p{
368 color:rgba(255,255,255,0.8);
369 }
370 /*移动设备自适应*/
371 @media screen and(max-width:520px){
372 .st-panel h2{373 font-size:42px;
374     }
375 .st-panel p{
376 width:90%;
377 left:10%;
378 margin-top:0;
379     }
380 .st-container > a{
381 font-size:13px;
382     }
383 }384 @media screen and(max-width:360px){
385 .st-panel h2{386 font-size:42px;
387     }
388 .st-container > a{
389 font-size:10px;
390     }
391 .st-desc{
392 width:120px;
393 height:120px;
394 margin-left:-60px;
395     }
396 [data-icon]:after{
397 font-size:60px;
398 -webkit-transform:rotate(-45deg) translateY(25%);
399 -ms-transform:rotate(-45deg) translateY(25%);
400 -o-transform:rotate(-45deg) translateY(25%);
401 transform:rotate(-45deg) translateY(25%);
402     }
403
404 }

转载于:https://www.cnblogs.com/manfredHu/p/4441908.html

CSS3实现页面的平滑过渡相关推荐

页面平滑过渡全屏切换
实现效果为页面平滑过渡全屏切换,点击导航和鼠标滚动都可以切换. 效果图: 代码: <!DOCTYPE html> <html> <head lang="en&q ...
html纵向固定导航菜单代码,CSS3单页面垂直固定导航
当屏幕足够小时(如手机移动设备),会在屏幕右下角展示一个图标,触控图标,则会展开导航菜单,点击菜单页面会滚动到对应的节点,效果非常酷. HTML 我们的导航条是一个无序列表ul,包含在nav.cd-v ...
Codrops 优秀教程：基于 CSS3 的全屏网页过渡特效
向大家分享一个来自 Codrops 的基于 CSS3 实现的全屏网页过渡特效.页面初始布局是四个盒子,点击其中一个会扩张到全屏,其它的会淡出隐藏:关闭当前视图的时候又恢复到初始状态. 您可能感兴趣的相 ...
[css] 请使用css3实现图片的平滑转换
[css] 请使用css3实现图片的平滑转换以全局监听的方式通过 a 标签的描点进行 view 动态切换页面,只要把 a 标签带有 id 的 href 属性的值指到锚点,用 CSS3 的动画进行切换 ...
HTML中淡入的动画效果,CSS3实现页面淡入动画特效代码
现在的css3有很多效果可以直接替换flash了,下面我来给大家介绍一个利用CSS3实现页面淡入动画特效代码,希望此教程对各位同学会有所帮助. 利用CSS3动画属性"@keyframes ...
04-前端技术_CSS与CSS3美化页面
目录二,CSS与CSS3美化页面 1,CSS简介 1.1 什么是CSS? 1.2 样式层叠次序 2,CSS基础语法 2.1 介绍 2.2 注释 3,CSS使用方式 3.1 如何插入样式表 3.2 外 ...
Java学习-14 CSS与CSS3美化页面及网页布局
Java学习-14 CSS与CSS3美化页面及网页布局 1. CSS简介什么是CSS? CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示控制 HTML 元素, ...
CSS3与页面布局学习总结（二）——Box Model、边距折叠、内联与块标签、CSSReset...
CSS3与页面布局学习总结(二)--Box Model.边距折叠.内联与块标签.CSSReset 目录一.盒子模型(Box Model) 1.1.宽度测试 1.2.溢出测试 1.3.box-sizi ...
Viewpager无限循环(首页与尾页平滑过渡)
#Viewpager无限循环(首页与尾页平滑过渡) ##double kill 在网上找了不少的viewpager无限轮播的例子,大部分都是Interger.MAX_VALUES. 滑到最后一页的时候 ...

CSS3实现页面的平滑过渡

CSS3实现页面的平滑过渡相关推荐

最新文章

热门文章