纯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 ...
随机推荐
- Problem 1007 幸运数 线段树成段更新
题目链接: 题目 Problem 1007 幸运数 Time Limit: 2000 mSec Memory Limit : 131072 KB 问题描述 皮特的幸运数是2和5.只由幸运数字2和5组成 ...
- 解决Tomcat 7遇到StackOverflowError的异常
参考网址:http://qingyuexiao.iteye.com/blog/1886059 前言:在写此博客前,首先感谢姚双琪.林瑞丰.网友qingyuexiao的倾囊相助!此博文不过是笔者对于他们 ...
- 解决Ubuntu开机自动挂载硬盘回收站不可用等权限问题
1.修改fstab sudo gedit /etc/fstab 2.添加如下代码 #Entry for /dev/sdb7 : UUID=78A675EB46D703C4 /media/anseey/ ...
- 暑假集训单切赛第一场 CF 191A Dynasty Puzzles
题意不说了,看原题吧,思路见代码: #include <iostream> #include <stdio.h> #include <string.h> #incl ...
- JAVASCRIPT中的作用域和原型链，应该算是难点了，要好好多学学，练练
今天初六,要上班啦... JAVASCRIPT,看来是丢不了了.. http://www.dengdeng90.com/wordpress/?p=241 http://www.cnblogs.com/ ...
- String类的使用 Part1
String类的属性 1:Chars属性 获取当前 String 对象中位于指定位置的 Char 对象. 2:Length属性 获取当前 String 对象中的字符数. eg:获取字符串中 字母, ...
- SaaS系列介绍之十一: SaaS商业模式分析
1 配置模式 中国企业很多是人治,管理弹性非常大,公司的政策经常变化,管理流程.业务变化也非常大,发展也非常快;一个公司今年是10个人,明年是100个人,后年可能是1000人.管理机制.方法处于经常变 ...
- Zookeeper安装部署
Zookeeper安装 1. 安装 wget http://www.apache.org/dist//zookeeper/zookeeper-3.3.6/zookeeper-3.3.6.tar.gz ...
- Android 自定义ActionBar
Android 3.0及以上已经有了ActionBar的API,可以通过引入support package在3.0以下的平台引用这些API,但这儿呢,完全自定义一个ActionBar,不用引入额外ja ...
- EINTR错误
慢系统调用(slow system call):此术语适用于那些可能永远阻塞的系统调用.永远阻塞的系统调用是指调用有可能永远无法返回,多数网络支持函数都属于这一类.如:若没有客户连接到服务器上,那么服 ...