Windows 8

 
 
完整效果如上图;这个里面可能是css冲突,喜欢的可以自己去体征一下;
 
css特效代码:

<style type="text/css">
.hnyei{margin: 0 auto; width:600px; height:400px; background-color: #90da15; }
.wrapp{position: absolute; top: 25%; left: 50%; width: 600px; height: 300px; margin: -150px 0 0 -300px;
-webkit-perspective: 30px;
-webkit-transform: translateX(0px);
-webkit-animation: wrapp 400ms 800ms ease-in forwards;
-moz-perspective: 30px;
-moz-transform: translateX(0px);
-moz-animation: wrapp 400ms 800ms ease-in forwards;
-ms-perspective: 30px;
-ms-transform: translateX(0px);
-ms-animation: wrapp 400ms 800ms ease-in forwards;
perspective: 30px;
transform: translateX(0px);
animation: wrapp 400ms 800ms ease-in forwards;
}
.text{
position: absolute;top: 50%;left: 50%;width: 0px;height: 60px; margin: -30px 0 0 -160px;overflow: hidden;
-webkit-transform: translateX(0px);
-webkit-animation: text 400ms 800ms linear forwards;
-moz-transform: translateX(0px);
-moz-animation: text 400ms 800ms linear forwards;
-ms-transform: translateX(0px);
-ms-animation: text 400ms 800ms linear forwards;
transform: translateX(0px);
animation: text 400ms 800ms linear forwards;
}
h1{float: right;font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
font-weight: normal;color: #fff;padding:;margin:;width: 320px;height: 60px;font-size: 60px;line-height: 60px;
}
.logo{position: absolute; top: 50%; left: 50%; width: 90px; height: 90px; margin: -45px 0 0 -45px;
background-color: #fff;
-webkit-transform: translateX(0px) rotateY(10deg);
-webkit-animation: logo 500ms 300ms ease-out forwards;
-moz-transform: translateX(0px) rotateY(10deg);
-moz-animation: logo 500ms 300ms ease-out forwards;
-ms-transform: translateX(0px) rotateY(10deg);
-ms-animation: logo 500ms 300ms ease-out forwards;
transform: translateX(0px) rotateY(10deg);
animation: logo 500ms 300ms ease-out forwards;
}
.logo .top-left{position: absolute;top:;left:;width: 44px;height: 44px;border-right: solid 2px #90da15;border-bottom: solid 2px #90da15;}
.logo .bottom-right{position: absolute; bottom:; right:; width: 44px; height: 44px; border-left: solid 2px #90da15; border-top: solid 2px #90da15;}
@-webkit-keyframes logo {
from {-webkit-transform: translateX(0px) rotateY(10deg);}
to {-webkit-transform: translateX(0px) rotateY(-10deg);}
}
@-webkit-keyframes text {
from {width: 0px;-webkit-transform: translateX(0px);}
60%{width: 0px;}
to {width: 320px;-webkit-transform: translateX(240px);}
}
@-webkit-keyframes wrapp {
from {-webkit-transform: translateX(0px);}
to {-webkit-transform: translateX(-200px);}
}
@-moz-keyframes logo {
from {-moz-transform: translateX(0px) rotateY(10deg);}
to {-moz-transform: translateX(0px) rotateY(-10deg);}
}
@-moz-keyframes text {
from {width: 0px;-moz-transform: translateX(0px);}
60%{width: 0px;}
to {width: 320px;-moz-transform: translateX(240px);}
}
@-moz-keyframes wrapp {
from {-moz-transform: translateX(0px);}
to {-moz-transform: translateX(-200px);}
} @-ms-keyframes logo {
from {-ms-transform: translateX(0px) rotateY(10deg);}
to {-ms-transform: translateX(0px) rotateY(-10deg);}
}
@-ms-keyframes text {
from {width: 0px;-ms-transform: translateX(0px);}
60%{width: 0px;}
to {width: 320px;-ms-transform: translateX(240px);}
}
@-ms-keyframes wrapp {
from {-ms-transform: translateX(0px);}
to {-ms-transform: translateX(-200px);}
}
@keyframes logo {
from {transform: translateX(0px) rotateY(10deg);}
to {transform: translateX(0px) rotateY(-10deg);}
}
@keyframes text {
from {width: 0px;transform: translateX(0px);}
60%{width: 0px;}
to {width: 320px;transform: translateX(240px);}
}
@keyframes wrapp {
from {transform: translateX(0px);}
to {transform: translateX(-200px);}
}
</style>

Html 部分:

<div class="hnyei">
<div class="wrapp">
<div class="text">
<h1>Windows 8</h1>
</div>
<div class="logo">
<span class="top-left"></span>
<span class="bottom-right"></span>
</div>
</div>
</div>

css3动画特效:纯css3制作win8加载动画特效的更多相关文章

  1. 纯css3实现的win8加载动画

    今天给大家分享一款纯css3实现的win8加载动画.在这款实例中动画效果完全由css3实现.一起看下效果图: 在线预览   源码下载 实现的代码. html代码: <div class=&quo ...

  2. 用css3制作旋转加载动画的几种方法

    以WebKit为核心的浏览器,例如Safari和Chrome,对html5有着很好的支持,在移动平台中这两个浏览器对应的就是IOS和Android.最近在开发一个移动平台的web app,那么就有机会 ...

  3. [前端随笔][CSS] 制作一个加载动画 即帖即用

    说在前面 描述 [加载中loading...] 的动画图片往往使用GIF来实现,但GIF消耗资源较大,所以使用CSS直接制作更优. 效果传送门1 效果传送门2 关键代码 @keyframes 规则 用 ...

  4. 使用 CSS3 实现超炫的 Loading(加载)动画效果

    SpinKit 是一套网页动画效果,包含8种基于 CSS3 实现的很炫的加载动画.借助 CSS3 Animation 的强大功能来创建平滑,易于定制的动画.SpinKit 的目标不是提供一个每个浏览器 ...

  5. 基于jQuery点击加载动画按钮特效

    分享一款基于jQuery点击加载动画按钮特效.这是一款基于jQuery+CSS3实现的鼠标点击按钮加载动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  6. [Swift通天遁地]一、超级工具-(11)使用EZLoadingActivity制作Loading加载等待动画

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  7. 源码分享-纯CSS3实现齿轮加载动画

    纯CSS3实现齿轮加载动画是一款可以用来做Loading动画的CSS3特效代码. 有兴趣的朋友可以下载下来试试:http://www.huiyi8.com/sc/8398.html

  8. 16款纯CSS3实现的loading加载动画

    分享16款纯CSS3实现的loading加载动画.这是一款实用的可替代GIF格式图片的CSS3加载动画代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div clas ...

  9. 纯css3加载动画

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name= ...

随机推荐

  1. 低版本的无法打开高版本的VM

    低版本VM工具運行高版本VM環境時,會彈出不支持虚拟机配置.例如:使用VM8工具打開VM9配置的VM環境,會彈出下面的提示 在遇到這種情況的時候,一般都會選擇升級VM工具.如果不想升級VM工具,可以通 ...

  2. Visual studio 非常好的插件

    1. Productive power tools2015 2. Visual studio spell checker

  3. php总体架构图

  4. Android 6.0 新功能及主要 API 变更

    运行时权限 这个版本中引入了新的权限模型,现在用户可以在运行时直接管理应用程序的权限.这个模型基于用户对权限控制的更多可见性,同时为应用程序的开发者提供更流畅的应用安装和自动升级.用户可以为已安装的每 ...

  5. linux httpd 服务的安装

    1.查看是否安装了httpd rpm -qa|grep httpd 2.安装httpd 使用yum 安装 yum -y install httpd 3.关闭防火墙和selinxu 4.使用fz软件或者 ...

  6. PHP header函数使用教程

    在php语言中,header()这个函数很有用的,尤其在用到ajax时候,他会帮你解决一些意想不到的问题.下面是header的一些详细讲解.希望对phper有帮助 代码如下: <?php// f ...

  7. Hibernate关联关系配置(一对多、一对一和多对多)

    第一种关联关系:一对多(多对一) "一对多"是最普遍的映射关系,简单来讲就如消费者与订单的关系. 一对多:从消费者角的度来说一个消费者可以有多个订单,即为一对多. 多对一:从订单的 ...

  8. PHP接口使用

    <?php interface IEmployee { function working(); } interface IDeveloper { function Coding(); } cla ...

  9. 在sqlServer中把数据导出为insert脚本

    有时候为了把数据导出为insert脚本,不得不用一些小工具,或者通过自己写存储过程来完成这一操作.其实SqlServer本身就有这种功能.以下是详细步骤:

  10. [stm32][ucos] 1、基于ucos操作系统的LED闪烁、串口通信简单例程

    * 内容简述: 本例程操作系统采用ucos2.86a版本, 建立了5个任务            任务名                                             优先级 ...