css3 animation 学习_html/css_WEB-ITnose-HTML 튜토리얼-php.cn

Serendipity

Happiness

Tranquillity

Positivity

Passion

집

웹 프론트엔드

HTML 튜토리얼

css3 animation 学习_html/css_WEB-ITnose

Jun 24, 2016 am 11:53 AM

css3中可以实现动画效果，主要是通过css3中新增加的属性(transform , transition,animation )来完成。

他们的详细解释可以参考 W3CSCHOOL

下面是效果图：

类似于tab选项卡，当点击某个input的时候，就以动画的效果来显示对应的内容区域。

Html代码

body{
overflow: hidden;
}
.st-container {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
font-family: Arial, sans-serif;
}
/*put the “navigation” at the top of the page by giving it a fixed position*/
.st-container > input,
.st-container > a {
position: fixed;
top: 0;
width: 20%;
cursor: pointer;
font-size: 16px;
height: 34px;
line-height: 34px;
}
.st-container > input {
opacity: 0;
z-index: 1000;
}
.st-container > a {
z-index: 10;
font-weight: 700;
background: #e23a6e;
color: #fff;
text-align: center;
text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
text-decoration: none;
}
/*It will have the same background color like the link elements:*/
.st-container:after {
content: '';
position: fixed;
width: 100%;
height: 34px;
background: #e23a6e;
z-index: 9;
top: 0;
}
/*give input and links respective left values*/
#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%;
}
/*define a “selected” state for the link elements.*/
.st-container > input:checked + a,
.st-container > input:checked:hover + a{
background: #821134;
}
/*add a little triangle using the pseudo-class :after and give it the same color:*/
.st-container > input:checked + a:after,
.st-container > input:checked:hover + a:after{
top: 100%;
border: solid transparent;
content: '';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-top-color: #821134;
border-width: 20px;
left: 50%;
margin-left: -20px;
}
/*define a hover state for the link element:*/
.st-container > input:hover + a{
background: #AD244F;
}
.st-container > input:hover + a:after {
border-bottom-color: #AD244F;
}
/*define scroll panel style*/
.st-scroll,
.st-panel {
position: relative;
width: 100%;
height: 100%;
}
.st-scroll {
top: 0;
left: 0;
-webkit-transition: all 0.6s ease-in-out;
/* Let's enforce some hardware acceleration */
-webkit-transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
border: solid 1px #ccc;
}
.st-panel{
background: #fff;
overflow: hidden;
}
/**define the positions for the st-scroll wrapper for each checked radio button*/
#st-control-1:checked ~ .st-scroll {
-webkit-transform: translateY(0%);
background-color: green;
}
#st-control-2:checked ~ .st-scroll {
-webkit-transform: translateY(-100%);
background-color: green;
}
#st-control-3:checked ~ .st-scroll {
-webkit-transform: translateY(-200%);
background-color: green;
}
#st-control-4:checked ~ .st-scroll {
-webkit-transform: translateY(-300%);
background-color: green;
}
#st-control-5:checked ~ .st-scroll {
-webkit-transform: translateY(-400%);
background-color: green;
}
#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.6s ease-in-out 1.2s backwards;
}
/** define animation for the scroll panel*/
@keyframes moveDown{
0% {
-webkit-transform: translateY(-40px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0px);
opacity: 1;
}
}
.st-panel h2 {
color: #e23a6e;
text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
position: absolute;
font-size: 54px;
font-weight: 900;
width: 80%;
left: 10%;
text-align: center;
line-height: 50px;
margin: -70px 0 0 0;
padding: 0;
top: 50%;
-webkit-backface-visibility: hidden;
}
.st-panel p {
position: absolute;
text-align: center;
font-size: 16px;
line-height: 22px;
color: #8b8b8b;
z-index: 2;
padding: 0;
width: 50%;
left: 25%;
top: 50%;
margin: 10px 0 0 0;
-webkit-backface-visibility: hidden;
}
Serendipity
Happiness
Tranquillity
Positivity
Passion
Serendipity
Banksy adipisicing eiusmod banh mi sed. Squid stumptown est odd future nisi, commodo mlkshk pop-up adipisicing retro.
Happiness
Art party readymade beard labore cosby sweater culpa. Art party whatever incididunt, scenester umami polaroid tofu.
Tranquillity
Sint aute occaecat id vice. Post-ironic fap pork belly next level godard, id fanny pack williamsburg forage truffaut.
Positivity
Mixtape fap leggings art party, butcher authentic farm-to-table you probably haven't heard of them do labore cosby sweater.
Passion
Fixie ad odd future polaroid dreamcatcher, nesciunt carles bicycle rights accusamus mcsweeney's mumblecore nulla irony.