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. kotlin 安装 使用

    插件下载 下载 kotlin 扩展 . 可以 简写 findviewbyid 这些. 比如 id 是 textview 直接 这样赋值 textview.setText("测试文字" ...

  2. Java 操纵XML之创建XML文件

    Java 操纵XML之创建XML文件 一.JAVA DOM PARSER DOM interfaces The DOM defines several Java interfaces. Here ar ...

  3. 51nod 1584加权约数和

    学到了好多东西啊这题... https://blog.csdn.net/sdfzyhx/article/details/72968468 #include<bits/stdc++.h> u ...

  4. KVM源代码解读：linux-3.17.4\include\uapi\linux\kvm.h

    #ifndef __LINUX_KVM_H #define __LINUX_KVM_H /* * Userspace interface for /dev/kvm - kernel based vir ...

  5. [Java]进程与线程的区别(转)

    线程是指进程内的一个执行单元,也是进程内的可调度实体. 与进程的区别: (1)地址空间:进程内的一个执行单元;进程至少有一个线程;它们共享进程的地址空间;而进程有自己独立的地址空间; (2)资源拥有: ...

  6. activiti流程

    package cn.demo.service.impl; import java.io.File; import java.io.FileInputStream; import java.io.Fi ...

  7. 使用Apache commons-codec Base64实现加解密(转)

    commons-codec是Apache下面的一个加解密开发包 官方地址为:http://commons.apache.org/codec/ 官方下载地址:http://commons.apache. ...

  8. C#调用C++Dll封装时遇到的一系列问题

    最近帮底层开发的同时用C#重新封装一下dll,也就是用C#类来封装C++Dll里的方法,以供用户使用. 之前也用到过类似的应用,大多数问题都出在类型转换上,但是这次的应用层出不穷,所以在这里总结一下, ...

  9. HDU 4733 G(x) (2013成都网络赛，递推)

    G(x) Time Limit: 2000/500 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  10. SimpleUpdater.NET

    本类库+工具用于快速实现一个简单的自动更新程序,旨在快速简单地为现有的.Net应用程序添加上比较简单的自动更新功能. 本页包含以下内容 概述 整个自动升级工作的流程 更新包生成工具 发布更新包 为应用 ...