纯CSS打造的安卓系统开机画面动画特效代

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>纯CSS打造的安卓系统开机画面动画特效代码</title>

<style>

.android{

position:relative;

width:200px;

height:290px;

margin:80px auto;

background: #A5C63B;

border-radius:200px 200px 50px 50px;

transition: all .25s ease-out;

-webkit-transition: all .25s ease-out;

-moz-transition: all .25s ease-out;

-o-transition: all .25s ease-out;

-ms-transition: all .25s ease-out;

}

.android:hover{

filter: blur(3px);

-webkit-filter: blur(3px);

-moz-filter: blur(3px);

-o-filter: blur(3px);

-ms-filter: blur(3px);

transform: scale(1.2) rotate(3deg);

-webkit-transform: scale(1.2) rotate(3deg);

-moz-transform: scale(1.2) rotate(3deg);

-o-transform: scale(1.2) rotate(3deg);

-ms-transform: scale(1.2) rotate(3deg);

}

.android:after{

content:‘‘;

position:absolute;

display:block;

width:200px;

height:8px;

top:95px;

background: #fff;

}

.android .eye:after,

.android .eye:before{

content:‘‘;

position:absolute;

display:block;

width:18px;

height:18px;

top:35px;

left:50px;

background: #fff;

border-radius:15px;

}

.android .eye:after{

left:auto;

right:50px;

animation:animated-robot-eye-right 5s ease 1s infinite alternate;

-webkit-animation:animated-robot-eye-right 5s ease 1s infinite alternate;

-moz-animation:animated-robot-eye-right 5s ease 1s infinite alternate;

-o-animation:animated-robot-eye-right 5s ease 1s infinite alternate;

-ms-animation:animated-robot-eye-right 5s ease 1s infinite alternate;

}

.android .eye:before{

animation:animated-robot-eye-right 5s ease 1s infinite alternate;

-webkit-animation:animated-robot-eye-right 5s ease 1s infinite alternate;

-moz-animation:animated-robot-eye-right 5s ease 1s infinite alternate;

-o-animation:animated-robot-eye-right 5s ease 1s infinite alternate;

-ms-animation:animated-robot-eye-right 5s ease 1s infinite alternate;

}

@keyframes animated-robot-eye-right

{

0%      {}

25%  {transform: translate(-102px,0px);}

50%     {}

100%    {}

}

@-webkit-keyframes animated-robot-eye-right

{

0%      {}

25%  {-webkit-transform: translate(-102px,0px);}

50%     {}

100%    {}

}

@-moz-keyframes animated-robot-eye-right

{

0%      {}

25%  {-moz-transform: translate(-102px,0px);}

50%     {}

100%    {}

}

@-o-keyframes animated-robot-eye-right

{

0%      {}

25%  {-o-transform: translate(-102px,0px);}

50%     {}

100%    {}

}

@-ms-keyframes animated-robot-eye-right

{

0%      {}

25%  {-ms-transform: translate(-102px,0px);}

50%     {}

100%    {}

}

@keyframes animated-robot-eye-left

{

0%      {}

25%  {transform: translate(-82px,0px);}

50%     {}

100%    {}

}

@-webkit-keyframes animated-robot-eye-left

{

0%      {}

25%  {-webkit-transform: translate(-82px,0px);}

50%     {}

100%    {}

}

@-moz-keyframes animated-robot-eye-left

{

0%      {}

25%  {-moz-transform: translate(-82px,0px);}

50%     {}

100%    {}

}

@-o-keyframes animated-robot-eye-left

{

0%      {}

25%  {-o-transform: translate(-82px,0px);}

50%     {}

100%    {}

}

@-ms-keyframes animated-robot-eye-left

{

0%      {}

25%  {-ms-transform: translate(-82px,0px);}

50%     {}

100%    {}

}

.android:hover .eye:after,

.android:hover .eye:before{

height:3px;

top:43px;

}

