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

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

下面是效果图：

类似于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>

css3 animation 学习的更多相关文章

  1. CSS3 Animation学习笔记

    Internet Explorer 9,以及更早的版本, 不支持 @keyframe 规则或 animation 属性. Internet Explorer 10.Firefox 以及 Opera 支 ...

  2. 实现了一个百度首页的彩蛋——CSS3 Animation简介

    在百度搜索中有这样一个彩蛋:搜索“旋转”,“跳跃”,“反转”等词语,会出现相应的动画效果(搜索“反转”后的效果).查看源码可以发现,这些效果正是通过CSS3的animation属性实现的. 实现这个彩 ...

  3. css3 animation实现风车转动

    项目中经常有用到动画效果,比如Loading.风车转动等等.最简单的办法是使用gif,但是gif在半透明背景下有白边,体验不友好,好在现在可以使用css3的anmiation来实现动画效果,极大的提升 ...

  4. css3 animation动画特效插件的巧用

    这一个是css3  animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...

  5. CSS3 Animation Cheat Sheet：实用的 CSS3 动画库

    CSS3 Animation Cheat Sheet 是一组预设的动画库,为您的 Web 项目添加各种很炫的动画.所有你需要做的是添加样式表到你的网站,为你想要添加动画效果的元素应用预制的 CSS 类 ...

  6. Android Animation学习（六） View Animation介绍

    Android Animation学习(六) View Animation介绍 View Animation View animation系统可以用来执行View上的Tween animation和F ...

  7. Android Animation学习（五） ApiDemos解析：容器布局动画 LayoutTransition

    Android Animation学习(五) ApiDemos解析:容器布局动画 LayoutTransition Property animation系统还提供了对ViewGroup中的View改变 ...

  8. Android Animation学习（四） ApiDemos解析：多属性动画

    Android Animation学习(四) ApiDemos解析:多属性动画 如果想同时改变多个属性,根据前面所学的,比较显而易见的一种思路是构造多个对象Animator , ( Animator可 ...

  9. Android Animation学习（三） ApiDemos解析：XML动画文件的使用

    Android Animation学习(三) ApiDemos解析:XML动画文件的使用 可以用XML文件来定义Animation. 文件必须有一个唯一的根节点: <set>, <o ...

随机推荐

  1. bzoj4456: [Zjoi2016]旅行者

    题目链接 bzoj4456: [Zjoi2016]旅行者 题解 网格图,对于图分治,每次从中间切垂直于长的那一边, 对于切边上的点做最短路,合并在图两边的答案. 有点卡常 代码 #include< ...

  2. c# -- 解决vs使用本地iis运行项目支持局域网访问的问题（附防火墙端口开放步骤）

    用vs运行项目时,有时候需要局域网内不同设备进行访问调试~ 以前解决过这个问题,这次用了部新电脑,问题又出现了,改了配置还是不行,原来还差了一步防火墙端口开放访问. 于是写了这篇分享,备忘~ 操作步骤 ...

  3. AutoMapper实际项目运用

    AutoMapper是对象到对象的映射工具.在完成映射规则之后,AutoMapper可以将源对象转换为目标对象. 配置AutoMapper映射规则 AutoMapper是基于约定的,因此在实用映射之前 ...

  4. ARM JTAG 20P to Cortex JTAG 10P

  5. TimingTool - The Timing Diagram Editor

    TimingTool - The Timing Diagram TimingTool is designed to give electronics engineers an easy to use ...

  6. 基于设备树的controller学习（1）

    作者 彭东林pengdonglin137@163.com 平台 TQ2440Linux-4.10.17 概述 在设备树中我们经常见到诸如"#clock-cells"."# ...

  7. C#中使用throw和throw ex抛出异常的区别

    通常,我们使用try/catch/finally语句块来捕获异常,就像在这里说的.在抛出异常的时候,使用throw和throw ex有什么区别呢? 假设,按如下的方式调用几个方法: →在Main方法中 ...

  8. tms mqtt

    tms mqtt 功能概述 MQTT客户端组件 可用于VCL,FMX和LCL应用 支持Windows,iOS,Android,macOS,Linux,Raspberry Pi 实现完整的MQTT规范, ...

  9. C#编程（三十）----------泛型结构,泛型方法,泛型委托

    泛型结构 泛型结构和泛型类几乎是一直的,只是泛型结构没有继承的特性..NET平台提供的一个泛型结构是(可空类型)Nullablle<T>.可空类型的引入,主要是为了解决数据库语言中的数字与 ...

  10. Android Activity之间切换出现短暂黑屏的处理方法

    转自:http://www.cppblog.com/fwxjj/archive/2013/01/14/197259.html 在默认情况下,Android应用程序启动时,会有一个黑屏的时期,原因是,首 ...