首页 网页制作网络编程脚本专栏数据库网站运营网络安全平面设计CMS教程

一款利用纯css3实现的win8加载动画的实例分析

所属分类： 网页制作 / CSS 阅读数： 656
收藏 0 赞 0 分享

　　今天给大家分享一款纯css3实现的win8加载动画。在这款实例中动画效果完全由css3实现。一起看下效果图：

　　实现的代码。

　　html代码：

XML/HTML Code复制内容到剪贴板
  1. <div class="wrapp">  
  2.         <div class="text">  
  3.             <h1>  
  4.                 Windows 8</h1>  
  5.         </div>  
  6.         <div class="logo">  
  7.             <span class="top-left"></span><span class="bottom-right"></span>  
  8.         </div>  
  9.     </div>  

　　css3代码：

CSS Code复制内容到剪贴板
  1. body{   
  2.     margin: 0;   
  3.     padding: 0;   
  4.     background-color: #90da15;   
  5. }   
  6. .wrapp{   
  7.     position: absolute;   
  8.     top: 50%;   
  9.     left: 50%;   
  10.     width: 600px;   
  11.     height: 300px;   
  12.     margin: -150px 0 0 -300px;   
  13.     -webkit-perspective: 30px;   
  14.     -webkit-transform: translateX(0px);   
  15.     -webkit-animation: wrapp 400ms 800ms ease-in forwards;   
  16.   
  17.     -moz-perspective: 30px;   
  18.     -moz-transform: translateX(0px);   
  19.     -moz-animation: wrapp 400ms 800ms ease-in forwards;   
  20.   
  21.     -ms-perspective: 30px;   
  22.     -ms-transform: translateX(0px);   
  23.     -ms-animation: wrapp 400ms 800ms ease-in forwards;   
  24.   
  25.     perspective: 30px;   
  26.     transform: translateX(0px);   
  27.     animation: wrapp 400ms 800ms ease-in forwards;   
  28. }   
  29. .text{   
  30.     position: absolute;   
  31.     top: 50%;   
  32.     left: 50%;   
  33.     width: 0px;   
  34.     height: 60px;   
  35.     margin: -30px 0 0 -160px;   
  36.     overflow: hidden;   
  37.     -webkit-transform: translateX(0px);   
  38.     -webkit-animation: text 400ms 800ms linear forwards;   
  39.   
  40.     -moz-transform: translateX(0px);   
  41.     -moz-animation: text 400ms 800ms linear forwards;   
  42.   
  43.     -ms-transform: translateX(0px);   
  44.     -ms-animation: text 400ms 800ms linear forwards;   
  45.   
  46.     transform: translateX(0px);   
  47.     animation: text 400ms 800ms linear forwards;   
  48. }   
  49. h1{   
  50.     float: rightright;   
  51.     font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;   
  52.     font-weight: normal;   
  53.     color: #fff;   
  54.     padding: 0;   
  55.     margin: 0;   
  56.     width: 320px;   
  57.     height: 60px;   
  58.     font-size: 60px;   
  59.     line-height: 60px;   
  60. }   
  61. .logo{   
  62.     position: absolute;   
  63.     top: 50%;   
  64.     left: 50%;   
  65.     width: 90px;   
  66.     height: 90px;   
  67.     margin: -45px 0 0 -45px;   
  68.     background-color: #fff;   
  69.     -webkit-transform: translateX(0px) rotateY(10deg);   
  70.     -webkit-animation: logo 500ms 300ms ease-out forwards;   
  71.   
  72.     -moz-transform: translateX(0px) rotateY(10deg);   
  73.     -moz-animation: logo 500ms 300ms ease-out forwards;   
  74.   
  75.     -ms-transform: translateX(0px) rotateY(10deg);   
  76.     -ms-animation: logo 500ms 300ms ease-out forwards;   
  77.   
  78.     transform: translateX(0px) rotateY(10deg);   
  79.     animation: logo 500ms 300ms ease-out forwards;   
  80. }   
  81. .logo .top-left{   
  82.     position: absolute;   
  83.     top: 0;   
  84.     left: 0;   
  85.     width: 44px;   
  86.     height: 44px;   
  87.     border-right: solid 2px #90da15;   
  88.     border-bottom: solid 2px #90da15;   
  89. }   
  90. .logo .bottombottom-rightright{   
  91.     position: absolute;   
  92.     bottombottom: 0;   
  93.     rightright: 0;   
  94.     width: 44px;   
  95.     height: 44px;   
  96.     border-left: solid 2px #90da15;   
  97.     border-top: solid 2px #90da15;   
  98. }   
  99.   
  100. @-webkit-keyframes logo {   
  101.     from {   
  102.         -webkit-transform:  translateX(0px) rotateY(10deg);   
  103.     }   
  104.     to {   
  105.         -webkit-transform:  translateX(0px) rotateY(-10deg);   
  106.     }   
  107. }   
  108. @-webkit-keyframes text {   
  109.     from {   
  110.         width: 0px;   
  111.         -webkit-transform: translateX(0px);   
  112.     }   
  113.     60%{   
  114.         width: 0px;   
  115.     }   
  116.     to {   
  117.         width: 320px;   
  118.         -webkit-transform: translateX(240px);   
  119.     }   
  120. }   
  121. @-webkit-keyframes wrapp {   
  122.     from {   
  123.         -webkit-transform: translateX(0px);   
  124.     }   
  125.     to {   
  126.         -webkit-transform: translateX(-200px);   
  127.     }   
  128. }   
  129. @-moz-keyframes logo {   
  130.     from {   
  131.         -moz-transform:  translateX(0px) rotateY(10deg);   
  132.     }   
  133.     to {   
  134.         -moz-transform:  translateX(0px) rotateY(-10deg);   
  135.     }   
  136. }   
  137. @-moz-keyframes text {   
  138.     from {   
  139.         width: 0px;   
  140.         -moz-transform: translateX(0px);   
  141.     }   
  142.     60%{   
  143.         width: 0px;   
  144.     }   
  145.     to {   
  146.         width: 320px;   
  147.         -moz-transform: translateX(240px);   
  148.     }   
  149. }   
  150. @-moz-keyframes wrapp {   
  151.     from {   
  152.         -moz-transform: translateX(0px);   
  153.     }   
  154.     to {   
  155.         -moz-transform: translateX(-200px);   
  156.     }   
  157. }   
  158.   
  159. @-ms-keyframes logo {   
  160.     from {   
  161.         -ms-transform:  translateX(0px) rotateY(10deg);   
  162.     }   
  163.     to {   
  164.         -ms-transform:  translateX(0px) rotateY(-10deg);   
  165.     }   
  166. }   
  167. @-ms-keyframes text {   
  168.     from {   
  169.         width: 0px;   
  170.         -ms-transform: translateX(0px);   
  171.     }   
  172.     60%{   
  173.         width: 0px;   
  174.     }   
  175.     to {   
  176.         width: 320px;   
  177.         -ms-transform: translateX(240px);   
  178.     }   
  179. }   
  180. @-ms-keyframes wrapp {   
  181.     from {   
  182.         -ms-transform: translateX(0px);   
  183.     }   
  184.     to {   
  185.         -ms-transform: translateX(-200px);   
  186.     }   
  187. }   
  188. @keyframes logo {   
  189.     from {   
  190.         transform:  translateX(0px) rotateY(10deg);   
  191.     }   
  192.     to {   
  193.         transform:  translateX(0px) rotateY(-10deg);   
  194.     }   
  195. }   
  196. @keyframes text {   
  197.     from {   
  198.         width: 0px;   
  199.         transform: translateX(0px);   
  200.     }   
  201.     60%{   
  202.         width: 0px;   
  203.     }   
  204.     to {   
  205.         width: 320px;   
  206.         transform: translateX(240px);   
  207.     }   
  208. }   
  209. @keyframes wrapp {   
  210.     from {   
  211.         transform: translateX(0px);   
  212.     }   
  213.     to {   
  214.         transform: translateX(-200px);   
  215.     }   
  216. }  
