css3 animation 学习

2022-06-10 09:27:34

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

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

下面是效果图：

css3 animation 学习

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

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


下一篇：Spring Cloud Eureka服务Demo级搭建