.android .ear:after,

.android .ear:before{

content:‘‘;

position:absolute;

display:block;

width:6px;

height:40px;

top:-25px;

left:50px;

background: #A5C63B;

border-radius:5px;

transform:rotate(-25deg);

-webkit-transform:rotate(-25deg);

-moz-transform:rotate(-25deg);

-o-transform:rotate(-25deg);

-ms-transform:rotate(-25deg);

}

.android .ear:after{

left:auto;

right:50px;

transform:rotate(25deg);

-webkit-transform:rotate(25deg);

-moz-transform:rotate(25deg);

-o-transform:rotate(25deg);

-ms-transform:rotate(25deg);

}

.android .ear:before{

animation:animated-robot-ear-right 5s ease 1s infinite alternate;

-webkit-animation:animated-robot-ear-right 5s ease 1s infinite alternate;

-moz-animation:animated-robot-ear-right 5s ease 1s infinite alternate;

-o-animation:animated-robot-ear-right 5s ease 1s infinite alternate;

-ms-animation:animated-robot-ear-right 5s ease 1s infinite alternate;

}

@keyframes animated-robot-ear-right

{

0%      {}

25%  {transform:translate(90px,6px) rotate(25deg);}

50%     {}

100%    {}

}

@-webkit-keyframes animated-robot-ear-right

{

0%      {}

25%  {-webkit-transform:translate(90px,6px) rotate(25deg);}

50%     {}

100%    {}

}

@-moz-keyframes animated-robot-ear-right

{

0%      {}

25%  {-moz-transform:translate(90px,6px) rotate(25deg);}

50%     {}

100%    {}

}

@-o-keyframes animated-robot-ear-right

{

0%      {}

25%  {-o-transform:translate(90px,6px) rotate(25deg);}

50%     {}

100%    {}

}

@-ms-keyframes animated-robot-ear-right

{

0%      {}

25%  {-ms-transform:translate(90px,6px) rotate(25deg);}

50%     {}

100%    {}

}

@keyframes animated-robot-ear-left

{

0%      {transform: translate(-42px,0px);}

25%  {}

50%     {}

100%    {}

}

@-webkit-keyframes animated-robot-ear-left

{

0%      {-webkit-transform: translate(-42px,0px);}

25%  {}

50%     {}

100%    {}

}

@-moz-keyframes animated-robot-ear-left

{

0%      {-moz-transform: translate(-42px,0px);}

25%  {}

50%     {}

100%    {}

}

@-o-keyframes animated-robot-ear-left

{

0%      {-o-transform: translate(-42px,0px);}

25%  {}

50%     {}

100%    {}

}

@-ms-keyframes animated-robot-ear-left

{

0%      {-ms-transform: translate(-42px,0px);}

25%  {}

50%     {}

100%    {}

}

.android .hand:after,

.android .hand:before{

content:‘‘;

position:absolute;

display:block;

width:44px;

height:150px;

top:96px;

left:-52px;

background: #A5C63B;

border-radius:44px;

}

.android .hand:after{

left:auto;

right:-52px;

}

.android .hand:after

{

transform-origin:0 0;

-webkit-transform-origin:0 0;

-moz-transform-origin:0 0;

-o-transform-origin:0 0;

-ms-transform-origin:0 0;

animation:animated-robot-hand-right 5s ease 1s infinite alternate;

-webkit-animation:animated-robot-hand-right 5s ease 1s infinite alternate;

-moz-animation:animated-robot-hand-right 5s ease 1s infinite alternate;

-o-animation:animated-robot-hand-right 5s ease 1s infinite alternate;

-ms-animation:animated-robot-hand-right 5s ease 1s infinite alternate;

}

.android .hand:before

