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


Posted in HTML / CSS onDecember 11, 2014

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

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

实现的代码。

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.     positionabsolute;   
  8.     top: 50%;   
  9.     left: 50%;   
  10.     width600px;   
  11.     height300px;   
  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.     positionabsolute;   
  31.     top: 50%;   
  32.     left: 50%;   
  33.     width0px;   
  34.     height60px;   
  35.     margin: -30px 0 0 -160px;   
  36.     overflowhidden;   
  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.     floatrightright;   
  51.     font-family"Segoe UI", Frutiger, "Frutiger Linotype""Dejavu Sans""Helvetica Neue"Arialsans-serif;   
  52.     font-weightnormal;   
  53.     color#fff;   
  54.     padding: 0;   
  55.     margin: 0;   
  56.     width320px;   
  57.     height60px;   
  58.     font-size60px;   
  59.     line-height60px;   
  60. }   
  61. .logo{   
  62.     positionabsolute;   
  63.     top: 50%;   
  64.     left: 50%;   
  65.     width90px;   
  66.     height90px;   
  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.     positionabsolute;   
  83.     top: 0;   
  84.     left: 0;   
  85.     width44px;   
  86.     height44px;   
  87.     border-rightsolid 2px #90da15;   
  88.     border-bottomsolid 2px #90da15;   
  89. }   
  90. .logo .bottombottom-rightright{   
  91.     positionabsolute;   
  92.     bottombottom: 0;   
  93.     rightright: 0;   
  94.     width44px;   
  95.     height44px;   
  96.     border-leftsolid 2px #90da15;   
  97.     border-topsolid 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.         width0px;   
  111.         -webkit-transform: translateX(0px);   
  112.     }   
  113.     60%{   
  114.         width0px;   
  115.     }   
  116.     to {   
  117.         width320px;   
  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.         width0px;   
  140.         -moz-transform: translateX(0px);   
  141.     }   
  142.     60%{   
  143.         width0px;   
  144.     }   
  145.     to {   
  146.         width320px;   
  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.         width0px;   
  170.         -ms-transform: translateX(0px);   
  171.     }   
  172.     60%{   
  173.         width0px;   
  174.     }   
  175.     to {   
  176.         width320px;   
  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.         width0px;   
  199.         transform: translateX(0px);   
  200.     }   
  201.     60%{   
  202.         width0px;   
  203.     }   
  204.     to {   
  205.         width320px;   
  206.         transform: translateX(240px);   
  207.     }   
  208. }   
  209. @keyframes wrapp {   
  210.     from {   
  211.         transform: translateX(0px);   
  212.     }   
  213.     to {   
  214.         transform: translateX(-200px);   
  215.     }   
  216. }  
HTML / CSS 相关文章推荐
支持IE8的纯css3开发的响应式设计动画菜单教程
Nov 05 HTML / CSS
css3动画 小球滚动 js控制动画暂停
Nov 29 HTML / CSS
CSS3实现文字描边的2种方法(小结)
Feb 14 HTML / CSS
Bootstrap 学习分享
Nov 12 HTML / CSS
html5 利用canvas实现超级玛丽简单动画
Sep 06 HTML / CSS
深入解析HTML5使用SVG图像时的viewBox属性用法
Sep 02 HTML / CSS
HTML5中的websocket实现直播功能
May 21 HTML / CSS
浅谈移动端网页图片预加载方案
Nov 05 HTML / CSS
如何在Canvas中添加事件的方法示例
May 21 HTML / CSS
HTML5 图片预加载的示例代码
Mar 25 HTML / CSS
Html5之webcoekt播放JPEG图片流
Sep 22 HTML / CSS
html+css合并表格边框的示例代码
Mar 31 HTML / CSS
一款纯css3实现的tab选项卡的实列教程
Dec 11 #HTML / CSS
纯css3实现的竖形无限级导航
Dec 10 #HTML / CSS
CSS3动画效果回调处理详解
Dec 10 #HTML / CSS
CSS3属性background-size使用指南
Dec 09 #HTML / CSS
CSS3属性box-shadow使用指南
Dec 09 #HTML / CSS
CSS3属性box-sizing使用指南
Dec 09 #HTML / CSS
使用css3实现的tab选项卡代码分享
Dec 09 #HTML / CSS
You might like
PHP保存带BOM文件的方法
2015/02/12 PHP
大家须知简单的php性能优化注意点
2016/01/04 PHP
JS 有名函数表达式全面解析
2010/03/19 Javascript
Javascript学习笔记一 之 数据类型
2010/12/15 Javascript
使用JS CSS去除IE链接虚线框的三种方法
2013/11/14 Javascript
DIV始终居中的js代码
2014/02/17 Javascript
js实现鼠标滑过文字链接色彩变化的效果
2015/05/06 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
2016/06/06 Javascript
简易的JS计算器实现代码
2016/10/18 Javascript
BootStrap3使用错误记录及解决办法
2016/12/22 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
2017/02/21 Javascript
CodeMirror js代码加亮使用总结
2017/03/25 Javascript
layui获取选中行数据的实例讲解
2018/08/19 Javascript
对angularJs中ng-style动态改变样式的实例讲解
2018/09/30 Javascript
聊聊鉴权那些事(推荐)
2019/08/22 Javascript
vue-drawer-layout实现手势滑出菜单栏
2020/11/19 Vue.js
[01:11:28]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第一场 1月8日
2021/03/11 DOTA
python使用心得之获得github代码库列表
2014/06/25 Python
Python中列表和元组的相关语句和方法讲解
2015/08/20 Python
python http接口自动化脚本详解
2018/01/02 Python
Python2实现的图片文本识别功能详解
2018/07/11 Python
python 实现绘制整齐的表格
2019/11/18 Python
python3实现用turtle模块画一棵随机樱花树
2019/11/21 Python
opencv python图像梯度实例详解
2020/02/04 Python
Python字典深浅拷贝与循环方式方法详解
2020/02/09 Python
python GUI库图形界面开发之pyinstaller打包python程序为exe安装文件
2020/02/26 Python
基于python实现可视化生成二维码工具
2020/07/08 Python
美国在线健康和美容市场:Pharmapacks
2018/12/05 全球购物
Linux管理员面试经常问道的相关命令
2013/04/29 面试题
荷叶圆圆教学反思
2014/02/01 职场文书
专家推荐信范文
2015/03/26 职场文书
停电通知范文
2015/04/16 职场文书
机关干部纪律作风整顿心得体会
2016/01/23 职场文书
基于Python绘制子图及子图刻度的变换等的问题
2021/05/23 Python
Python面向对象之成员相关知识总结
2021/06/24 Python
Java字符串逆序方法详情
2022/03/21 Java/Android