这是文件的css，全部文件的话请到Github下载：点击这里
@charset "UTF-8";
@font-face {font-family: 'iconfont';
src: url('font/iconfont.eot'); /* IE9*/
src: url('font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('font/iconfont.woff') format('woff'), /* chrome、firefox */
url('font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('font/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
font-weight: normal; /*设置字体宽度和字体样式*/
font-style:normal;
}
body{
font-family:Georia,serif;
background:#ddd;
font-weight:;
font-size:15px;
color:#333;
overflow:hidden;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
}
a{
text-decoration:none;
color:#555;;
}
.clr{ /*清除浮动*/
width:;
height:;
overflow:hidden;
clear:both;
padding:;
margin:;
}
.st-container{
width:100%;
height:100%;
position:absolute;
left:;
top:;
font-family: "Josefin Slab","Myriad Pro",Arial,sans-serif;
}
.st-container > input,
.st-container > a{
width:20%;
height:34px;
line-height: 34px;
position:fixed;
bottom:; }
.st-container > input{
opacity:;
z-index:;
cursor:pointer;
}
.st-container > a {
z-index:;
font-weight:;
font-size:16px;
background:#b032da;
text-align:center;
color:#fff;
text-shadow:1px 1px 1px rgba(151,24,64,0.2);
}
#st-control-1,#st-control-1+a{
left:0%;
}
#st-control-2,#st-control-2+a{
left:20%;
}
#st-control-3,#st-control-3+a{
left:40%;
}
#st-control-4,#st-control-4+a{
left:60%;
}
#st-control-5,#st-control-5+a{
left:80%;
}
.st-container input:checked+a,
.st-container input:checked:hover+a{
background:#792c92;/*使当前选择的input后面的a显示深紫色，并且当鼠标移过的时候不会改变颜色*/
}
.st-container input:checked+a:after{/*在当前选择的input后面的a下添加小三角形*/
content:"";
width:;
height:;
overflow: hidden;
border:20px solid transparent;
border-bottom-color:#792c92;
position:absolute;
bottom:100%;
left:50%;/*居中*/
margin-left:-20px;
}
.st-container input:hover + a{
background:#cc69ed;/*底部达到hover变成淡紫红色的效果*/
} .st-scroll,
.st-panel{
width:100%;
height:100%;
position: relative;
}
.st-scroll{
left:;
top:;
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-backface-visibility:hidden;
-webkit-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.st-panel{
background:#fff;
overflow: hidden;
}
#st-control-1:checked ~ .st-scroll{
-webkit-transform: translateY(0%);
-ms-transform: translateY(0%);
-o-transform: translateY(0%);
transform: translateY(0%);/*火狐已经实现transform这个属性，所以没有前缀了*/
}
#st-control-2:checked ~ .st-scroll{
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
#st-control-3:checked ~ .st-scroll{
-webkit-transform: translateY(-200%);
-ms-transform: translateY(-200%);
-o-transform: translateY(-200%);
transform: translateY(-200%);
}
#st-control-4:checked ~ .st-scroll{
-webkit-transform: translateY(-300%);
-ms-transform: translateY(-300%);
-o-transform: translateY(-300%);
transform: translateY(-300%);
}
#st-control-5:checked ~ .st-scroll{
-webkit-transform: translateY(-400%);
-ms-transform: translateY(-400%);
-o-transform: translateY(-400%);
transform: translateY(-400%);
}
.st-desc{
width:200px;
height:200px;
background:#8c3da6;
position: absolute;
left:50%;
top:;
margin-left:-100px;
-webkit-transform: translateY(-50%) rotate(45deg);
-ms-transform: translateY(-50%) rotate(45deg);
-o-transform: translateY(-50%) rotate(45deg);
transform: translateY(-50%) rotate(45deg);
}
[data-icon]:after{
content:attr(data-icon); /*内容为data-icon属性的值*/
width:200px;
height:200px;
color:#fff;
font-size:90px;/*字体图标的大小*/
text-align: center;
line-height: 200px;
position: absolute;
left:50%;
top:50%;
margin:-100px 0 0 -100px;
-webkit-transform: rotate(-45deg) translateY(25%);
-ms-transform: rotate(-45deg) translateY(25%);
-o-transform: rotate(-45deg) translateY(25%);
transform: rotate(-45deg) translateY(25%); font-family:"iconfont" !important; /*覆盖原来设置的字体*/
font-size:50px; /*字体大小*/
font-style:normal;
-webkit-font-smoothing: antialiased; /*字体平滑*/
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
text-shadow:3px 3px 1px rgba(151,24,64,0.2);
}
.st-panel h2{
color:#b032da;
font-size:54px;
line-height: 50px;
text-align: center;
font-weight:;
width:80%; /*宽度设置为100%,left0%也可以居中*/
position: absolute;
left:10%;
top:50%;
margin-top:-70px;
text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
-webkit-backface-visibility:hidden; /*?什么用*/
}
#st-control-1:checked ~ .st-scroll #st-panel-1 h2,
#st-control-2:checked ~ .st-scroll #st-panel-2 h2,
#st-control-3:checked ~ .st-scroll #st-panel-3 h2,
#st-control-4:checked ~ .st-scroll #st-panel-4 h2,
#st-control-5:checked ~ .st-scroll #st-panel-5 h2{/*bakcwards表示动画默认开始执行，但是0.2S设置了延迟播放时间*/
-webkit-animation:moveDown 0.6s ease-in-out 0.2s backwards;
-moz-animation:moveDown 0.6s ease-in-out 0.2s backwards;
-ms-animation:moveDown 0.6s ease-in-out 0.2s backwards;
-o-animation:moveDown 0.6s ease-in-out 0.2s backwards;
animation:moveDown 0.6s ease-in-out 0.2s backwards;
}
@-webkit-keyframes moveDown{ /*关键帧*/
0%{
-webkit-transform:translateY(-40px);
transform: translateY(-40px);
opacity:;
}
100%{
-webkit-transform:translateY(0px);
transform:translateY(0px);
opacity:;
}
}
@-moz-keyframes moveDown{ /*关键帧*/
0%{
-moz-transform:translateY(-40px);
transform: translateY(-40px);
opacity:;
}
100%{
-moz-transform:translateY(0px);
transform:translateY(0px);
opacity:;
}
}
@-ms-keyframes moveDown{ /*关键帧*/
0%{
-ms-transform:translateY(-40px);
transform:translateY(-40px);
opacity:;
}
100%{
-ms-transform:translateY(0px);
transform:translateY(0px);
opacity:;
}
}
@-o-keyframes moveDown{ /*关键帧*/
0%{
-o-transform:translateY(-40px);
transform:translateY(-40px);
opacity:;
}
100%{
-o-transform:translateY(0px);
transform:translateY(0px);
opacity:;
}
}
@keyframes moveDown{ /*关键帧*/
0%{
transform:translateY(-40px);
opacity:;
}
100%{
transform:translateY(0px);
opacity:;
}
}
.st-panel p{
position: absolute;
width:50%;
left:25%;
top:50%;
font-size:16px;
line-height: 22px;
padding:;
text-align: center;
backface-visibility:hidden;
color:#8b8b8b;
margin-top:10px;
}
#st-control-1:checked ~ .st-scroll #st-panel-1 p,
#st-control-2:checked ~ .st-scroll #st-panel-2 p,
#st-control-3:checked ~ .st-scroll #st-panel-3 p,
#st-control-4:checked ~ .st-scroll #st-panel-4 p,
#st-control-5:checked ~ .st-scroll #st-panel-5 p{/*bakcwards表示动画默认开始执行，但是0.2S设置了延迟播放时间*/
-webkit-animation:moveUp 0.6s ease-in-out 0.2s backwards;
-moz-animation:moveUp 0.6s ease-in-out 0.2s backwards;
-ms-animation:moveUp 0.6s ease-in-out 0.2s backwards;
-o-animation:moveUp 0.6s ease-in-out 0.2s backwards;
animation:moveUp 0.6s ease-in-out 0.2s backwards;
}
@-webkit-keyframes moveUp{
0%{
-webkit-transform:translateY(40px);
transform:translateY(40px);
opacity:;
}
100%{
-webkit-transform:translateY(0px);
transform:translateY(0px);
opacity:;
}
}
@-moz-keyframes moveUp{
0%{
-moz-transform:translateY(40px);
transform:translateY(40px);
opacity:;
}
100%{
-moz-transform:translateY(0px);
transform:translateY(0px);
opacity:;
}
}
@-ms-keyframes moveUp{
0%{
-ms-transform:translateY(40px);
transform:translateY(40px);
opacity:;
}
100%{
-ms-transform:translateY(0px);
transform:translateY(0px);
opacity:;
}
}
@-o-keyframes moveUp{
0%{
-o-transform:translateY(40px);
transform:translateY(40px);
opacity:;
}
100%{
-o-transform:translateY(0px);
transform:translateY(0px);
opacity:;
}
}
@keyframes moveUp{
0%{
transform:translateY(40px);
opacity:;
}
100%{
transform:translateY(0px);
opacity:;
}
}
.st-color{
background:#CC69ED;
}
.st-color .st-desc{
background:#fff;
}
.st-color [data-icon]:after{
color:#CC69ED;
}
.st-color h2{
color:#fff;
text-shadow:1px 1px 1px rgba(0,0,0,0.1);
}
.st-color p{
color:rgba(255,255,255,0.8);
}
/*移动设备自适应*/
@media screen and(max-width:520px){
.st-panel h2{
font-size:42px;
}
.st-panel p{
width:90%;
left:10%;
margin-top:;
}
.st-container > a{
font-size:13px;
}
}
@media screen and(max-width:360px){
.st-panel h2{
font-size:42px;
}
.st-container > a{
font-size:10px;
}
.st-desc{
width:120px;
height:120px;
margin-left:-60px;
}
[data-icon]:after{
font-size:60px;
-webkit-transform: rotate(-45deg) translateY(25%);
-ms-transform: rotate(-45deg) translateY(25%);
-o-transform: rotate(-45deg) translateY(25%);
transform: rotate(-45deg) translateY(25%);
} }