                        课程
                    
                        /前端开发
                        
                            /CSS3
                        
                        /css3实现网页平滑过渡效果

求源代码啊

能提供一下源代码吗，光看你写是看不懂的，要拿来研究一下！

___骑猪去美国

2015-04-19

源自：css3实现网页平滑过渡效果 2-5

关注问题我要回答

1625

操作

收起

1 回答

1w1
2015-04-20

<html>
<head lang="zh">
<meta charset="UTF-8" />
<meta http-equiv="x-ua-compatible" content="IE-edge,chrome=1"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="{{ asset('css/normalise.css') }}"/>
<link rel="stylesheet" href="{{ asset('css/home.css') }}"/>
<title>css3</title>
</head>
<body>

<div class="container">
<div class="st-container">
<input type="radio" name="radio-set" id="st-control-1" checked="checked"/>
<a href="#st-panel-1">首页</a>
<input type="radio" name="radio-set" id="st-control-2"/>
<a href="#st-panel-2">Plane</a>
<input type="radio" name="radio-set" id="st-control-3"/>
<a href="#st-panel-3">Moon</a>
<input type="radio" name="radio-set" id="st-control-4"/>
<a href="#st-panel-4">Lock</a>
<input type="radio" name="radio-set" id="st-control-5"/>
<a href="#st-panel-5">Home</a>
<div class="st-scroll">
<section class="st-panel" id="st-panel-1">
{{--<div><i class="fa fa-heart"></i></div>--}}
{{--<h2>怦然心动</h2>--}}
{{--<p>当我看见你的第一眼，你、让我怦然心动。</p>--}}
<div class="baidu">
<img src="https://www.baidu.com/img/bd_logo1.png" alt="baidu"/>
</div>
<div class="search">
<input type="text" id="search-content"/>
<input type="submit" id="search-btn"/>
</div>
</section>
<section class="st-panel st-color" id="st-panel-2">
<div class="st-desc"><i class="fa fa-paper-plane"></i></div>
<h2></h2>
<p>
</p>
</section>
<section class="st-panel" id="st-panel-3">
<div class="st-desc"><i class="fa fa-moon-o"></i></div>
<h2></h2>
<p></p>
</section>
<section class="st-panel st-color" id="st-panel-4">
<div class="st-desc"><i class="fa fa-lock"></i></div>
<h2></h2>
<p></p>
</section>
<section class="st-panel" id="st-panel-5">
<div class="st-desc"><i class="fa fa-home"></i></div>
<h2></h2>
<p></p>
</section>
</div>
</div>
</div>

</body>
</html>

body{
font-family: Georgia,serif;
background-color: #ddd;
font-weight: 400;
font-size: 15px;
color: #333333;
overflow: hidden;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
}

a{
text-decoration: none;
color: #555555;
}

.clr{
width: 0;
height: 0;
overflow: hidden;
clear: both;
padding: 0;
margin: 0;
}

.st-container{
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
left: 0;
top: 0;
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: 0;
cursor: pointer;
}

.st-container>input{
opacity: 0;
z-index: 999;
}
.st-container>a{
z-index: 5;
font-weight: bold;
font-size: 24px;
background: #e23a6e;
text-align: center;
color: #FFFFFF;
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: #821134;
}

.st-container input:checked + a:after{
content: '';
width: 0;
height: 0;
overflow: hidden;
border: 20px solid transparent;
border-bottom-color: #821134;
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -20px;
}

.st-container input:hover + a {
background: #ad244f;
}

.st-scroll,.st-panel{
width: 100%;
height: 100%;
position: relative;
}

.st-scroll{
left: 0;
top: 0;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-webkit-backface-visibility: hidden;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-ms-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: #FFFFFF;
overflow: hidden;
}

#st-control-1:checked ~ .st-scroll{
-webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
-ms-transform: translateY(0%);
-o-transform: translateY(0%);
transform: translateY(0%);
}

#st-control-2:checked ~ .st-scroll{
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}

#st-control-3:checked ~ .st-scroll{
-webkit-transform: translateY(-200%);
-moz-transform: translateY(-200%);
-ms-transform: translateY(-200%);
-o-transform: translateY(-200%);
transform: translateY(-200%);
}
#st-control-4:checked ~ .st-scroll{
-webkit-transform: translateY(-300%);
-moz-transform: translateY(-300%);
-ms-transform: translateY(-300%);
-o-transform: translateY(-300%);
transform: translateY(-300%);
}
#st-control-5:checked ~ .st-scroll{
-webkit-transform: translateY(-400%);
-moz-transform: translateY(-400%);
-ms-transform: translateY(-400%);
-o-transform: translateY(-400%);
transform: translateY(-400%);
}

