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. BZOJ4556 HEOI2016字符串

    没错,又是这题,使用后缀自动机,反向建树,主席树维护right集合. By:大奕哥 #include<bits/stdc++.h> using namespace std; ; ]; ch ...

  2. Django插件之Django-hosts的应用

    Django插件之Django-hosts的应用 前因 网站移动端的域名是m.example.com,最开始只是在nginx做了映射,将m.example.com映射到example.com/m/下面 ...

  3. spring-boot parent变更为依赖方式

    原parent继承方式 <parent> <groupId>org.springframework.boot</groupId> <artifactId> ...

  4. Python生成requirements.txt包依赖管理文件

    requirements.txt是Python的依赖管理软件,和Java的POM一样. requirements.txt会生成使用了pip安装后的依赖包,在正常环境下会生成这个目录下的包/usr/lo ...

  5. CentOS 7设置KVM硬盘模式为SCSI

    找到一下节点,把target节点的dev改成s开头,bus改成scsi即可,并删除address节点: 以此内推,如果要修改为ide需要修改dev为h开头,bus改成ide. 参考: https:// ...

  6. netty-socketio 示例代码

    socket.io是一个不错的websocket项目,github上有它的java实现:netty-socketio 及 示例项目 netty-socketio-demo,基本上看看demo示例项目就 ...

  7. [廖雪峰] Git 分支管理(1)：创建与合并分支（HEAD、master、dev、指针）

    每次提交,Git 都把它们串成一条时间线,这条时间线就是一个分支.截止到目前,只有一条时间线,在 Git 里,这个分支叫主分支,即 master 分支.HEAD 严格来说不是指向提交,而是指向 mas ...

  8. 执行nova-manage db sync时出错，提示’Specified key was too long; max key length is 1000 bytes’

    执行nova-manage db sync时出错: 2012-03-24 14:07:01 CRITICAL nova [-] (OperationalError) (1071, ‘Specified ...

  9. 十步轻松搞定IIS+PHP环境搭建

    突然心血来潮想着自己一直使用Apache+php的模式,想要了解一下IIS+php的模式.说起来也算是九曲十八弯吧! 第一部分:以ISAPI.dll 扩展的形式 结果按照资料上面说的我就是找不到一个i ...

  10. 一步一步学习ASP.NET 5 (一）-基本概念和环境配置

    编者语:时代在变,在csdn开博一年就发了那么的两篇文章.不管是什么原因都认为有愧了.可是今年重心都会在这里发表一些文章,和大家谈谈.NET, 移动跨平台,云计算等热门话题.希望有更好的交流. 好吧言 ...