首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

一款利用纯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.     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. }  

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
CSS3 三维变形实现立体方块特效源码
Dec 15 HTML / CSS
实列教程 一款基于jquery和css3的响应式二级导航菜单
Nov 13 HTML / CSS
css3类选择器之结合元素选择器和多类选择器用法
Mar 09 HTML / CSS
CSS3自定义滚动条样式的示例代码
Aug 21 HTML / CSS
css3 clip实现圆环进度条的示例代码
Feb 07 HTML / CSS
巧用CSS3的calc()宽度计算做响应模式布局的方法
Mar 22 HTML / CSS
HTML5之SVG 2D入门7—SVG元素的重用与引用
Jan 30 HTML / CSS
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
Apr 22 HTML / CSS
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
Nov 05 HTML / CSS
24个canvas基础知识小结
Dec 17 HTML / CSS
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
Dec 03 HTML / CSS
HTML中的表单元素介绍
Feb 28 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
表约束(2) Slave(1) 封装(1) caddy(1) 主从复制(1) variables(1) transaction(1) NginxConfig(1) ESXI(1) Master(1)
You might like
一台收音机，让一家人都笑逐颜开！
2020/08/21 无线电
2019年中国咖啡业现状与发展趋势
2021/03/04 咖啡文化
通过html表格发电子邮件
2006/10/09 PHP
php curl常见错误：SSL错误、bool(false)
2011/12/28 PHP
PHP连接sql server 2005环境配置及问题解决
2014/08/08 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
PHP实现限制域名访问的实现代码(本地验证)
2020/09/13 PHP
javascript下有关dom以及xml节点访问兼容问题
2007/11/26 Javascript
javascript IE中的DOM ready应用技巧
2008/07/23 Javascript
JavaScript 解析读取XML文档 实例代码
2009/07/07 Javascript
jquery autocomplete自动完成插件的的使用方法
2010/08/07 Javascript
使用javascript实现监控视频播放并打印日志
2015/01/05 Javascript
使用canvas实现仿新浪微博头像截取上传功能
2015/09/02 Javascript
js识别uc浏览器的代码
2015/11/06 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
2016/05/12 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
2016/05/26 Javascript
js和jquery中获取非行间样式
2017/05/05 jQuery
基于vue,vue-router, vuex及addRoutes进行权限控制问题
2018/05/02 Javascript
Javascript实现贪吃蛇小游戏（含详细注释）
2020/10/23 Javascript
Antd表格滚动 宽度自适应 不换行的实例
2020/10/27 Javascript
使用python搭建Django应用程序步骤及版本冲突问题解决
2013/11/19 Python
Python模块搜索概念介绍及模块安装方法介绍
2015/06/03 Python
使用Python简单的实现树莓派的WEB控制
2016/02/18 Python
Python做简单的字符串匹配详解
2017/03/21 Python
tensorflow学习笔记之简单的神经网络训练和测试
2018/04/15 Python
基于python实现聊天室程序
2018/07/27 Python
3个用于数据科学的顶级Python库
2018/09/29 Python
python通过TimedRotatingFileHandler按时间切割日志
2019/07/17 Python
keras.layer.input()用法说明
2020/06/16 Python
Python虚拟环境的创建和包下载过程分析
2020/06/19 Python
Python常驻任务实现接收外界参数代码解析
2020/07/21 Python
美国正版电视节目和电影在线观看：Hulu
2018/05/24 全球购物
新西兰便宜隐形眼镜购买网站：QUICKLENS New Zealand
2019/03/02 全球购物
教育孩子心得体会
2014/01/01 职场文书
个人社会实践自我鉴定
2014/03/24 职场文书
2015初中政教处工作总结
2015/07/21 职场文书