更多精彩内容其他人还在看

Opera中国的WEB标准课程

网页制作Webjx文章简介：在这篇文章里，我要向大家介绍我和其他很多人花费数月时间开发的一个课程——Web标准课程，该课程旨在向大家提供Web设计和开发的坚实基础，无论读者是谁，此教程完全免费、可访问，并且不需要预备知识。当然，我主要还
收藏 0 赞 0 分享

CSS样式表渐进增强的基本概念

网页制作Webjx文章简介：如果你挠着头想弄清楚优雅降级和渐进增强的区别，我告诉你，这是视角问题。优雅降级和渐进增强都考虑网站在各种设备的各种浏览器上如何良好运转。两者区别的关键在于它们各自关注的焦点，以及这种关注对工作流程的影响
收藏 0 赞 0 分享

简单介绍Web Developer插件制作网页

网页制作Webjx文章简介：Firefox浏览器是一个良好支持W3C标准的开放源代码的浏览器，拥有Linux/Windows/Mac版本。因为Firefox浏览器良好支持W3C标准，所以使用Firefox来调试网页是非常好的。 Firefox浏览器是
收藏 0 赞 0 分享

CSS布局带来的巨大影响:CSS display属性值

网页制作Webjx文章简介：网页元素应用上那些与表格相关的display属性值后，能够模仿出与表格相同的特性。我将会在该文中给大家演示这种方法给CSS布局带来的巨大影响。 应原书编辑要求，先在文章顶部给出链接：《Everything You
收藏 0 赞 0 分享

用div css模拟表格对角线

这只是探讨一种CSS模拟表格对角线的用法，实际在工作中可能觉得这样做有点小题大作，这不是本主题讨论的重点。如果对此深以为然的朋友，请一笑过之 首先声明： 这只是探讨一种CSS模拟表格对角线的
收藏 0 赞 0 分享

IE Firefox在css中的差别 (部分)

1、单位问题 问题：任何距离的数值ie可以不加单位，ff必须要求写单位（0除外） 解决：写全单位如padding:0px; 2、水平居中 问题：div里的内容，ie默认为center，而ff默认left 解决：mairgin:0px auto; 3、高度问题
收藏 0 赞 0 分享

不用js可以实现信息提示效果

[code] <style> body { font:verdena; font-size:14px; color:#000 } h1{ font:verdena; font-size:22px; color:#000 } h2{ font:verdena;
收藏 0 赞 0 分享

CSS解决未知高度的垂直水平居中自适应问题

今天有人问起，晚上试着写出来，供参考； 以下代码兼容主流浏览器IE6、IE7、Firefox、Opera。 从最简单的开始………… 一、如何让一个DIV水平居中？ 这个简单不作过多说明！ [code] <st
收藏 0 赞 0 分享

CSS cursor 属性 -- 鼠标指针样式效果

取值: [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize |
收藏 0 赞 0 分享

css 简单区别ie6,ie7,firefox的写法

同一样式里可以这样 [code] margin:17px; FF +margin:17px; IE6 IE7 _margin:17px; IE6 [/code] 按这个顺序，刚好区分开三个浏览器
收藏 0 赞 0 分享
查看更多

网络赚钱

更多

站长故事

更多
建站极客
合作伙伴
在线工具
建站极客移动版
聚合全网技术文章，根据你的阅读喜好进行个性推荐
© 2012 - 2020 www.zhanzhang360.cn Some Rights Reserved.
沪ICP备13040166号-22