随着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;
- }
相关推荐
两款纯css3实现的动画菜单
这是一款纯css3炫酷粒子动画特效。该特效使用多个div来制作光点粒子效果,并使用CSS3动画来制作光点粒子的上升动画,效果非常炫酷。
当然,他并不是纯css3的,抱歉标题可能会有些歧义,但是偶尔的一点点js也是可以忽略的啦 附件提供了28个不同的加载效果,你可以任选一种作为你的手机网页端部分模块的loading效果,而不需要考虑兼容性的问题 ...
纯CSS3实现百叶窗动画效果 纯CSS3实现百叶窗动画效果
HTML 纯CSS下划线出现动画
这是一款使用纯css3制作的类似于android滑动按钮的左右滑动按钮效果。这个css3左右滑动按钮可以使用鼠标来控制开关滑动,按钮开关滑动时带有很炫的动画和渐变效果。
这是一组效果非常炫酷的纯CSS3 Loading加载动画特效。这组loading动画共有27种不同的效果。每一种loading动画都是通过CSS3的keyframes帧动画来完成的,每一个加载动画都构思新颖,效果非常的酷。
纯css3云彩动画效果
网页动画素材 纯css3绘制逼真神奇宝贝伊布动画(抖音资料)网页动画素材 纯css3绘制逼真神奇宝贝伊布动画(抖音资料)网页动画素材 纯css3绘制逼真神奇宝贝伊布动画(抖音资料)网页动画素材 纯css3绘制逼真神奇宝贝...
纯CSS写的导航菜单以及动画,当然可能会不兼容低版本的IE
纯css3书本翻页动画特效
今天我们要分享一个纯CSS3灯光开关动画,切换开关可以改变页面背景颜色,从而模拟灯光的开启和关闭。值得注意的是,这款开关是通过CSS3自定义checkbox样式来实现的,记得很早以前也分享过类似的一个CSS3应用纯CSS3...
CSS3-Slider是一款简单的带5种动画过渡效果的纯CSS3幻灯片特效。该幻灯片使用纯CSS3制作,使用非常简单,只需要按指定的格式编写HTML代码,并引入相应的CSS文件即可正常工作。
微信小程序录音时需要动画,参照网上的安全写了一个,采用纯css的方式动画实现
这是一款4种效果非常炫酷的纯CSS3页面切换过渡动画特效。该CSS3页面过渡动画使用CSS keyframes制作而成,所有的动画效果和延时都是使用CSS属性,没有任何的javascript timeout()代码。
安卓开机动画源码是一款由Simon Clavey创建的安卓4.4开机加载动画,该动画由CSS3 JS实现。
前端,可视化大屏,纯css3+svg动画实现流转动画
之前我们分享过几个纯CSS3动画特效,比如纯CSS3人物行走动画就非常酷,还有纯CSS3 Android Logo动画绘制也很酷。今天我们又要来分享一款纯CSS3绘制的可爱小男孩动画,除了绘制的小男孩逼真可爱外,其面部表情也十分...
纯CSS3实现3D开机按钮是一款利用纯CSS3实现的3D开机按钮,这款按钮并没有惊人的动画效果,但是却利用了CSS3的许多特性给按钮添加了阴影以及光泽,让按钮显得非常立体。
纯CSS3大海蓝天动画背景特效是一款个性的基于CSS3实现的海天一色页面动画背景特效。