使用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 相关文章推荐
分享8款纯CSS3实现的搜索框功能
Sep 14 HTML / CSS
纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)
Aug 11 HTML / CSS
HTML5的结构和语义(5):内嵌媒体
Oct 17 HTML / CSS
input元素的url类型和email类型简介
Jul 11 HTML / CSS
html5指南-6.如何创建离线web应用程序实现离线访问
Jan 07 HTML / CSS
HTML5 CSS3打造相册效果附源码下载
Jun 16 HTML / CSS
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
Nov 05 HTML / CSS
canvas绘制视频封面的方法
Feb 05 HTML / CSS
html5开发三八女王节表白神器
Mar 07 HTML / CSS
HTML5 video循环播放多个视频的方法步骤
Aug 06 HTML / CSS
canvas绘制图片drawImage使用方法
Sep 15 HTML / CSS
CSS实现多个元素在盒子内两端对齐效果
Mar 30 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
也谈截取首页新闻 - 范例
2006/10/09 PHP
PHP EOT定界符的使用详解
2008/09/30 PHP
php 中文和编码判断代码
2010/05/16 PHP
几个有用的php字符串过滤,转换函数代码
2012/05/01 PHP
phpmailer发送邮件之后,返回收件人是否阅读了邮件的方法
2014/07/19 PHP
PHP版微信第三方实现一键登录及获取用户信息的方法
2016/10/14 PHP
利用PHP获取汉字首字母并且分组排序详解
2017/10/22 PHP
Jquery 选中表格一列并对表格排序实现原理
2012/12/15 Javascript
script标签属性用type还是language
2015/01/21 Javascript
jQuery+AJAX实现无刷新下拉加载更多
2015/07/03 Javascript
跟我学习javascript的最新标准ES6
2015/11/20 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
2016/10/14 Javascript
js实现悬浮窗效果(支持拖动)
2017/03/09 Javascript
jquery ui sortable拖拽后保存位置
2017/04/27 jQuery
JS+CSS实现滚动数字时钟效果
2017/12/25 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
2018/02/02 jQuery
vue todo-list组件发布到npm上的方法
2018/04/04 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
2018/07/06 Javascript
Express结合Webpack的全栈自动刷新
2019/05/23 Javascript
js实现网页版贪吃蛇游戏
2020/02/22 Javascript
如何构建一个Vue插件并生成npm包
2020/10/26 Javascript
PyQt5多线程防卡死和多窗口用法的实现
2020/09/15 Python
python爬虫scrapy图书分类实例讲解
2020/11/23 Python
html5需遵循的6个设计原则
2016/04/27 HTML / CSS
深入了解canvas在移动端绘制模糊的问题解决
2019/04/30 HTML / CSS
英国最大的体育&时尚零售公司:JD Sports
2017/12/13 全球购物
俄罗斯EPL钻石珠宝店:ЭПЛ
2019/10/22 全球购物
国外软件测试工程师面试题
2016/12/09 面试题
优秀经理获奖感言
2014/03/04 职场文书
行政执法作风整顿剖析材料
2014/10/11 职场文书
计划生育诚信协议书
2014/11/02 职场文书
2015年助残日活动总结
2015/03/27 职场文书
同意离婚答辩状
2015/05/22 职场文书
党员干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
Django项目配置Memcached和Redis, 缓存选择哪个更有优势
2021/04/06 Python
一级电子管军用接收机测评
2022/04/05 无线电