使用css3实现的windows8开机加载动画


Posted in HTML / CSS onDecember 09, 2014

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

使用css3实现的windows8开机加载动画

实现的代码。

html代码:

复制代码
代码如下:

<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>

css3代码:

复制代码
代码如下:

body{
margin: 0;
padding: 0;
background-color: #90da15;
}
.wrapp{
position: absolute;
top: 50%;
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;</p> <p> -moz-perspective: 30px;
-moz-transform: translateX(0px);
-moz-animation: wrapp 400ms 800ms ease-in forwards;</p> <p> -ms-perspective: 30px;
-ms-transform: translateX(0px);
-ms-animation: wrapp 400ms 800ms ease-in forwards;</p> <p> 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;</p> <p> -moz-transform: translateX(0px);
-moz-animation: text 400ms 800ms linear forwards;</p> <p> -ms-transform: translateX(0px);
-ms-animation: text 400ms 800ms linear forwards;</p> <p> 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: 0;
margin: 0;
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;</p> <p> -moz-transform: translateX(0px) rotateY(10deg);
-moz-animation: logo 500ms 300ms ease-out forwards;</p> <p> -ms-transform: translateX(0px) rotateY(10deg);
-ms-animation: logo 500ms 300ms ease-out forwards;</p> <p> transform: translateX(0px) rotateY(10deg);
animation: logo 500ms 300ms ease-out forwards;
}
.logo .top-left{
position: absolute;
top: 0;
left: 0;
width: 44px;
height: 44px;
border-right: solid 2px #90da15;
border-bottom: solid 2px #90da15;
}
.logo .bottom-right{
position: absolute;
bottom: 0;
right: 0;
width: 44px;
height: 44px;
border-left: solid 2px #90da15;
border-top: solid 2px #90da15;
}</p> <p>@-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);
}
}</p> <p>@-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);
}
}

是不是很炫酷呢,小伙伴们自己动手制作一个试试手吧。

HTML / CSS 相关文章推荐
真正了解CSS3背景下的@font face规则
May 04 HTML / CSS
微信小程序实现可实时改变转速的css3旋转动画实例代码
Sep 11 HTML / CSS
css3 按钮样式简单可扩展创建
Mar 18 HTML / CSS
CSS Grid布局教程之什么是网格布局
Dec 30 HTML / CSS
CSS3 Flex 弹性布局实例代码详解
Nov 01 HTML / CSS
如何在网站上添加谷歌定位信息
Apr 16 HTML / CSS
web页面录屏实现
Feb 12 HTML / CSS
Html5新标签解释及用法
Feb 17 HTML / CSS
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
Jan 09 HTML / CSS
浅谈Html5中视频 音频标签 进度条的问题
Jul 26 HTML / CSS
HTML5利用约束验证API来检查表单的输入数据的代码实例
Dec 20 HTML / CSS
HTML5新特性 多线程(Worker SharedWorker)
Apr 24 HTML / CSS
css3的transform中scale缩放详解
Dec 08 #HTML / CSS
css3实例教程 一款纯css3实现的发光屏幕旋转特效
Dec 07 #HTML / CSS
css3的transform造成z-index无效解决方案
Dec 04 #HTML / CSS
一款利用纯css3实现的超炫3D表单的实例教程
Dec 01 #HTML / CSS
一款纯css3实现的漂亮的404页面的实例教程
Nov 27 #HTML / CSS
利用纯css3实现的文字亮光特效的代码演示
Nov 27 #HTML / CSS
一款基于css3的动画按钮代码教程
Nov 23 #HTML / CSS
You might like
PHP __autoload()方法真的影响性能吗?
2012/03/30 PHP
PHP得到mssql的存储过程的输出参数功能实现
2012/11/23 PHP
php中mysql操作buffer用法详解
2015/03/19 PHP
jquery 分页控件实现代码
2009/11/30 Javascript
js使用setTimeout实现定时炸弹的方法
2015/04/10 Javascript
微信支付如何实现内置浏览器的H5页面支付
2015/09/25 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
2016/04/18 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
2016/05/18 Javascript
Javascript删除指定元素节点的方法
2016/06/21 Javascript
AngularJS 入门教程之HTML DOM实例详解
2016/07/28 Javascript
js实现下拉框效果(select)
2017/03/28 Javascript
浅谈vue-router 路由传参的方法
2017/12/27 Javascript
用p5.js制作烟花特效的示例代码
2018/03/21 Javascript
vue 表单之通过v-model绑定单选按钮radio
2019/05/13 Javascript
13 个npm 快速开发技巧(推荐)
2019/07/04 Javascript
Node使用Nodemailer发送邮件的方法实现
2020/02/24 Javascript
原生JavaScript实现幻灯片效果
2021/02/19 Javascript
[02:37]2018DOTA2亚洲邀请赛赛前采访 VP.no[o]ne心中最强SOLO是谁
2018/04/04 DOTA
Django返回json数据用法示例
2016/09/18 Python
Python基于回溯法子集树模板解决马踏棋盘问题示例
2017/09/11 Python
python flask web服务实现更换默认端口和IP的方法
2019/07/26 Python
TensorFLow 变量命名空间实例
2020/02/11 Python
DjangoWeb使用Datatable进行后端分页的实现
2020/05/18 Python
Python下划线5种含义代码实例解析
2020/07/10 Python
移动Web—CSS为Retina屏幕替换更高质量的图片
2012/12/24 HTML / CSS
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
2012/12/13 HTML / CSS
Mankind西班牙男士护肤品网站:购买皮肤护理、护发和剃须
2017/04/27 全球购物
山海经纬软件测试笔试题和面试题
2013/04/02 面试题
师范大学毕业自我鉴定
2013/11/21 职场文书
求职信的要素有哪些呢
2013/12/26 职场文书
如何写你的创业计划书
2014/01/07 职场文书
打架检讨书100字
2014/01/19 职场文书
中学生自我评价范文
2014/02/08 职场文书
让生命充满爱演讲稿
2014/05/10 职场文书
日语专业求职信
2014/07/04 职场文书
基于Python编写一个监控CPU的应用系统
2022/06/25 Python