css3 animation 学习

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

 

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

 

下面是效果图：

 

 

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

 

Html代码  收藏代码
  1. <html lang="zh" >  
  2. <head>  
  3.     <meta charset="UTF-8">  
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">   
  5.   
  6. <style>  
  7.       
  8. body{  
  9.     overflow: hidden;  
  10. }  
  11.   
  12. .st-container {  
  13.     position: absolute;  
  14.     width: 100%;  
  15.     height: 100%;  
  16.     top: 0;  
  17.     left: 0;  
  18.     font-family: Arial, sans-serif;  
  19. }  
  20.   
  21. /*put the “navigation” at the top of the page by giving it a fixed position*/  
  22.   
  23. .st-container > input,  
  24. .st-container > a {  
  25.     position: fixed;  
  26.     top: 0;  
  27.     width: 20%;  
  28.     cursor: pointer;  
  29.     font-size: 16px;  
  30.     height: 34px;  
  31.     line-height: 34px;  
  32. }  
  33.    
  34. .st-container > input {  
  35.     opacity: 0;  
  36.     z-index: 1000;  
  37. }  
  38.    
  39. .st-container > a {  
  40.     z-index: 10;  
  41.     font-weight: 700;  
  42.     background: #e23a6e;  
  43.     color: #fff;  
  44.     text-align: center;  
  45.     text-shadow: 1px 1px 1px rgba(151,24,64,0.2);  
  46.     text-decoration: none;  
  47. }  
  48.   
  49. /*It will have the same background color like the link elements:*/  
  50. .st-container:after {  
  51.     content: '';  
  52.     position: fixed;  
  53.     width: 100%;  
  54.     height: 34px;  
  55.     background: #e23a6e;  
  56.     z-index: 9;  
  57.     top: 0;  
  58. }  
  59.   
  60. /*give input and links  respective left values*/  
  61. #st-control-1, #st-control-1 + a {  
  62.     left: 0;  
  63. }  
  64.    
  65. #st-control-2, #st-control-2 + a {  
  66.     left: 20%;  
  67. }  
  68.    
  69. #st-control-3, #st-control-3 + a {  
  70.     left: 40%;  
  71. }  
  72.    
  73. #st-control-4, #st-control-4 + a {  
  74.     left: 60%;  
  75. }  
  76.    
  77. #st-control-5, #st-control-5 + a {  
  78.     left: 80%;  
  79. }  
  80.   
  81. /*define a “selected” state for the link elements.*/  
  82. .st-container > input:checked + a,  
  83. .st-container > input:checked:hover + a{  
  84.     background: #821134;  
  85. }  
  86.   
  87. /*add a little triangle using the pseudo-class :after and give it the same color:*/  
  88.   
  89. .st-container > input:checked + a:after,  
  90. .st-container > input:checked:hover + a:after{  
  91.     top: 100%;  
  92.     border: solid transparent;  
  93.     content: '';  
  94.     height: 0;  
  95.     width: 0;  
  96.     position: absolute;  
  97.     pointer-events: none;  
  98.     border-top-color: #821134;  
  99.     border-width: 20px;  
  100.     left: 50%;  
  101.     margin-left: -20px;  
  102. }  
  103.   
  104. /*define a hover state for the link element:*/  
  105. .st-container > input:hover + a{  
  106.     background: #AD244F;  
  107. }  
  108.    
  109. .st-container > input:hover + a:after {  
  110.     border-bottom-color: #AD244F;  
  111. }  
  112.   
  113. /*define scroll panel style*/  
  114.   
  115. .st-scroll,  
  116. .st-panel {  
  117.     position: relative;  
  118.     width: 100%;  
  119.     height: 100%;  
  120. }  
  121.    
  122. .st-scroll {  
  123.     top: 0;  
  124.     left: 0;  
  125.     -webkit-transition: all 0.6s ease-in-out;  
  126.        
  127.     /* Let's enforce some hardware acceleration */  
  128.     -webkit-transform: translate3d(0, 0, 0);  
  129.     -webkit-backface-visibility: hidden;  
  130.     border: solid 1px #ccc;  
  131. }  
  132.    
  133. .st-panel{  
  134.     background: #fff;  
  135.     overflow: hidden;  
  136. }   
  137.   
  138. /**define the positions for the st-scroll wrapper for each checked radio button*/  
  139.   
  140. #st-control-1:checked ~ .st-scroll {  
  141.     -webkit-transform: translateY(0%);  
  142.     background-color: green;  
  143. }  
  144. #st-control-2:checked ~ .st-scroll {  
  145.     -webkit-transform: translateY(-100%);  
  146.     background-color: green;  
  147. }  
  148. #st-control-3:checked ~ .st-scroll {  
  149.     -webkit-transform: translateY(-200%);  
  150.     background-color: green;  
  151. }  
  152. #st-control-4:checked ~ .st-scroll {  
  153.     -webkit-transform: translateY(-300%);  
  154.     background-color: green;  
  155. }  
  156. #st-control-5:checked ~ .st-scroll {  
  157.     -webkit-transform: translateY(-400%);  
  158.     background-color: green;  
  159. }  
  160.   
  161. #st-control-1:checked ~ .st-scroll #st-panel-1 h2,  
  162. #st-control-2:checked ~ .st-scroll #st-panel-2 h2,  
  163. #st-control-3:checked ~ .st-scroll #st-panel-3 h2,  
  164. #st-control-4:checked ~ .st-scroll #st-panel-4 h2,  
  165. #st-control-5:checked ~ .st-scroll #st-panel-5 h2{  
  166.     -webkit-animation: moveDown 1.6s ease-in-out 1.2s backwards;  
  167. }  
  168.   
  169. /** define animation for the scroll panel*/   
  170. @keyframes moveDown{  
  171.     0% {   
  172.         -webkit-transform: translateY(-40px);   
  173.         opacity: 0;  
  174.     }  
  175.     100% {   
  176.         -webkit-transform: translateY(0px);    
  177.         opacity: 1;  
  178.     }  
  179. }  
  180.   
  181. .st-panel h2 {  
  182.     color: #e23a6e;  
  183.     text-shadow: 1px 1px 1px rgba(151,24,64,0.2);  
  184.     position: absolute;  
  185.     font-size: 54px;  
  186.     font-weight: 900;  
  187.     width: 80%;  
  188.     left: 10%;  
  189.     text-align: center;  
  190.     line-height: 50px;  
  191.     margin: -70px 0 0 0;  
  192.     padding: 0;  
  193.     top: 50%;  
  194.     -webkit-backface-visibility: hidden;  
  195. }  
  196.   
  197. .st-panel p {  
  198.     position: absolute;  
  199.     text-align: center;  
  200.     font-size: 16px;  
  201.     line-height: 22px;  
  202.     color: #8b8b8b;  
  203.     z-index: 2;  
  204.     padding: 0;  
  205.     width: 50%;  
  206.     left: 25%;  
  207.     top: 50%;  
  208.     margin: 10px 0 0 0;  
  209.     -webkit-backface-visibility: hidden;  
  210. }  
  211.   
  212. </style>  
  213. <body>  
  214.         <div class="container">  
  215.           
  216.             <div class="st-container">  
  217.               
  218.                 <input type="radio" name="radio-set" checked="checked" id="st-control-1">  
  219.                 <a href="#st-panel-1">Serendipity</a>  
  220.                 <input type="radio" name="radio-set" id="st-control-2">  
  221.                 <a href="#st-panel-2">Happiness</a>  
  222.                 <input type="radio" name="radio-set" id="st-control-3">  
  223.                 <a href="#st-panel-3">Tranquillity</a>  
  224.                 <input type="radio" name="radio-set" id="st-control-4">  
  225.                 <a href="#st-panel-4">Positivity</a>  
  226.                 <input type="radio" name="radio-set" id="st-control-5">  
  227.                 <a href="#st-panel-5">Passion</a>  
  228.                   
  229.                 <div class="st-scroll">  
  230.                   
  231.                     <!-- Placeholder text from http://hipsteripsum.me/ -->  
  232.                       
  233.                     <section class="st-panel" id="st-panel-1">  
  234.                         <h2>Serendipity</h2>  
  235.                         <p>Banksy adipisicing eiusmod banh mi sed. Squid stumptown est odd future nisi, commodo mlkshk pop-up adipisicing retro.</p>  
  236.                     </section>  
  237.                       
  238.                     <section class="st-panel st-color" id="st-panel-2">  
  239.                         <h2>Happiness</h2>  
  240.                         <p>Art party readymade beard labore cosby sweater culpa. Art party whatever incididunt, scenester umami polaroid tofu.</p>  
  241.                     </section>  
  242.                       
  243.                     <section class="st-panel" id="st-panel-3">  
  244.                         <h2>Tranquillity</h2>  
  245.                         <p>Sint aute occaecat id vice. Post-ironic fap pork belly next level godard, id fanny pack williamsburg forage truffaut.</p>  
  246.                     </section>  
  247.                       
  248.                     <section class="st-panel st-color" id="st-panel-4">  
  249.                         <h2>Positivity</h2>  
  250.                         <p>Mixtape fap leggings art party, butcher authentic farm-to-table you probably haven't heard of them do labore cosby sweater.</p>  
  251.                     </section>  
  252.                       
  253.                     <section class="st-panel" id="st-panel-5">  
  254.                         <h2>Passion</h2>  
  255.                         <p>Fixie ad odd future polaroid dreamcatcher, nesciunt carles bicycle rights accusamus mcsweeney's mumblecore nulla irony.</p>  
  256.                     </section>  
  257.   
  258.                 </div><!-- // st-scroll -->  
  259.                   
  260.             </div><!-- // st-container -->  
  261.               
  262.         </div>  
  263. </body>  
  264. </html>  

 

posted @ 2014-11-20 15:10  技术狂  阅读(775)  评论(0)  编辑  收藏  举报