.st-desc{
width: 200px;
height: 200px;
background: #fa96b5;
position: absolute;
top: 0;
left: 50%;
margin-left: -100px;
-webkit-transform: translateY(-50%) rotate(45deg);
-moz-transform: translateY(-50%) rotate(45deg);
-o-transform: translateY(-50%) rotate(45deg);
-ms-transform: translateY(-50%) rotate(45deg);
transform: translateY(-50%) rotate(45deg);
}

.fa{
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
margin: -60px 0px 0px -60px;
color: #FFFFFF;
font-size: 90px;
position: absolute;
left: 50%;
top:50%;
transform: rotate(-45deg);
}

.st-panel h2 {
color: #e23a6e;
font-size: 54px;
line-height: 50px ;
text-align : center;
font-weight : 900;
width: 80%;
position: absolute;
left: 10%;
top: 50%;
margin-top: -70px;
text-shadow: 1px 1px 1px rgba(151, 24, 16, 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 {
-webkit-animation: moveDown 0.7s ease-in-out 0.2s backwards;

-moz-animation: moveDown 0.7s ease-in-out 0.2s backwards;

-o-animation: moveDown 0.7s ease-in-out 0.2s backwards;

-ms-animation: moveDown 0.7s ease-in-out 0.2s backwards;

animation: moveDown 0.7s ease-in-out 0.2s backwards;
}

@-webkit-keyframes moveDown {
0%{
-webkit-transform: translateY(-40px);
opacity: 0;
}
100%{
-webkit-transform: translateY(0px);
opacity: 1;
}
}

@-moz-keyframes moveDown {
0%{
-moz-transform: translateY(-40px);
opacity: 0;
}
100%{
-moz-transform: translateY(0px);
opacity: 1;
}
}

@-o-keyframes moveDown {
0%{
-o-transform: translateY(-40px);
opacity: 0;
}
100%{
-o-transform: translateY(0px);
opacity: 1;
}
}

@-ms-keyframes moveDown {
0%{
-ms-transform: translateY(-40px);
opacity: 0;
}
100%{
-ms-transform: translateY(0px);
opacity: 1;
}
}

.st-panel p{
position: absolute;
min-width: 50px;
left: 25%;
right: 25%;
top:50%;
padding:0px;
font-size: 30px;
line-height: 30px;
text-align: center;
-webkit-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 {
-webkit-animation: moveUp 0.7s ease-in-out 0.2s backwards;

-moz-animation: moveUp 0.7s ease-in-out 0.2s backwards;

-o-animation: moveUp 0.7s ease-in-out 0.2s backwards;

-ms-animation: moveUp 0.7s ease-in-out 0.2s backwards;

animation: moveUp 0.7s ease-in-out 0.2s backwards;
}

@-webkit-keyframes moveUp {
0%{
-webkit-transform: translateY(40px);
opacity: 0;
}
100%{
-webkit-transform: translateY(0px);
opacity: 1;
}
}

@-moz-keyframes moveUp {
0%{
-moz-transform: translateY(40px);
opacity: 0;
}
100%{
-moz-transform: translateY(0px);
opacity: 1;
}
}

@-o-keyframes moveUp {
0%{
-o-transform: translateY(40px);
opacity: 0;
}
100%{
-o-transform: translateY(0px);
opacity: 1;
}
}

@-ms-keyframes moveUp {
0%{
-ms-transform: translateY(40px);
opacity: 0;
}
100%{
-ms-transform: translateY(0px);
opacity: 1;
}
}

.st-color{
background:#fa96b5 ;
}

.st-color .st-desc{
background: #FFFFFF;
}

.st-color .fa{
color: #fa96b5;
}

.st-color h2{
color: #FFFFFF;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}

.st-color p{
color: #FFFFFF;
}

@media screen and (max-width: 580px){
.st-panel h2{
font-size: 42px;
}
.st-panel p{
width: 90%;
left: 5%;
right: 5%;
margin-top: 10px;
}

.st-container>a{
font-size: 8px;
}

}

自己看着改