随着css3的发展,越来越多的负责绚丽的效果可以由纯css来完成了。用css3实现的动画效果丝毫不必js实现的逊色,而且浏览器对css渲染的速度远比js快,大多数时候css的体积也不js小。其中css3中的动画效果可以实现流畅而强大的动画效果,下面我们来看看css3的能量吧。
下面介绍一个博主完成的纯css3实现的仿安卓开机动画,可爱的安卓机器人。
效果图:
下面给大家提供一个demo可下载地址,先睹为快吧。
(新版示例,已兼容safari。)
经过测试,safari没有动画效果的原因是不支持伪元素after,before的动画效果。用DIV替换掉伪元素后safari下运行正常。
老版本的示例和下载地址还保留着,大家可以对比效果。新版本的源码就不贴出来啦,需要学习的直接下载新版源码。
纯css安卓开机动画第二版 下载 (2.3 KB, 1 次)
查看示例 (请用chrome或firefox浏览,chrome下效果最佳,目前safari下没有效果,正在测试中...)
纯css安卓开机动画 下载 (4.0 KB, 0 次)
特别声明此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;
- rightright:50px;
- animation:animated-robot-eye-rightright 5s ease 1s infinite alternate;
- -webkit-animation:animated-robot-eye-rightright 5s ease 1s infinite alternate;
- -moz-animation:animated-robot-eye-rightright 5s ease 1s infinite alternate;
- -o-animation:animated-robot-eye-rightright 5s ease 1s infinite alternate;
- -ms-animation:animated-robot-eye-rightright 5s ease 1s infinite alternate;
- }
- .android .eye:before{
- animation:animated-robot-eye-rightright 5s ease 1s infinite alternate;
- -webkit-animation:animated-robot-eye-rightright 5s ease 1s infinite alternate;
- -moz-animation:animated-robot-eye-rightright 5s ease 1s infinite alternate;
- -o-animation:animated-robot-eye-rightright 5s ease 1s infinite alternate;
- -ms-animation:animated-robot-eye-rightright 5s ease 1s infinite alternate;
- }
- @keyframes animated-robot-eye-rightright
- {
- 0% {}
- 25% {transform: translate(-102px,0px);}
- 50% {}
- 100% {}
- }
- @-webkit-keyframes animated-robot-eye-rightright
- {
- 0% {}
- 25% {-webkit-transform: translate(-102px,0px);}
- 50% {}
- 100% {}
- }
- @-moz-keyframes animated-robot-eye-rightright
- {
- 0% {}
- 25% {-moz-transform: translate(-102px,0px);}
- 50% {}
- 100% {}
- }
- @-o-keyframes animated-robot-eye-rightright
- {
- 0% {}
- 25% {-o-transform: translate(-102px,0px);}
- 50% {}
- 100% {}
- }
- @-ms-keyframes animated-robot-eye-rightright
- {
- 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;
- rightright: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-rightright 5s ease 1s infinite alternate;
- -webkit-animation:animated-robot-ear-rightright 5s ease 1s infinite alternate;
- -moz-animation:animated-robot-ear-rightright 5s ease 1s infinite alternate;
- -o-animation:animated-robot-ear-rightright 5s ease 1s infinite alternate;
- -ms-animation:animated-robot-ear-rightright 5s ease 1s infinite alternate;
- }
- @keyframes animated-robot-ear-rightright
- {
- 0% {}
- 25% {transform:translate(90px,6px) rotate(25deg);}
- 50% {}
- 100% {}
- }
- @-webkit-keyframes animated-robot-ear-rightright
- {
- 0% {}
- 25% {-webkit-transform:translate(90px,6px) rotate(25deg);}
- 50% {}
- 100% {}
- }
- @-moz-keyframes animated-robot-ear-rightright
- {
- 0% {}
- 25% {-moz-transform:translate(90px,6px) rotate(25deg);}
- 50% {}
- 100% {}
- }
- @-o-keyframes animated-robot-ear-rightright
- {
- 0% {}
- 25% {-o-transform:translate(90px,6px) rotate(25deg);}
- 50% {}
- 100% {}
- }
- @-ms-keyframes animated-robot-ear-rightright
- {
- 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;
- rightright:-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-rightright 5s ease 1s infinite alternate;
- -webkit-animation:animated-robot-hand-rightright 5s ease 1s infinite alternate;
- -moz-animation:animated-robot-hand-rightright 5s ease 1s infinite alternate;
- -o-animation:animated-robot-hand-rightright 5s ease 1s infinite alternate;
- -ms-animation:animated-robot-hand-rightright 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-rightright
- {
- 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-rightright
- {
- 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-rightright
- {
- 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-rightright
- {
- 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-rightright
- {
- 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;
- bottombottom:-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-rightright 5s ease 1s infinite alternate;
- -webkit-animation:animated-robot-foot-rightright 5s ease 1s infinite alternate;
- -moz-animation:animated-robot-foot-rightright 5s ease 1s infinite alternate;
- -o-animation:animated-robot-foot-rightright 5s ease 1s infinite alternate;
- -ms-animation:animated-robot-foot-rightright 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-rightright
- {
- 0% {transform: rotate(0deg);}
- 25% {transform: rotate(0deg);bottombottom:-120px;}
- 50% {transform: rotate(-90deg);}
- 100% {transform: translate(-50px,-120px);}
- }
- @-webkit-keyframes animated-robot-foot-rightright
- {
- 0% {-webkit-transform: rotate(0deg);}
- 25% {-webkit-transform: rotate(0deg);bottombottom:-120px;}
- 50% {-webkit-transform: rotate(-90deg);}
- 100% {-webkit-transform: translate(-50px,-120px);}
- }
- @-moz-keyframes animated-robot-foot-rightright
- {
- 0% {-moz-transform: rotate(0deg);}
- 25% {-moz-transform: rotate(0deg);bottombottom:-120px;}
- 50% {-moz-transform: rotate(-90deg);}
- 100% {-moz-transform: translate(-50px,-120px);}
- }
- @-o-keyframes animated-robot-foot-rightright
- {
- 0% {-o-transform: rotate(0deg);}
- 25% {-o-transform: rotate(0deg);bottombottom:-120px;}
- 50% {-o-transform: rotate(-90deg);}
- 100% {-o-transform: translate(-50px,-120px);}
- }
- @-ms-keyframes animated-robot-foot-rightright
- {
- 0% {-ms-transform: rotate(0deg);}
- 25% {-ms-transform: rotate(0deg);bottombottom:-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);bottombottom:-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);bottombottom:-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);bottombottom:-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);bottombottom:-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);bottombottom:-120px;}
- 50% {-ms-transform: rotate(90deg);}
- 100% {-ms-transform: translate(50px,-120px);}
- }
- .android .foot:after{
- left:auto;
- rightright:40px;
- }
相关推荐
【标题】"安卓开机动画源码.zip"揭示了这个压缩包内容主要涉及的是安卓系统的开机动画源码,这是开发者或设计者用于定制个性化开机画面的资源。它由Simon Clavey创建,针对的是安卓4.4版本,这意味着源码可能基于...
HTML5 css3实现安卓小人图标,动画版的Android图标,那个图标会动的,会旋转,...CSS3超强大哦,甚至可以用它来制造出一个漂亮的图标来,不相信就下载本HTML5代码一看究竟,仿制出Android安卓手机图标开机画面的图标。
开机动画,正如其名,是指在电子设备启动过程中显示的动态图像序列,它为用户带来了一种视觉上的欢迎体验,同时也是品牌形象和技术实力的一种展示。在这个特定的案例中,我们关注的是一个名为“魔法阵开机动画”的...
在Android系统中,Wi-Fi动画不仅是一个简单的图形变化,而是涉及到用户界面(UI)设计、系统资源管理和网络状态反馈等多个方面的技术。这篇详细讲解将围绕Android Wi-Fi动画的实现原理、UI设计原则、系统级交互以及...
在Android应用开发中,"AndroidSplashScreen: Android开机画面+ WebView +拉动即可刷新"这个主题涉及到几个关键的技术点,包括启动画面(Splash Screen)、WebView的使用以及下拉刷新功能的实现。下面将对这些技术...
【动网论坛 高达Seed论坛风格】是一个专为动网论坛设计的界面主题,它以日本动画《机动战士高达Seed》为灵感来源,旨在为论坛用户提供一个与高达Seed主题相融合的交流环境。这个风格可能包括了定制的论坛皮肤、图标...
在网页开发中,JavaScript和CSS3是常用的动画工具。JavaScript可以利用requestAnimationFrame函数创建平滑的动画效果。例如,以下是一个简单的使用JavaScript实现的移动元素动画的示例: ```javascript let element...
这种效果类似于我们常见的开机动画,它能够吸引用户的注意力并提升用户体验。下面将详细探讨这种效果的实现原理、应用场景以及可能涉及的技术点。 首先,"飞出来的效果"通常是由动画编程实现的,这可能涉及到如CSS3...
MTK Android平台,即基于联发科技(MediaTek)芯片组的安卓设备,常面临一系列技术难题与优化需求。本文将深入解析从给定文件中提取的关键问题,涉及MTK6577、6515、6575、6589等型号,涵盖应用、日期/时间设置、...
CSS3则增强了样式表的能力,提供了更精细的布局控制,如响应式设计、动画效果、多列布局等,使Firefox OS的应用在视觉呈现上更加出色。 **Boot to Gecko (B2G)** Boot to Gecko是Firefox OS的核心组成部分,它直接...