纯css做的安卓开机动画
随着css3的发展，越来越多的负责绚丽的效果可以由纯css来完成了。用css3实现的动画效果丝毫不必js实现的逊色，而且浏览器对css渲染的速度远比js快，大多数时候css的体积也不js小。其中css3中的动画效果可以实现流畅而强大的动画效果，下面我们来看看css3的能量吧。
下面介绍一个博主完成的纯css3实现的仿安卓开机动画，可爱的安卓机器人。
效果图：
下面给大家提供一个demo可下载地址，先睹为快吧。
下面是源码：
html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>android robot</title>
<link type="text/css" rel="stylesheet" href="css.css"/>
</head>
<body>
<div class="android">
<div class="eye"></div>
<div class="ear"></div>
<div class="hand"></div>
<div class="foot"></div>
</div>
</body>
</html>
css:
.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;
}
纯css做的安卓开机动画的更多相关文章
- 纯css做幻灯片效果
css3里面有一个@keyframes动画功能. w3c上面的例子: 可以使用它来做一个幻灯片效果. <!DOCTYPE html> <html lang="en" ...
- 纯CSS制作加<div>制作动画版哆啦A梦
纯CSS代码加上<div>制作动画版哆啦A梦(机器猫) 哆啦A梦(机器猫)我们大家一定都很熟悉,今天给大家演示怎么用纯CSS代码,来做一个动画版的哆啦A梦. 效果图: ###下面代码同学可 ...
- 设置安卓开机动画、开机logo
我们要修改的是system>media文件夹下的bootanimation.zip(手机开机动画)这个文件 先来讲讲这个文件结构:该zip解压后得到两个文件, 第一个目录存放了开机时播放的图片( ...
- 纯CSS做3D旋转魔方
昨天偶然看见网友(简单说 用CSS做一个魔方旋转的效果)做的一个3D旋转魔方 效果就是本博客右侧公告栏所示 在这里把做法展现出来 感兴趣的可以试试 做成自己特有的魔方 <!DOCTYPE h ...
- 安卓 开机 动画 酷派大神F1开机动画 美化 自定义 修改
韩梦飞沙 韩亚飞 313134555@qq.com yue31313 han_meng_fei_sha 酷派大神F1开机动画.rar
- 42.纯 CSS 创作一个均衡器 loader 动画
原文地址: https://segmentfault.com/a/1190000015157160 感想: 不难,最简单的动画.拓展地址: https://scrimba.com/c/cWqVv9hd ...
- 纯css做三角形图标
以前做三角形图标一直是用图片,或者css3旋转,现在才发现原来还有这么简单的三角形 div { border: 10px solid transparent; border-bottom: 10px ...
- 51.纯 CSS 创作一个雷达扫描动画
原文地址:https://segmentfault.com/a/1190000015283286 感想:linear-gradient() 刷新了我的认知,它可以并列多个而不会被覆盖,并列使用时用 , ...
- 45.纯 CSS 创作一个菱形 loader 动画
原文地址:https://segmentfault.com/a/1190000015208027#articleHeader3 感想: 网格布局-> display: grid; HTML co ...
随机推荐
- Codeforces Round #328 (Div. 2) D. Super M
题目链接: http://codeforces.com/contest/592/problem/D 题意: 给你一颗树,树上有一些必须访问的节点,你可以任选一个起点,依次访问所有的必须访问的节点,使总 ...
- RFID开发笔记 Alien阅读器文档
1. 开机使用serial connect,完成boot后使用TCP/IP协议与主机通信 2.TagList,是一个活跃标签的列表,这里活跃的含义是在一个间隔里被监听到.如果一个标签之前没有被监听到, ...
- tornado的cookie和secure cookie
tornado里面有关几个cookie的处理,在web.py文件里. get_cookie, set_cookie普通的设置cookie, clear_cookie, clear_all_cookie ...
- 三层架构和MVC
注:本文章内所有内容都来自互联网,本人主要是起了一个收集的作用 http://www.cnblogs.com/zhhh/archive/2011/06/10/2077519.html 又看到有人在问三 ...
- Network Saboteur(Rand版)
poj2531:http://poj.org/problem?id=2531 题意:给你一个图,图中点之间会有边权,现在问题是把图分成两部分,使得两部分之间边权之和最大.题解:随机算法 #includ ...
- POJ 2568/ZOJ 1965 Decode the Tree
题意:在树中,每次删去节点值最小的叶子结点. 每删去一个点,就给出与这相连的点的值,直到最后只剩下一个根结点,给这N-1个数,重新建立这个树. 思路: 给出的节点号按次序存入到数组a中,将未给出的数存 ...
- 360 chrome 国际版能够隐藏用户保存的密码
用360 chrome 国际版一段时间了,今天发现它一个优点:取消了浏览器保存的密码明文显示! 原生的chrome和枫树都会明文显示密码,360 chrome国际版则只显示保存了密码的域名和账户名.光 ...
- don't panic !
今天发现GoAgent的readme里边只有一句话:don't panic !这才是大师啊!同时感觉有一丝对中国网络自由的调侃- 那么,你在vim中输入:h!试试看会发生什么?再输入h 42试试看呢. ...
- 套题T2
数学(math.cpp) DXY的数学很差... 对于所有1<=i<=N求(2^i – i^2)能被7整除的个数.(N<=1000000) 样例输入: 3 样例输出: 1 你在代码中 ...
- 欧拉工程第60题：Prime pair sets
题目链接 五个数,任意两个数的任意链接后的数还是质数 满足这个条件的最小五个数的和是多少? 结果:26033 纯暴力破解: package projecteuler51to60; import jav ...