程序博客网 > Java解析808

纯css做的安卓开机动画

来源：互联网 发布：Java解析808 编辑：程序博客网 时间：2024/05/14 19:53

随着css3的发展，越来越多的负责绚丽的效果可以由纯css来完成了。用css3实现的动画效果丝毫不必js实现的逊色，而且浏览器对css渲染的速度远比js快，大多数时候css的体积也不js小。其中css3中的动画效果可以实现流畅而强大的动画效果，下面我们来看看css3的能量吧。

下面介绍一个博主完成的纯css3实现的仿安卓开机动画，可爱的安卓机器人。

效果图：

css3-android-animate

 

下面给大家提供一个demo可下载地址，先睹为快吧。

查看示例

（新版示例，已兼容safari。）

经过测试，safari没有动画效果的原因是不支持伪元素after,before的动画效果。用DIV替换掉伪元素后safari下运行正常。

老版本的示例和下载地址还保留着，大家可以对比效果。新版本的源码就不贴出来啦，需要学习的直接下载新版源码。

  纯css安卓开机动画第二版  下载 (2.3 KB, 1 次)

  查看示例 （请用chrome或firefox浏览，chrome下效果最佳，目前safari下没有效果，正在测试中...）
  纯css安卓开机动画  下载 (4.0 KB, 0 次)

特别声明此demo为博主原创，可以下载免费使用。

下面是源码

html:

  1. <!DOCTYPE html>   
  2. <html>   
  3.     <head>   
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">   
  5.         <title>android robot</title>   
  6.         <link type="text/css" rel="stylesheet" href="css.css"/>   
  7.     </head>   
  8. <body>   
  9. <div class="android">   
  10.   <div class="eye"></div>   
  11.   <div class="ear"></div>   
  12.   <div class="hand"></div>   
  13.   <div class="foot"></div>   
  14. </div>   
  15. </body>   
  16. </html>  

