css3 animation 学习
2014-11-20 15:10
344 查看
css3中可以实现动画效果，主要是通过css3中新增加的属性(transform , transition,animation )来完成。
他们的详细解释可以参考 W3CSCHOOL
下面是效果图：
类似于tab选项卡，当点击某个input的时候，就以动画的效果来显示对应的内容区域。
Html代码
<html lang="zh" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
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;
}
</style>
<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">Serendipity</a>
<input type="radio" name="radio-set" id="st-control-2">
<a href="#st-panel-2">Happiness</a>
<input type="radio" name="radio-set" id="st-control-3">
<a href="#st-panel-3">Tranquillity</a>
<input type="radio" name="radio-set" id="st-control-4">
<a href="#st-panel-4">Positivity</a>
<input type="radio" name="radio-set" id="st-control-5">
<a href="#st-panel-5">Passion</a>
<div class="st-scroll">
<!-- Placeholder text from http://hipsteripsum.me/ -->
<section class="st-panel" id="st-panel-1">
<h2>Serendipity</h2>
<p>Banksy adipisicing eiusmod banh mi sed. Squid stumptown est odd future nisi, commodo mlkshk pop-up adipisicing retro.</p>
</section>
<section class="st-panel st-color" id="st-panel-2">
<h2>Happiness</h2>
<p>Art party readymade beard labore cosby sweater culpa. Art party whatever incididunt, scenester umami polaroid tofu.</p>
</section>
<section class="st-panel" id="st-panel-3">
<h2>Tranquillity</h2>
<p>Sint aute occaecat id vice. Post-ironic fap pork belly next level godard, id fanny pack williamsburg forage truffaut.</p>
</section>
<section class="st-panel st-color" id="st-panel-4">
<h2>Positivity</h2>
<p>Mixtape fap leggings art party, butcher authentic farm-to-table you probably haven't heard of them do labore cosby sweater.</p>
</section>
<section class="st-panel" id="st-panel-5">
<h2>Passion</h2>
<p>Fixie ad odd future polaroid dreamcatcher, nesciunt carles bicycle rights accusamus mcsweeney's mumblecore nulla irony.</p>
</section>
</div><!-- // st-scroll -->
</div><!-- // st-container -->
</div>
</body>
</html>
他们的详细解释可以参考 W3CSCHOOL
下面是效果图：
类似于tab选项卡，当点击某个input的时候，就以动画的效果来显示对应的内容区域。
Html代码
<html lang="zh" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
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;
}
</style>
<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">Serendipity</a>
<input type="radio" name="radio-set" id="st-control-2">
<a href="#st-panel-2">Happiness</a>
<input type="radio" name="radio-set" id="st-control-3">
<a href="#st-panel-3">Tranquillity</a>
<input type="radio" name="radio-set" id="st-control-4">
<a href="#st-panel-4">Positivity</a>
<input type="radio" name="radio-set" id="st-control-5">
<a href="#st-panel-5">Passion</a>
<div class="st-scroll">
<!-- Placeholder text from http://hipsteripsum.me/ -->
<section class="st-panel" id="st-panel-1">
<h2>Serendipity</h2>
<p>Banksy adipisicing eiusmod banh mi sed. Squid stumptown est odd future nisi, commodo mlkshk pop-up adipisicing retro.</p>
</section>
<section class="st-panel st-color" id="st-panel-2">
<h2>Happiness</h2>
<p>Art party readymade beard labore cosby sweater culpa. Art party whatever incididunt, scenester umami polaroid tofu.</p>
</section>
<section class="st-panel" id="st-panel-3">
<h2>Tranquillity</h2>
<p>Sint aute occaecat id vice. Post-ironic fap pork belly next level godard, id fanny pack williamsburg forage truffaut.</p>
</section>
<section class="st-panel st-color" id="st-panel-4">
<h2>Positivity</h2>
<p>Mixtape fap leggings art party, butcher authentic farm-to-table you probably haven't heard of them do labore cosby sweater.</p>
</section>
<section class="st-panel" id="st-panel-5">
<h2>Passion</h2>
<p>Fixie ad odd future polaroid dreamcatcher, nesciunt carles bicycle rights accusamus mcsweeney's mumblecore nulla irony.</p>
</section>
</div><!-- // st-scroll -->
</div><!-- // st-container -->
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- css3学习--css3动画详解一(animation属性）
- CSS3的变形transform、过渡transition、动画animation学习
- css3学习 - animation
- css3学习之animation
- CSS3动画之animation属性学习笔记
- CSS3学习之 animation 属性
- 黄聪：学习笔记: CSS3 鼠标悬停动画
- html5 css3学习资料、教程、实例收集
- （转）Android Animation学习笔记
- 推荐20个关于CSS3优秀学习资源
- Android Animation学习笔记
- Android画图学习总结（四）——Animation（下）
- Android Animation学习笔记
- Android Animation学习笔记
- Android Animation学习笔记
- css3 animation属性
- Android画图学习总结（四）——Animation（中）
- Android画图学习总结（四）——Animation（中）
- Android画图学习总结（四）——Animation（中）
- Android画图学习总结（四）——Animation（下）