{

transform-origin:44px 0;

-webkit-transform-origin:44px 0;

-moz-transform-origin:44px 0;

-o-transform-origin:44px 0;

-ms-transform-origin:44px 0;

animation:animated-robot-hand-left 5s ease 1s infinite alternate;

-webkit-animation:animated-robot-hand-left 5s ease 1s infinite alternate;

-moz-animation:animated-robot-hand-left 5s ease 1s infinite alternate;

-o-animation:animated-robot-hand-left 5s ease 1s infinite alternate;

-ms-animation:animated-robot-hand-left 5s ease 1s infinite alternate;

}

@keyframes animated-robot-hand-right

{

0%      {transform: translate(-52px,0px);}

25%  {transform: rotate(0deg);}

50%     {transform: rotate(-180deg);}

100%    {transform: translate(-10px,120px) rotate(-180deg);}

}

@-webkit-keyframes animated-robot-hand-right

{

0%      {-webkit-transform: translate(-52px,0px);}

25%  {-webkit-transform: rotate(0deg);}

50%     {-webkit-transform: rotate(-180deg);}

100%    {-webkit-transform: translate(-10px,120px) rotate(-180deg);}

}

@-moz-keyframes animated-robot-hand-right

{

0%      {-moz-transform: translate(-52px,0px);}

25%  {-moz-transform: rotate(0deg);}

50%     {-moz-transform: rotate(-180deg);}

100%    {-moz-transform: translate(-10px,120px) rotate(-180deg);}

}

@-o-keyframes animated-robot-hand-right

{

0%      {-o-transform: translate(-52px,0px);}

25%  {-o-transform: rotate(0deg);}

50%     {-o-transform: rotate(-180deg);}

100%    {-o-transform: translate(-10px,120px) rotate(-180deg);}

}

@-ms-keyframes animated-robot-hand-right

{

0%      {-ms-transform: translate(-52px,0px);}

25%  {-ms-transform: rotate(0deg);}

50%     {-ms-transform: rotate(180deg);}

100%    {-ms-transform: translate(-10px,120px) rotate(180deg);}

}

@keyframes animated-robot-hand-left

{

0%      {transform: translate(52px,0px);}

25%  {transform: rotate(0deg);}

50%     {transform: rotate(180deg);}

100%    {transform: translate(10px,120px) rotate(180deg);}

}

@-webkit-keyframes animated-robot-hand-left

{

0%      {-webkit-transform: translate(52px,0px);}

25%  {-webkit-transform: rotate(0deg);}

50%     {-webkit-transform: rotate(180deg);}

100%    {-webkit-transform: translate(10px,120px) rotate(180deg);}

}

@-moz-keyframes animated-robot-hand-left

{

0%      {-moz-transform: translate(52px,0px);}

25%  {-moz-transform: rotate(0deg);}

50%     {-moz-transform: rotate(180deg);}

100%    {-moz-transform: translate(10px,120px) rotate(180deg);}

}

@-o-keyframes animated-robot-hand-left

{

0%      {-o-transform: translate(52px,0px);}

25%  {-o-transform: rotate(0deg);}

50%     {-o-transform: rotate(180deg);}

100%    {-o-transform: translate(10px,120px) rotate(180deg);}

}

@-ms-keyframes animated-robot-hand-left

{

0%      {-ms-transform: translate(52px,0px);}

25%  {-ms-transform: rotate(0deg);}

50%     {-ms-transform: rotate(-180deg);}

100%    {-ms-transform: translate(10px,120px) rotate(-180deg);}

}

.android .foot:after,

.android .foot:before{

content:‘‘;

position:absolute;

display:block;

width:44px;

height:110px;

bottom:-90px;

left:40px;

background: #A5C63B;

border-radius:44px;

}

.android .foot:after

{

transform-origin:0 0;

-webkit-transform-origin:0 0;

-moz-transform-origin:0 0;

-o-transform-origin:0 0;

-ms-transform-origin:0 0;

animation:animated-robot-foot-right 5s ease 1s infinite alternate;

-webkit-animation:animated-robot-foot-right 5s ease 1s infinite alternate;

-moz-animation:animated-robot-foot-right 5s ease 1s infinite alternate;

-o-animation:animated-robot-foot-right 5s ease 1s infinite alternate;

-ms-animation:animated-robot-foot-right 5s ease 1s infinite alternate;

}

