使用Css制作的炫酷的页面平滑切换(学自慕课网)
其实这种东西使用js或jquery也可以实现,代码量也不大,但是纯css制作比较新鲜嘛。就是css代码略多。。。我们也可以添加不同的字体来使页面更加好看。
基本原理:
主要用了css的check hover after 以及定义动画等方法
1,首先利用radio制作导航,固定在底部
2,主体部分:写一个容器充满屏幕,里面是5个section,设置其寬高均为100%(相当于5个页面),容器设置溢出隐藏属性,切换的原理是通过css选择器使我们点击每个导航使其对应的section向上移动n*100%高度,并设置其切换时间。配合主容器的溢出隐藏属性,实际效果就是页面的平滑切换效果啦
3,图片上方的倒三角也是css制作的,里面的1234也是取自section中我们设置的内容
4,页面中的标题的动画效果也是使用css选择器通过定义动画来实现的
不过这样也有一点缺陷,那就是得添加大量的浏览器兼容代码,css代码略长,还有其他的零零碎碎的小问题
页面(需要引入全局normalize.css文件)
<link rel="stylesheet" type="text/css" href="/assets/css/main.css">
<link rel="stylesheet" type="text/css" href="/assets/css/normalize.css">
<body>
<div class="container"> <!-- 主容器 -->
<div class="st-container">
<input type="radio" name="radio-set" checked="checked" id="st-control-1">
<a href="#st-panel-1">Hello</a>
<input type="radio" name="radio-set" id="st-control-2">
<a href="#st-panel-2">你想看什么</a>
<input type="radio" name="radio-set" id="st-control-3">
<a href="#st-panel-3">你想买什么</a>
<input type="radio" name="radio-set" id="st-control-4">
<a href="#st-panel-4">还有谁!!</a>
<input type="radio" name="radio-set" id="st-control-5">
<a href="#st-panel-5">Come On!!</a>
<div class="st-scroll">
<section class="st-panel" id="st-panel-1">
<div class="st-desc" data-icon="1"></div> <!-- 倒三角里面的内容 -->
<h2>Hello</h2>
<p>Welcome To My Shop</p>
</section>
<section class="st-panel st-color" id="st-panel-2">
<div class="st-desc" data-icon="2"></div>
<h2>你想看什么</h2>
<p>什么都可以看</p>
</section>
<section class="st-panel" id="st-panel-3">
<div class="st-desc" data-icon="3"></div>
<h2>你想买什么</h2>
<p>什么都可以买</p>
</section>
<section class="st-panel st-color" id="st-panel-4">
<div class="st-desc" data-icon="4"></div>
<h2>还有谁!</h2>
<p>还有谁这么便宜!</p>
</section>
<section class="st-panel" id="st-panel-5">
<div class="st-desc" data-icon="5"></div>
<h2>Come On</h2>
<p>不注册是不行的 不登陆也是不行的</p>
<button id="mainButton-1" οnclick="signupButton()">注册</button>
<button id="mainButton-2" οnclick="loginButton()">登陆</button>
</section>
</div>
</div>
</div>
</body>
这个是css文件
/*--------------------导航部分----------------------------*/
body{
background: #cbcbcb;
font-weight: 400;
font-size: 15px;
color: white;
height: 100%;
overflow: hidden;
-webkit-font-smoothing: antialiased; /*字体抗锯齿*/
}
a{
text-decoration: none;
color: #555;
}
.clr{
width: 0;
height: 0;
overflow: hidden;
clear: both;
padding: 0;
margin: 0;
}
.st-container{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.st-container input,a{
width: 20%;
height: 40px;
line-height: 40px;
position: fixed;
bottom: 0;
cursor: pointer;
}
.st-container input{
opacity: 0;
z-index: 100;
}
.st-container a{
z-index: 10;
font-weight: 700;
font-size: 16px;
background: #5f9ace;
text-align: center;
color: white;
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: #1578bb;
}
.st-container input:checked + a:after{
content: "";
width: 0;
height: 0;
overflow: hidden;
border: 20px solid transparent;
border-bottom-color: #1578bb;
position: absolute;
bottom: 100%;
left:50% ;
margin-left: -20px;
}
.st-container input:hover + a{
background: #1569a6;
}
/*----------------------选中切换--------------------------*/
.st-scroll{
width: 100%;
height: 100%;
position: relative;
}
.st-panel{
width: 100%;
height: 100%;
}
.st-scroll{
left: 0;
top: 0;
-webkit-transform: translate3D(0,0,0);
-moz-transform: translate3D(0,0,0);
-o-transform: translate3D(0,0,0);
-ms-transform: translate3D(0,0,0);
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;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.st-panel{
background: #57ff54;
overflow: hidden;
}
#st-control-1:checked ~ .st-scroll{
-webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
-o-transform: translateY(0%);
-ms-transform: translateY(0%);
transform: translateY(0%);
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
#st-control-2:checked ~ .st-scroll{
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-o-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
#st-control-3:checked ~ .st-scroll{
-webkit-transform: translateY(-200%);
-moz-transform: translateY(-200%);
-o-transform: translateY(-200%);
-ms-transform: translateY(-200%);
transform: translateY(-200%);
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
#st-control-4:checked ~ .st-scroll{
-webkit-transform: translateY(-300%);
-moz-transform: translateY(-300%);
-o-transform: translateY(-300%);
-ms-transform: translateY(-300%);
transform: translateY(-300%);
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
#st-control-5:checked ~ .st-scroll{
-webkit-transform: translateY(-400%);
-moz-transform: translateY(-400%);
-o-transform: translateY(-400%);
-ms-transform: translateY(-400%);
transform: translateY(-400%);
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
/*---------------------------------------------主体---------------------------------------------------*/
.st-desc{
width: 200px;
height: 200px;
background: #ffeb4b;
position: relative;
left: 50%;
top: 0;
margin-left: -100px;
-webkit-transform: translateY(-50%) rotate(45deg);
-moz-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);
width: 200px;
height: 200px;
color: white;
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%);
-moz-transform: rotate(-45deg) translateY(25%);
-ms-transform: rotate(-45deg) translateY(25%);
-o-transform: rotate(-45deg) translateY(25%);
transform: rotate(-45deg) translateY(25%);
}
.st-panel h2{
color: blueviolet;
font-size: 54px;
line-height: 50px;
text-align: center;
font-weight: 900;
width: 80%;
position: relative;
left: 10%;
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{
-webkit-animation: moveDown 1.3s ease-in-out 0,8s backwards;
-moz-animation: moveDown 1.3s ease-in-out 0,8s backwards;
-ms-animation: moveDown 1.3s ease-in-out 0,8s backwards;
-o-animation: moveDown 1.3s ease-in-out 0,8s backwards;
animation: moveDown 1.3s ease-in-out 0,8s backwards;
}
/*定义h2动画*/
@-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;
}
}
@-ms-keyframes moveDown {
0%{
-ms-transform: translateY(-40px);
opacity: 0;
}
100%{
-ms-transform: translateY(0px);
opacity: 1;
}
}
@-o-keyframes moveDown {
0%{
-o-transform: translateY(-40px);
opacity: 0;
}
100%{
-o-transform: translateY(0px);
opacity: 1;
}
}
@keyframes moveDown {
0%{
transform: translateY(-40px);
opacity: 0;
}
100%{
transform: translateY(0px);
opacity: 1;
}
}
.st-panel p{
position: relative;
width: 60%;
left: 20%;
font-size: 20px;
line-height: 22px;
text-align: center;
color: blueviolet;
}
#mainButton-1{
width:100px;
height:40px;
margin-top: 5%;
left: 32%;
font-size:20px;
color: #6b6b6b;
border-radius: 10px;
background-color: #ffd625;
border: 1px solid white;
position: relative;
}
#mainButton-1:hover{
background-color: #fff419;
color: #242424;
}
#mainButton-2{
width:100px;
height:40px;
margin-top: 5%;
left: 52%;
font-size:20px;
color: #6b6b6b;
border-radius: 10px;
background-color: #ffd625;
border: 1px solid white;
position: relative;
}
#mainButton-2:hover{
background-color: #fff419;
color: #242424;
}
#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 1.3s ease-in-out 0,8s backwards;
-moz-animation: moveUp 1.3s ease-in-out 0,8s backwards;
-ms-animation: moveUp 1.3s ease-in-out 0,8s backwards;
-o-animation: moveUp 1.3s ease-in-out 0,8s backwards;
animation: moveUp 1.3s ease-in-out 0,8s backwards;
}
/*定义p动画*/
@-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;
}
}
@-ms-keyframes moveUp {
0%{
-ms-transform: translateY(40px);
opacity: 0;
}
100%{
-ms-transform: translateY(0px);
opacity: 1;
}
}
@-o-keyframes moveUp {
0%{
-o-transform: translateY(40px);
opacity: 0;
}
100%{
-o-transform: translateY(0px);
opacity: 1;
}
}
@keyframes moveUp {
0%{
transform: translateY(40px);
opacity: 0;
}
100%{
transform: translateY(0px);
opacity: 1;
}
}
.st-color{
background: #fff635;
}
.st-color .st-desc{
background: #59ff57;
}
效果还行吧