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

随机推荐

java 连接池的简单实现
最近一个项目中需要自己写个连接池, 写了一个下午,挺辛苦的,但不知道会不会出问题, 所以,贴到博客上,欢迎各路大神指点 1. 配置信息: /** * */ package cn.mjorcen.db. ...
无废话网页重构系列——（6）HTML主干结构：站点(site)、页面(page)
本文作者:大象本文地址:http://www.cnblogs.com/daxiang/p/4653546.html 在分析和切出设计稿,以及部署项目目录文件后,开始写HTML Demo. 首先,弄出H ...
uva 10120
bfs搜索当n大于等于49 是总是可能的 ~ http://www.algorithmist.com/index.php/UVa_10120 #include <cstdio> #i ...
Error: Exception in thread “main” java.lang.NoClassDefFoundError错误
Error: Exception in thread “main” java.lang.NoClassDefFoundError错误检查文件名与类名是否一致检查程序中main方法写的是否正确: p ...
Unity3D 问题流水总结
一.error CS1612:Cannot modify a value type return value of `UnityEngine.SliderJoint2D.limits'. Consid ...
synergy--共享你的键鼠
synergy用来分享一套键鼠,作用于多台主机.可作用于linux.Windows和mac平台.工作方式是:将一台主机作为服务器端,然后服务器端将会分享自己的键鼠,另一台主机作为客户端连接服务端就可以 ...
JsRender系列demo(2)多模板-template
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
Javascript通过className选择元素
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
hdu 1376 Octal Fractions
刚开始做这题时,用的是0.75[8]=(7/8+5/64)[10]这个,但是总是WA…………无语了…… 后来看别人的解题报告,知道了另外一个就是0.75[8]=((5/8+7)/8)[10],从低位向 ...
js call apply bind简单的理解
相同点:JS中call与apply方法可以改变某个函数执行的上下文环境,也就是可以改变函数内this的指向.区别:call与apply方法的参数中,第一个参数都是指定的上下文环境或者指定的对象,而ca ...

纯css做的安卓开机动画

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

随机推荐

热门专题