css:

  1. .android{   
  2.   position:relative;   
  3.   width:200px;   
  4.   height:290px;   
  5.   margin:80px auto;   
  6.   background: #A5C63B;   
  7.   border-radius:200px 200px 50px 50px;   
  8.   transition: all .25s ease-out;   
  9.   -webkit-transition: all .25s ease-out;   
  10.   -moz-transition: all .25s ease-out;   
  11.   -o-transition: all .25s ease-out;   
  12.   -ms-transition: all .25s ease-out;   
  13. }   
  14. .android:hover{   
  15.   filter: blur(3px);   
  16.   -webkit-filter: blur(3px);   
  17.   -moz-filter: blur(3px);   
  18.   -o-filter: blur(3px);   
  19.   -ms-filter: blur(3px);   
  20.   transform: scale(1.2) rotate(3deg);   
  21.   -webkit-transform: scale(1.2) rotate(3deg);   
  22.   -moz-transform: scale(1.2) rotate(3deg);   
  23.   -o-transform: scale(1.2) rotate(3deg);   
  24.   -ms-transform: scale(1.2) rotate(3deg);   
  25. }   
  26. .android:after{   
  27.   content:'';   
  28.   position:absolute;   
  29.   display:block;   
  30.   width:200px;   
  31.   height:8px;   
  32.   top:95px;   
  33.   background: #fff;   
  34. }   
  35. .android .eye:after,   
  36. .android .eye:before{   
  37.   content:'';   
  38.   position:absolute;   
  39.   display:block;   
  40.   width:18px;   
  41.   height:18px;   
  42.   top:35px;   
  43.   left:50px;   
  44.   background: #fff;   
  45.   border-radius:15px;   
  46. }   
  47. .android .eye:after{   
  48.   left:auto;   
  49.   rightright:50px;   
  50.   animation:animated-robot-eye-rightright 5s ease 1s infinite alternate;   
  51.   -webkit-animation:animated-robot-eye-rightright 5s ease 1s infinite alternate;   
  52.   -moz-animation:animated-robot-eye-rightright 5s ease 1s infinite alternate;   
  53.   -o-animation:animated-robot-eye-rightright 5s ease 1s infinite alternate;   
  54.   -ms-animation:animated-robot-eye-rightright 5s ease 1s infinite alternate;   
  55. }   
  56. .android .eye:before{   
  57.   animation:animated-robot-eye-rightright 5s ease 1s infinite alternate;   
  58.   -webkit-animation:animated-robot-eye-rightright 5s ease 1s infinite alternate;   
  59.   -moz-animation:animated-robot-eye-rightright 5s ease 1s infinite alternate;   
  60.   -o-animation:animated-robot-eye-rightright 5s ease 1s infinite alternate;   
  61.   -ms-animation:animated-robot-eye-rightright 5s ease 1s infinite alternate;   
  62. }   
  63. @keyframes animated-robot-eye-rightright  
  64.     {   
  65.     0%      {}   
  66.     25%     {transform: translate(-102px,0px);}   
  67.     50%     {}   
  68.     100%    {}   
  69.     }   
  70. @-webkit-keyframes animated-robot-eye-rightright  
  71.     {   
  72.     0%      {}   
  73.     25%     {-webkit-transform: translate(-102px,0px);}   
  74.     50%     {}   
  75.     100%    {}   
  76.     }   
  77. @-moz-keyframes animated-robot-eye-rightright  
  78.     {   
  79.     0%      {}   
  80.     25%     {-moz-transform: translate(-102px,0px);}   
  81.     50%     {}   
  82.     100%    {}   
  83.     }   
  84. @-o-keyframes animated-robot-eye-rightright  
  85.     {   
  86.     0%      {}   
  87.     25%     {-o-transform: translate(-102px,0px);}   
  88.     50%     {}   
  89.     100%    {}   
  90.     }   
  91. @-ms-keyframes animated-robot-eye-rightright  
  92.     {   
  93.     0%      {}   
  94.     25%     {-ms-transform: translate(-102px,0px);}   
  95.     50%     {}   
  96.     100%    {}   
  97.     }   
  98. @keyframes animated-robot-eye-left  
  99.     {   
  100.     0%      {}   
  101.     25%     {transform: translate(-82px,0px);}   
  102.     50%     {}   
  103.     100%    {}   
  104.     }   
  105. @-webkit-keyframes animated-robot-eye-left  
  106.     {   
  107.     0%      {}   
  108.     25%     {-webkit-transform: translate(-82px,0px);}   
  109.     50%     {}   
  110.     100%    {}   
  111.     }   
  112. @-moz-keyframes animated-robot-eye-left  
  113.     {   
  114.     0%      {}   
  115.     25%     {-moz-transform: translate(-82px,0px);}   
  116.     50%     {}   
  117.     100%    {}   
  118.     }   
  119. @-o-keyframes animated-robot-eye-left  
  120.     {   
  121.     0%      {}   
  122.     25%     {-o-transform: translate(-82px,0px);}   
  123.     50%     {}   
  124.     100%    {}   
  125.     }   
  126. @-ms-keyframes animated-robot-eye-left  
  127.     {   
  128.     0%      {}   
  129.     25%     {-ms-transform: translate(-82px,0px);}   
  130.     50%     {}   
  131.     100%    {}   
  132.     }                  
  133. .android:hover .eye:after,   
  134. .android:hover .eye:before{   
  135.   height:3px;   
  136.   top:43px;   
  137. }   
  138. .android .ear:after,   
  139. .android .ear:before{   
  140.   content:'';   
  141.   position:absolute;   
  142.   display:block;   
  143.   width:6px;   
  144.   height:40px;   
  145.   top:-25px;   
  146.   left:50px;   
  147.   background: #A5C63B;   
  148.   border-radius:5px;   
  149.   transform:rotate(-25deg);   
  150.   -webkit-transform:rotate(-25deg);   
  151.   -moz-transform:rotate(-25deg);   
  152.   -o-transform:rotate(-25deg);   
  153.   -ms-transform:rotate(-25deg);   
  154. }   
  155. .android .ear:after{   
  156.   left:auto;   
  157.   rightright:50px;   
  158.   transform:rotate(25deg);   
  159.   -webkit-transform:rotate(25deg);   
  160.   -moz-transform:rotate(25deg);   
  161.   -o-transform:rotate(25deg);   
  162.   -ms-transform:rotate(25deg);   
  163. }   
  164. .android .ear:before{   
  165. animation:animated-robot-ear-rightright 5s ease 1s infinite alternate;   
  166. -webkit-animation:animated-robot-ear-rightright 5s ease 1s infinite alternate;   
  167. -moz-animation:animated-robot-ear-rightright 5s ease 1s infinite alternate;   
  168. -o-animation:animated-robot-ear-rightright 5s ease 1s infinite alternate;   
  169. -ms-animation:animated-robot-ear-rightright 5s ease 1s infinite alternate;   
  170.   
  171. }   
  172. @keyframes animated-robot-ear-rightright  
  173.     {   
  174.     0%      {}   
  175.     25%     {transform:translate(90px,6px) rotate(25deg);}   
  176.     50%     {}   
  177.     100%    {}   
  178.     }   
  179.   
  180. @-webkit-keyframes animated-robot-ear-rightright  
  181.     {   
  182.     0%      {}   
  183.     25%     {-webkit-transform:translate(90px,6px) rotate(25deg);}   
  184.     50%     {}   
  185.     100%    {}   
  186.     }   
  187.   
  188. @-moz-keyframes animated-robot-ear-rightright  
  189.     {   
  190.     0%      {}   
  191.     25%     {-moz-transform:translate(90px,6px) rotate(25deg);}   
  192.     50%     {}   
  193.     100%    {}   
  194.     }   
  195. @-o-keyframes animated-robot-ear-rightright  
  196.     {   
  197.     0%      {}   
  198.     25%     {-o-transform:translate(90px,6px) rotate(25deg);}   
  199.     50%     {}   
  200.     100%    {}   
  201.     }   
  202. @-ms-keyframes animated-robot-ear-rightright  
  203.     {   
  204.     0%      {}   
  205.     25%     {-ms-transform:translate(90px,6px) rotate(25deg);}   
  206.     50%     {}   
  207.     100%    {}   
  208.     }                  
  209. @keyframes animated-robot-ear-left  
  210.     {   
  211.     0%      {transform: translate(-42px,0px);}   
  212.     25%     {}   
  213.     50%     {}   
  214.     100%    {}   
  215.     }   
  216. @-webkit-keyframes animated-robot-ear-left  
  217.     {   
  218.     0%      {-webkit-transform: translate(-42px,0px);}   
  219.     25%     {}   
  220.     50%     {}   
  221.     100%    {}   
  222.     }   
  223. @-moz-keyframes animated-robot-ear-left  
  224.     {   
  225.     0%      {-moz-transform: translate(-42px,0px);}   
  226.     25%     {}   
  227.     50%     {}   
  228.     100%    {}   
  229.     }   
  230. @-o-keyframes animated-robot-ear-left  
  231.     {   
  232.     0%      {-o-transform: translate(-42px,0px);}   
  233.     25%     {}   
  234.     50%     {}   
  235.     100%    {}   
  236.     }   
  237. @-ms-keyframes animated-robot-ear-left  
  238.     {   
  239.     0%      {-ms-transform: translate(-42px,0px);}   
  240.     25%     {}   
  241.     50%     {}   
  242.     100%    {}   
  243.     }                  
  244. .android .hand:after,   
  245. .android .hand:before{   
  246.   content:'';   
  247.   position:absolute;   
  248.   display:block;   
  249.   width:44px;   
  250.   height:150px;   
  251.   top:96px;   
  252.   left:-52px;   
  253.   background: #A5C63B;   
  254.   border-radius:44px;   
  255.   
  256. }   
  257. .android .hand:after{   
  258.   left:auto;   
  259.   rightright:-52px;   
  260. }   
  261.   
  262. .android .hand:after   
  263. {   
  264.   transform-origin:0 0;   
  265.   -webkit-transform-origin:0 0;   
  266.   -moz-transform-origin:0 0;   
  267.   -o-transform-origin:0 0;   
  268.   -ms-transform-origin:0 0;   
  269.   animation:animated-robot-hand-rightright 5s ease 1s infinite alternate;   
  270.   -webkit-animation:animated-robot-hand-rightright 5s ease 1s infinite alternate;   
  271.   -moz-animation:animated-robot-hand-rightright 5s ease 1s infinite alternate;   
  272.   -o-animation:animated-robot-hand-rightright 5s ease 1s infinite alternate;   
  273.   -ms-animation:animated-robot-hand-rightright 5s ease 1s infinite alternate;   
  274. }   
  275. .android .hand:before   
  276. {   
  277.   transform-origin:44px 0;   
  278.   -webkit-transform-origin:44px 0;   
  279.   -moz-transform-origin:44px 0;   
  280.   -o-transform-origin:44px 0;   
  281.   -ms-transform-origin:44px 0;   
  282.   animation:animated-robot-hand-left 5s ease 1s infinite alternate;   
  283.   -webkit-animation:animated-robot-hand-left 5s ease 1s infinite alternate;   
  284.   -moz-animation:animated-robot-hand-left 5s ease 1s infinite alternate;   
  285.   -o-animation:animated-robot-hand-left 5s ease 1s infinite alternate;   
  286.   -ms-animation:animated-robot-hand-left 5s ease 1s infinite alternate;   
  287. }   
  288.   
  289.   
  290. @keyframes animated-robot-hand-rightright  
  291.     {   
  292.     0%      {transform: translate(-52px,0px);}   
  293.     25%     {transform: rotate(0deg);}   
  294.     50%     {transform: rotate(-180deg);}   
  295.     100%    {transform: translate(-10px,120px) rotate(-180deg);}   
  296.     }   
  297. @-webkit-keyframes animated-robot-hand-rightright  
  298.     {   
  299.     0%      {-webkit-transform: translate(-52px,0px);}   
  300.     25%     {-webkit-transform: rotate(0deg);}   
  301.     50%     {-webkit-transform: rotate(-180deg);}   
  302.     100%    {-webkit-transform: translate(-10px,120px) rotate(-180deg);}   
  303.     }   
  304. @-moz-keyframes animated-robot-hand-rightright  
  305.     {   
  306.     0%      {-moz-transform: translate(-52px,0px);}   
  307.     25%     {-moz-transform: rotate(0deg);}   
  308.     50%     {-moz-transform: rotate(-180deg);}   
  309.     100%    {-moz-transform: translate(-10px,120px) rotate(-180deg);}   
  310.     }   
  311. @-o-keyframes animated-robot-hand-rightright  
  312.     {   
  313.     0%      {-o-transform: translate(-52px,0px);}   
  314.     25%     {-o-transform: rotate(0deg);}   
  315.     50%     {-o-transform: rotate(-180deg);}   
  316.     100%    {-o-transform: translate(-10px,120px) rotate(-180deg);}   
  317.     }      
  318. @-ms-keyframes animated-robot-hand-rightright  
  319.     {   
  320.     0%      {-ms-transform: translate(-52px,0px);}   
  321.     25%     {-ms-transform: rotate(0deg);}   
  322.     50%     {-ms-transform: rotate(180deg);}   
  323.     100%    {-ms-transform: translate(-10px,120px) rotate(180deg);}   
  324.     }                  
  325. @keyframes animated-robot-hand-left  
  326.     {   
  327.     0%      {transform: translate(52px,0px);}   
  328.     25%     {transform: rotate(0deg);}   
  329.     50%     {transform: rotate(180deg);}   
  330.     100%    {transform: translate(10px,120px) rotate(180deg);}   
  331.     }   
  332. @-webkit-keyframes animated-robot-hand-left  
  333.     {   
  334.     0%      {-webkit-transform: translate(52px,0px);}   
  335.     25%     {-webkit-transform: rotate(0deg);}   
  336.     50%     {-webkit-transform: rotate(180deg);}   
  337.     100%    {-webkit-transform: translate(10px,120px) rotate(180deg);}   
  338.     }   
  339. @-moz-keyframes animated-robot-hand-left  
  340.     {   
  341.     0%      {-moz-transform: translate(52px,0px);}   
  342.     25%     {-moz-transform: rotate(0deg);}   
  343.     50%     {-moz-transform: rotate(180deg);}   
  344.     100%    {-moz-transform: translate(10px,120px) rotate(180deg);}   
  345.     }   
  346. @-o-keyframes animated-robot-hand-left  
  347.     {   
  348.     0%      {-o-transform: translate(52px,0px);}   
  349.     25%     {-o-transform: rotate(0deg);}   
  350.     50%     {-o-transform: rotate(180deg);}   
  351.     100%    {-o-transform: translate(10px,120px) rotate(180deg);}   
  352.     }   
  353. @-ms-keyframes animated-robot-hand-left  
  354.     {   
  355.     0%      {-ms-transform: translate(52px,0px);}   
  356.     25%     {-ms-transform: rotate(0deg);}   
  357.     50%     {-ms-transform: rotate(-180deg);}   
  358.     100%    {-ms-transform: translate(10px,120px) rotate(-180deg);}   
  359.     }                  
  360.   
  361.   
  362. .android .foot:after,   
  363. .android .foot:before{   
  364.   content:'';   
  365.   position:absolute;   
  366.   display:block;   
  367.   width:44px;   
  368.   height:110px;   
  369.   bottombottom:-90px;   
  370.   left:40px;   
  371.   background: #A5C63B;   
  372.   border-radius:44px;   
  373. }   
  374.   
  375. .android .foot:after   
  376. {   
  377.   transform-origin:0 0;   
  378.   -webkit-transform-origin:0 0;   
  379.   -moz-transform-origin:0 0;   
  380.   -o-transform-origin:0 0;   
  381.   -ms-transform-origin:0 0;   
  382.   animation:animated-robot-foot-rightright 5s ease 1s infinite alternate;   
  383.   -webkit-animation:animated-robot-foot-rightright 5s ease 1s infinite alternate;   
  384.   -moz-animation:animated-robot-foot-rightright 5s ease 1s infinite alternate;   
  385.   -o-animation:animated-robot-foot-rightright 5s ease 1s infinite alternate;   
  386.   -ms-animation:animated-robot-foot-rightright 5s ease 1s infinite alternate;   
  387. }   
  388. .android .foot:before   
  389. {   
  390.   transform-origin:44px 0;   
  391.   -webkit-transform-origin:44px 0;   
  392.   -moz-transform-origin:44px 0;   
  393.   -o-transform-origin:44px 0;   
  394.   -ms-transform-origin:44px 0;   
  395.   animation:animated-robot-foot-left 5s ease 1s infinite alternate;   
  396.   -webkit-animation:animated-robot-foot-left 5s ease 1s infinite alternate;   
  397.   -moz-animation:animated-robot-foot-left 5s ease 1s infinite alternate;   
  398.   -o-animation:animated-robot-foot-left 5s ease 1s infinite alternate;   
  399.   -ms-animation:animated-robot-foot-left 5s ease 1s infinite alternate;   
  400. }   
  401.   
  402. @keyframes animated-robot-foot-rightright  
  403.     {   
  404.     0%      {transform: rotate(0deg);}   
  405.     25%     {transform: rotate(0deg);bottombottom:-120px;}   
  406.     50%     {transform: rotate(-90deg);}   
  407.     100%    {transform: translate(-50px,-120px);}   
  408.     }   
  409. @-webkit-keyframes animated-robot-foot-rightright  
  410.     {   
  411.     0%      {-webkit-transform: rotate(0deg);}   
  412.     25%     {-webkit-transform: rotate(0deg);bottombottom:-120px;}   
  413.     50%     {-webkit-transform: rotate(-90deg);}   
  414.     100%    {-webkit-transform: translate(-50px,-120px);}   
  415.     }   
  416. @-moz-keyframes animated-robot-foot-rightright  
  417.     {   
  418.     0%      {-moz-transform: rotate(0deg);}   
  419.     25%     {-moz-transform: rotate(0deg);bottombottom:-120px;}   
  420.     50%     {-moz-transform: rotate(-90deg);}   
  421.     100%    {-moz-transform: translate(-50px,-120px);}   
  422.     }   
  423. @-o-keyframes animated-robot-foot-rightright  
  424.     {   
  425.     0%      {-o-transform: rotate(0deg);}   
  426.     25%     {-o-transform: rotate(0deg);bottombottom:-120px;}   
  427.     50%     {-o-transform: rotate(-90deg);}   
  428.     100%    {-o-transform: translate(-50px,-120px);}   
  429.     }   
  430. @-ms-keyframes animated-robot-foot-rightright  
  431.     {   
  432.     0%      {-ms-transform: rotate(0deg);}   
  433.     25%     {-ms-transform: rotate(0deg);bottombottom:-120px;}   
  434.     50%     {-ms-transform: rotate(-90deg);}   
  435.     100%    {-ms-transform: translate(-50px,-120px);}   
  436.     }                  
  437. @keyframes animated-robot-foot-left  
  438.     {   
  439.     0%      {transform: rotate(0deg);}   
  440.     25%     {transform: rotate(0deg);bottombottom:-120px;}   
  441.     50%     {transform: rotate(90deg);}   
  442.     100%    {transform: translate(50px,-120px);}   
  443.     }   
  444. @-webkit-keyframes animated-robot-foot-left  
  445.     {   
  446.     0%      {-webkit-transform: rotate(0deg);}   
  447.     25%     {-webkit-transform: rotate(0deg);bottombottom:-120px;}   
  448.     50%     {-webkit-transform: rotate(90deg);}   
  449.     100%    {-webkit-transform: translate(50px,-120px);}   
  450.     }   
  451.   
  452. @-o-keyframes animated-robot-foot-left  
  453.     {   
  454.     0%      {-o-transform: rotate(0deg);}   
  455.     25%     {-o-transform: rotate(0deg);bottombottom:-120px;}   
  456.     50%     {-o-transform: rotate(90deg);}   
  457.     100%    {-o-transform: translate(50px,-120px);}   
  458.     }   
  459. @-moz-keyframes animated-robot-foot-left  
  460.     {   
  461.     0%      {-moz-transform: rotate(0deg);}   
  462.     25%     {-moz-transform: rotate(0deg);bottombottom:-120px;}   
  463.     50%     {-moz-transform: rotate(90deg);}   
  464.     100%    {-moz-transform: translate(50px,-120px);}   
  465.     }   
  466. @-ms-keyframes animated-robot-foot-left  
  467.     {   
  468.     0%      {-ms-transform: rotate(0deg);}   
  469.     25%     {-ms-transform: rotate(0deg);bottombottom:-120px;}   
  470.     50%     {-ms-transform: rotate(90deg);}   
  471.     100%    {-ms-transform: translate(50px,-120px);}   
  472.     }                  
  473. .android .foot:after{   
  474.   left:auto;   
  475.   rightright:40px;   
  476. }  
