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 }