CSS-based Android system boot screen animation special effect generation, css android
<! DOCTYPE html>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> special animation effects code for the boot screen of an android system built with pure CSS </title>
<Style>
. Android {
Position: relative;
Width: 200px;
Height: 290px;
Margin: 80px auto;
Background: # A5C63B;
Border-radius: 200px 200px 50px 50px;
Transition: all. 25 s outgoing-out;
-Webkit-transition: all. 25 s transfer-out;
-Moz-transition: all. 25 s outgoing-out;
-O-transition: all. 25 s outgoing-out;
-Ms-transition: all. 25 s outgoing-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 limit 1 s infinite alternate;
-Webkit-animation: animated-robot-eye-right 5S limit 1 s infinite alternate;
-Moz-animation: animated-robot-eye-right 5S limit 1 s infinite alternate;
-O-animation: animated-robot-eye-right 5S limit 1 s infinite alternate;
-Ms-animation: animated-robot-eye-right 5S limit 1 s infinite alternate;
}
. Android. eye: before {
Animation: animated-robot-eye-right 5S limit 1 s infinite alternate;
-Webkit-animation: animated-robot-eye-right 5S limit 1 s infinite alternate;
-Moz-animation: animated-robot-eye-right 5S limit 1 s infinite alternate;
-O-animation: animated-robot-eye-right 5S limit 1 s infinite alternate;
-Ms-animation: animated-robot-eye-right 5S limit 1 s 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 limit 1 s infinite alternate;
-Webkit-animation: animated-robot-ear-right 5S limit 1 s infinite alternate;
-Moz-animation: animated-robot-ear-right 5S limit 1 s infinite alternate;
-O-animation: animated-robot-ear-right 5S limit 1 s infinite alternate;
-Ms-animation: animated-robot-ear-right 5S limit 1 s 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 limit 1 s infinite alternate;
-Webkit-animation: animated-robot-hand-right 5S limit 1 s infinite alternate;
-Moz-animation: animated-robot-hand-right 5S limit 1 s infinite alternate;
-O-animation: animated-robot-hand-right 5S limit 1 s infinite alternate;
-Ms-animation: animated-robot-hand-right 5S limit 1 s 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 limit 1 s infinite alternate;
-Webkit-animation: animated-robot-hand-left 5S limit 1 s infinite alternate;
-Moz-animation: animated-robot-hand-left 5S limit 1 s infinite alternate;
-O-animation: animated-robot-hand-left 5S limit 1 s infinite alternate;
-Ms-animation: animated-robot-hand-left 5S limit 1 s 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 limit 1 s infinite alternate;
-Webkit-animation: animated-robot-foot-right 5S limit 1 s infinite alternate;
-Moz-animation: animated-robot-foot-right 5S limit 1 s infinite alternate;
-O-animation: animated-robot-foot-right 5S limit 1 s infinite alternate;
-Ms-animation: animated-robot-foot-right 5S limit 1 s 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 limit 1 s infinite alternate;
-Webkit-animation: animated-robot-foot-left 5S limit 1 s infinite alternate;
-Moz-animation: animated-robot-foot-left 5S limit 1 s infinite alternate;
-O-animation: animated-robot-foot-left 5S limit 1 s infinite alternate;
-Ms-animation: animated-robot-foot-left 5S limit 1 s 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;
}
</Style>
</Head>
<Body>
<Div class = "android">
<Div class = "eye"> </div>
<Div class = "ear"> </div>
<Div class = "hand"> </div>
<Div class = "foot"> </div>
</Div>
<Div> <A href = "http://www.999jiujiu.com/"> http://www.999jiujiu.com/</A> </div>
</Body>
</Html>