Java解析808 Java解析808
原创粉丝点击
热门IT博客
飞机航班软件飞机航班软件
茉莉机器人源码茉莉机器人源码
网络诽谤罪的管辖
php fpm
淘宝营销亮点怎么写
怎么修改淘宝账号
安装ubuntu磁盘分区
欧美好的护肤品知乎
优惠券转链接软件
得力33068 软件下载
阿里云备案教程
大学生旅游攻略 知乎
下载同性软件bloud
ddd网络语言什么意思
sql server2008破解版
三大投行薪水 知乎
网约车软件制作
日本股票行情软件
淘宝改差评链接
应用时间序列分析数据
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 平板怎么下载软件 爱派平板电脑 windows平板电脑推荐 什么平板电脑好 平板电脑论坛 平板电脑有什么功能 中关村平板电脑报价 平板电脑系统 二手平板电脑 平板软件市场 低价平板电脑 windows 平板 平板可以打电话吗 平板那个牌子好 平板和手机的区别 平板和笔记本的区别 平板电脑价格表 蓝魔平板电脑 安卓平板电脑软件下载 平板有什么用 昂达平板电脑 便宜的平板电脑 平板电脑推荐 平板电脑牌子排名 平板电脑排名 平板钢闸门价格 平板自助点餐系统 英特尔平板电脑二合一 哪款平板性价比高 平板哪个牌子性价比高 平板液晶电视价格 性价比高的平板 平板手机大全 国产平板那个牌子好 平板太阳能厂家 推荐个平板电脑 平板品牌排行榜 平板学习机哪个牌子好 十寸的平板有多大 英特尔 平板电脑 平板电脑牌子排行

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里