Maison >interface Web >tutoriel HTML >css3 animation 学习_html/css_WEB-ITnose

css3 animation 学习_html/css_WEB-ITnose

WBOY
WBOYoriginal
2016-06-24 11:53:421270parcourir

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

 

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

 

下面是效果图:

 

 

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

 

Html代码   

  1.   
  2.   
  3.       
  4.        
  5.   
  6.       
  7. body{  
  8.     overflow: hidden;  
  9. }  
  10.   
  11. .st-container {  
  12.     position: absolute;  
  13.     width: 100%;  
  14.     height: 100%;  
  15.     top: 0;  
  16.     left: 0;  
  17.     font-family: Arial, sans-serif;  
  18. }  
  19.   
  20. /*put the “navigation” at the top of the page by giving it a fixed position*/  
  21.   
  22. .st-container > input,  
  23. .st-container > a {  
  24.     position: fixed;  
  25.     top: 0;  
  26.     width: 20%;  
  27.     cursor: pointer;  
  28.     font-size: 16px;  
  29.     height: 34px;  
  30.     line-height: 34px;  
  31. }  
  32.    
  33. .st-container > input {  
  34.     opacity: 0;  
  35.     z-index: 1000;  
  36. }  
  37.    
  38. .st-container > a {  
  39.     z-index: 10;  
  40.     font-weight: 700;  
  41.     background: #e23a6e;  
  42.     color: #fff;  
  43.     text-align: center;  
  44.     text-shadow: 1px 1px 1px rgba(151,24,64,0.2);  
  45.     text-decoration: none;  
  46. }  
  47.   
  48. /*It will have the same background color like the link elements:*/  
  49. .st-container:after {  
  50.     content: '';  
  51.     position: fixed;  
  52.     width: 100%;  
  53.     height: 34px;  
  54.     background: #e23a6e;  
  55.     z-index: 9;  
  56.     top: 0;  
  57. }  
  58.   
  59. /*give input and links  respective left values*/  
  60. #st-control-1, #st-control-1 + a {  
  61.     left: 0;  
  62. }  
  63.    
  64. #st-control-2, #st-control-2 + a {  
  65.     left: 20%;  
  66. }  
  67.    
  68. #st-control-3, #st-control-3 + a {  
  69.     left: 40%;  
  70. }  
  71.    
  72. #st-control-4, #st-control-4 + a {  
  73.     left: 60%;  
  74. }  
  75.    
  76. #st-control-5, #st-control-5 + a {  
  77.     left: 80%;  
  78. }  
  79.   
  80. /*define a “selected” state for the link elements.*/  
  81. .st-container > input:checked + a,  
  82. .st-container > input:checked:hover + a{  
  83.     background: #821134;  
  84. }  
  85.   
  86. /*add a little triangle using the pseudo-class :after and give it the same color:*/  
  87.   
  88. .st-container > input:checked + a:after,  
  89. .st-container > input:checked:hover + a:after{  
  90.     top: 100%;  
  91.     border: solid transparent;  
  92.     content: '';  
  93.     height: 0;  
  94.     width: 0;  
  95.     position: absolute;  
  96.     pointer-events: none;  
  97.     border-top-color: #821134;  
  98.     border-width: 20px;  
  99.     left: 50%;  
  100.     margin-left: -20px;  
  101. }  
  102.   
  103. /*define a hover state for the link element:*/  
  104. .st-container > input:hover + a{  
  105.     background: #AD244F;  
  106. }  
  107.    
  108. .st-container > input:hover + a:after {  
  109.     border-bottom-color: #AD244F;  
  110. }  
  111.   
  112. /*define scroll panel style*/  
  113.   
  114. .st-scroll,  
  115. .st-panel {  
  116.     position: relative;  
  117.     width: 100%;  
  118.     height: 100%;  
  119. }  
  120.    
  121. .st-scroll {  
  122.     top: 0;  
  123.     left: 0;  
  124.     -webkit-transition: all 0.6s ease-in-out;  
  125.        
  126.     /* Let's enforce some hardware acceleration */  
  127.     -webkit-transform: translate3d(0, 0, 0);  
  128.     -webkit-backface-visibility: hidden;  
  129.     border: solid 1px #ccc;  
  130. }  
  131.    
  132. .st-panel{  
  133.     background: #fff;  
  134.     overflow: hidden;  
  135. }   
  136.   
  137. /**define the positions for the st-scroll wrapper for each checked radio button*/  
  138.   
  139. #st-control-1:checked ~ .st-scroll {  
  140.     -webkit-transform: translateY(0%);  
  141.     background-color: green;  
  142. }  
  143. #st-control-2:checked ~ .st-scroll {  
  144.     -webkit-transform: translateY(-100%);  
  145.     background-color: green;  
  146. }  
  147. #st-control-3:checked ~ .st-scroll {  
  148.     -webkit-transform: translateY(-200%);  
  149.     background-color: green;  
  150. }  
  151. #st-control-4:checked ~ .st-scroll {  
  152.     -webkit-transform: translateY(-300%);  
  153.     background-color: green;  
  154. }  
  155. #st-control-5:checked ~ .st-scroll {  
  156.     -webkit-transform: translateY(-400%);  
  157.     background-color: green;  
  158. }  
  159.   
  160. #st-control-1:checked ~ .st-scroll #st-panel-1 h2,  
  161. #st-control-2:checked ~ .st-scroll #st-panel-2 h2,  
  162. #st-control-3:checked ~ .st-scroll #st-panel-3 h2,  
  163. #st-control-4:checked ~ .st-scroll #st-panel-4 h2,  
  164. #st-control-5:checked ~ .st-scroll #st-panel-5 h2{  
  165.     -webkit-animation: moveDown 1.6s ease-in-out 1.2s backwards;  
  166. }  
  167.   
  168. /** define animation for the scroll panel*/   
  169. @keyframes moveDown{  
  170.     0% {   
  171.         -webkit-transform: translateY(-40px);   
  172.         opacity: 0;  
  173.     }  
  174.     100% {   
  175.         -webkit-transform: translateY(0px);    
  176.         opacity: 1;  
  177.     }  
  178. }  
  179.   
  180. .st-panel h2 {  
  181.     color: #e23a6e;  
  182.     text-shadow: 1px 1px 1px rgba(151,24,64,0.2);  
  183.     position: absolute;  
  184.     font-size: 54px;  
  185.     font-weight: 900;  
  186.     width: 80%;  
  187.     left: 10%;  
  188.     text-align: center;  
  189.     line-height: 50px;  
  190.     margin: -70px 0 0 0;  
  191.     padding: 0;  
  192.     top: 50%;  
  193.     -webkit-backface-visibility: hidden;  
  194. }  
  195.   
  196. .st-panel p {  
  197.     position: absolute;  
  198.     text-align: center;  
  199.     font-size: 16px;  
  200.     line-height: 22px;  
  201.     color: #8b8b8b;  
  202.     z-index: 2;  
  203.     padding: 0;  
  204.     width: 50%;  
  205.     left: 25%;  
  206.     top: 50%;  
  207.     margin: 10px 0 0 0;  
  208.     -webkit-backface-visibility: hidden;  
  209. }  
  210.   
  211.   
  212.   
  213.         
      
  214.           
  215.             
      
  216.               
  217.                   
  218.                 Serendipity  
  219.                   
  220.                 Happiness  
  221.                   
  222.                 Tranquillity  
  223.                   
  224.                 Positivity  
  225.                   
  226.                 Passion  
  227.                   
  228.                 
      
  229.                   
  230.                       
  231.                       
  232.                     
      
  233.                         

    Serendipity

      
  234.                         

    Banksy adipisicing eiusmod banh mi sed. Squid stumptown est odd future nisi, commodo mlkshk pop-up adipisicing retro.

      
  235.                       
  236.                       
  237.                     
      
  238.                         

    Happiness

      
  239.                         

    Art party readymade beard labore cosby sweater culpa. Art party whatever incididunt, scenester umami polaroid tofu.

      
  240.                       
  241.                       
  242.                     
      
  243.                         

    Tranquillity

      
  244.                         

    Sint aute occaecat id vice. Post-ironic fap pork belly next level godard, id fanny pack williamsburg forage truffaut.

      
  245.                       
  246.                       
  247.                     
      
  248.                         

    Positivity

      
  249.                         

    Mixtape fap leggings art party, butcher authentic farm-to-table you probably haven't heard of them do labore cosby sweater.

      
  250.                       
  251.                       
  252.                     
      
  253.                         

    Passion

      
  254.                         

    Fixie ad odd future polaroid dreamcatcher, nesciunt carles bicycle rights accusamus mcsweeney's mumblecore nulla irony.

      
  255.                       
  256.   
  257.                 
  
  •                   
  •             
  •   
  •               
  •         
  •   
  •   
  •   
  •  

    Déclaration:
    Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
    Article précédent:响应式WEB设计的9项基本原则_html/css_WEB-ITnoseArticle suivant:CSS中的盒子模型详解_html/css_WEB-ITnose

    Articles Liés

    Voir plus