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

随机推荐

【DP】BZOJ 1260: [CQOI2007]涂色paint
1260: [CQOI2007]涂色paint Time Limit: 30 Sec Memory Limit: 64 MBSubmit: 893 Solved: 540[Submit][Stat ...
Leetcode#143 Reorder List
原题地址先把链表分割成前后两半,然后交叉融合实践证明,凡是链表相关的题目,都应该当成工程类题目做,局部变量.功能函数什么的随便整,代码长了没关系,关键是清楚,不容易出错. 代码: ListNode ...
windows server 2008 R2 远程连接用户数修改
设置windows server 2008 R2 远程连接用户数修改,三步搞定 1.运行(win+R)中输入tsconfig.msc 2.双击“限制每个用户只能进行一个会话”,取消这个选项负选框 3. ...
Extension Methods
Oftentimes you’ll find yourself using classes you can’t modify. Whether they’re basic data types or ...
css ul li 制作导航条
<html> <head> <style> .test ul{list-style:none;} .test li{float:left; width:100px; ...
.NET中数据集的强类型化
我们知道,每一种程序设计语言都提供一定的类型检查,类型检查可以在编译时进行,也可以在运行时进行,分别称做静态类型检查和动态类型检查.由于静态类型的检查是在编译时进行,实现比较容易,能提高程序的运行效率 ...
POJ 2246 Matrix Chain Multiplication(结构体+栈+模拟+矩阵相乘)
题意:给出矩阵相乘的表达式,让你计算需要的相乘次数,如果不能相乘,则输出error. 思路: 参考的网站连接:http://blog.csdn.net/wangjian8006/article/det ...
java基础知识回顾之javaIO类--java序列化和反序列化
/** * * 一:理解序列化反序列化及其应用 * 序列化:把堆内存的对象转化成字节流的过程. * 反序列化:把字节流序列恢复重构成对象的过程. * 对象的序列化的用途:1.把对象的字节序列持久化, ...
hdu 4430 Yukari's Birthday
思路: 分析知道1<=r<40:所以可以枚举r,之后再二分k. 代码如下: #include<iostream> #include<stdio.h> #includ ...
cojs 火龙果解题报告
昨天晚上做了一发HNOI,感觉有很多新的idea 于是就选了一个出成题目辣我们考虑暴力暴力很明显是把这个图A<=D,B<=E的形态搞出来之后处理相关的询问这样我们会很容易得到正解: ...

纯css做的安卓开机动画

纯css做的安卓开机动画的更多相关文章

随机推荐

热门专题