.android .foot:before

{

transform-origin:44px 0;

-webkit-transform-origin:44px 0;

-moz-transform-origin:44px 0;

-o-transform-origin:44px 0;

-ms-transform-origin:44px 0;

animation:animated-robot-foot-left 5s ease 1s infinite alternate;

-webkit-animation:animated-robot-foot-left 5s ease 1s infinite alternate;

-moz-animation:animated-robot-foot-left 5s ease 1s infinite alternate;

-o-animation:animated-robot-foot-left 5s ease 1s infinite alternate;

-ms-animation:animated-robot-foot-left 5s ease 1s infinite alternate;

}

@keyframes animated-robot-foot-right

{

0%  {transform: rotate(0deg);}

25%  {transform: rotate(0deg);bottom:-120px;}

50%     {transform: rotate(-90deg);}

100% {transform: translate(-50px,-120px);}

}

@-webkit-keyframes animated-robot-foot-right

{

0%  {-webkit-transform: rotate(0deg);}

25%  {-webkit-transform: rotate(0deg);bottom:-120px;}

50%     {-webkit-transform: rotate(-90deg);}

100% {-webkit-transform: translate(-50px,-120px);}

}

@-moz-keyframes animated-robot-foot-right

{

0%  {-moz-transform: rotate(0deg);}

25%  {-moz-transform: rotate(0deg);bottom:-120px;}

50%     {-moz-transform: rotate(-90deg);}

100% {-moz-transform: translate(-50px,-120px);}

}

@-o-keyframes animated-robot-foot-right

{

0%  {-o-transform: rotate(0deg);}

25%  {-o-transform: rotate(0deg);bottom:-120px;}

50%     {-o-transform: rotate(-90deg);}

100% {-o-transform: translate(-50px,-120px);}

}

@-ms-keyframes animated-robot-foot-right

{

0%  {-ms-transform: rotate(0deg);}

25%  {-ms-transform: rotate(0deg);bottom:-120px;}

50%     {-ms-transform: rotate(-90deg);}

100% {-ms-transform: translate(-50px,-120px);}

}

@keyframes animated-robot-foot-left

{

0%  {transform: rotate(0deg);}

25%  {transform: rotate(0deg);bottom:-120px;}

50%     {transform: rotate(90deg);}

100% {transform: translate(50px,-120px);}

}

@-webkit-keyframes animated-robot-foot-left

{

0%  {-webkit-transform: rotate(0deg);}

25%  {-webkit-transform: rotate(0deg);bottom:-120px;}

50%     {-webkit-transform: rotate(90deg);}

100% {-webkit-transform: translate(50px,-120px);}

}

@-o-keyframes animated-robot-foot-left

{

0%  {-o-transform: rotate(0deg);}

25%  {-o-transform: rotate(0deg);bottom:-120px;}

50%     {-o-transform: rotate(90deg);}

100% {-o-transform: translate(50px,-120px);}

}

@-moz-keyframes animated-robot-foot-left

{

0%  {-moz-transform: rotate(0deg);}

25%  {-moz-transform: rotate(0deg);bottom:-120px;}

50%     {-moz-transform: rotate(90deg);}

100% {-moz-transform: translate(50px,-120px);}

}

@-ms-keyframes animated-robot-foot-left

{

0%  {-ms-transform: rotate(0deg);}

25%  {-ms-transform: rotate(0deg);bottom:-120px;}

50%     {-ms-transform: rotate(90deg);}

100% {-ms-transform: translate(50px,-120px);}

}

.android .foot:after{

left:auto;

right:40px;

}

</style>

</head>

<body>

<div class="android">

<div class="eye"></div>

<div class="ear"></div>

