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. SPFA算法 O(kE)

    主要思想是:     初始时将起点加入队列.每次从队列中取出一个元素,并对所有与它相邻的点进行修改,若某个相邻的点修改成功,则将其入队.直到队列为空时算法结束.     这个算法,简单的说就是队列优化 ...

  2. loj2048 「HNOI2016」最小公倍数

    link 题意: 给定一张$N$个顶点$M$条边的无向图(顶点编号为$1,2,...,n$),每条边上带有权值.所有权值都可以分解成$2^a \cdot 3^b$的形式. 现在有$q$个询问,每次询问 ...

  3. 喵哈哈村的魔法考试 Round #3 (Div.2) 题解

    A 题解:保证一个三角形的话,得两边之和大于第三边才行,所以都拿来判一判就好了. #include <iostream> using namespace std; int main(){ ...

  4. 怎么让链式调用setTimeout停止

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. ios手机填坑总结

    1. 日期格式 ios系统.safari只能识别"2018/10/15 00:00:00",不能识别"2018-10-15 00:00:00",所以需要转换格式 ...

  6. 狗日的系统之家下载的Windows 10 1803/1809系统不干净，捆绑自动安装腾讯关键等软件

    特此记录一下,如果网友看到这篇文章请不要下载它们家的,捆绑软件,并且安装自动设置了账号,这还不是修改,是啥? 我们都知道现在iso文件基本都是网友自行制作的,从微软下载的文件自行制作成iso,也就是现 ...

  7. Visual Studio 2019 preview中体验C# 8.0新语法

    准备工作: Visual Studio 2019 Preview版本中并没有包含所有的C# 8.0的新功能,但目前也有一些可以试用了.在开始之前,需要进行入两项设置: 将Framework设置为.ne ...

  8. OpenOCD Debug Adapter Configuration

    Correctly installing OpenOCD includes making your operating system give OpenOCD access to debug adap ...

  9. Programming internal SRAM over SWD

    https://github.com/MarkDing/swd_programing_sram // // Copyright (c) 2013 SILICON LABORATORIES, INC. ...

  10. IntentService 与ResultReceiver

    from://http://lyzhanghai.iteye.com/blog/947504 在google的I/O大会中关于“Writing zippy Android apps”,有讲过用Inte ...