• 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.      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.      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.      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.      0;  
    96.     position: absolute;  
    97.     pointer-events: none;  
    98.     border-top-color: #821134;  
    99.     border- 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.      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.      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.      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>  
  • 相关阅读:
    dataframe字段过长被截断
    sublime text 3安装Anaconda插件之后写python出现白框
    在tkinter中使用matplotlib
    RemoteDisconnected: Remote end closed connection without response
    object of type 'Response' has no len()
    matploylib之热力图
    pycharm格式化python代码快捷键Ctrl+Alt+L失效
    Windows下Redis集群配置
    七牛云--对象存储
    Spring发送邮件
  • 原文地址：https://www.cnblogs.com/ranzige/p/4110664.html
Copyright © 2020-2023  润新知