<div class="hand"></div>

<div class="foot"></div>

</div>

<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>

</body>

</html>

时间： 2024-10-12 22:34:52

纯CSS打造的安卓系统开机画面动画特效代的相关文章

HTML5 CSS3专题 纯CSS打造相册效果

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/30993277 今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候下载的了,也好久没上w3cfuns了,怀念学习前台的日子,给大家分享下. 效果图: 效果是不是还是很不错的,最主要的是没有使用一行js,这才是亮点. 先看html文件: <body> <div id="gallery"> <h1>纯CSS3相册效果&l

[转载]Android系统开机画面的实现

Android系统开机画面分为下面三个阶段: 1.开机图片:Android内核是基于标准内核的,对linux比较熟悉,特别是在开发板上移植过Linux系统的人就知道在内核引导过程中会显 示出一 个小企鹅的图片,这就是第一阶段的开机图片,相信大家知道怎么去修改它.Android1.5及其以上版本都取消了这个图片的显示,具体的看内核相关代码 就知道了: 2.开机文字:Android系统开机会出现“A N D R O I D”这行字,相信大家都不陌生,那么这个怎么修改呢?相关文件在Android系统源

纯CSS打造忙碌光标

我们经常会用到忙碌等待的情况,比如ajax等待回调,或者加载页面的时候,我们通常的做法就是放一张loading.gif图片,在那里转呀转. 以前是在pc上用,也没有觉得不妥,如今要在移动端用,问题就来了,以前呢,做前端,兼容各种浏览器,就够让人头疼了,现在还要兼容各种屏幕尺寸. 开始呢,是做了N张不同大小的gif图.用javascript去判断屏的大小,然后选择适当的gif图片,这样做的缺点是很显的,说多了都是泪.现在我要做的,就是 换成css3去实现这个效果.下面看效果图: 有兴趣的,可以复制

纯CSS3打造非常炫的加载动画

纯css3打造的一款非常炫的加载图.用在需要一定时间加载的地方非常合适.先上效果图: 点击这里在线预览 代码非常简单.没有用任何javascript代码.纯css3实现. html代码: <div class="content"> <div style="width: 970px; margin: auto"> </div> <div class="rotate"> <span class=&

史上最详细 纯CSS打造3D文本滚动

昨天看见了一篇文章关于用纯CSS实现文本滚动,在这里跟大家分享一下. 首先把效果图贴给大家 根据效果图我们很容易发现肯定是要用到3D转换的,如果对这个还不是很了解的可以先看看下面的文章 http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/comment-page-1/ http://www.w3cplus.com/blog/tags/95.html 那么首先我们就

纯CSS打造可折叠树状菜单

1:Html代码 <li> <label for="subsubfolder1">下级</label> <input id="subsubfolder1" type="checkbox" /> <ol> <li class="file"><a>下级</a></li> <li> <label for=&q

哥也有个MacBook Air——纯CSS打造银色MacBook Air（一）

上一篇:<CSS3小分队——text分身text-shadow> 写在前面: 前段时间自己用CSS绘制了一个银色的MacBook Air,今天把它从电脑硬盘深处挖了出来,我把我的思路和想法写下来和小伙伴们分享分享.先把最后的效果给大家. 这其实是一个半成品,键盘上的其他图标和文字都还没有加,图标的话可以用font-face,有机会的话把它补全给大家. 小伙伴们也可以去codepen上查看高清无码大图,给出链接: http://codepen.io/myvin/pen/yNezZR 这里使用了C

纯css打造漂亮的html表格

花了点时间,自己做了个漂亮的html表格,采用技术有css,html,其他的废话我也不多说了,直接上图,上代码. 界面图片: HTML代码: <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!DOCTYPE HTML> <html> <head> <title>My JSP 'index.jsp'

【css】 收藏 纯css打造 mackbook air

http://www.cnblogs.com/myvin/p/4621231.html <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="./key.css"&g