<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> using CSS3 to clone JS's elastic effect </title>
<body>
<style type= "Text/css" >
*{margin:0;padding:0px;}
Body{background: #b1b1b1; Font-family:arial;font-size:125%;color: #202020;}
. tips{width:600px;margin:0 auto;line-height:24px;padding-top:10px;font-size:14px;}
. Bredcolor{color: #fff;}
. envelope{
font:120px Bold ' Arial rounded MT bold '; color: #fff;
position:absolute;top:50%;left:50%;margin-left:-422px;margin-top:-69px;
}
. envelope_site{
-webkit-transform-style:preserve-3d;/* remove the flashing of text */
-webkit-transform:translatey (0px);
-webkit-animation:envelope. 2s ease-in,envelope_top. 7s linear. 2s;
}
. Envelope_site h1{
text-shadow:4px 3px 4px #818181; font-family: ' Arial rounded MT Bold ';
letter-spacing:2px;
-webkit-transform:translatey ( -30px);
-webkit-transition:-webkit-transform. 9s linear 1s;
}
@-webkit-keyframes envelope{
0%{top:0;left:100%;margin-left:0px;margin-top:-69px;-webkit-transform:translatey (0px);}
100%{top:50%;left:50%;margin-left:-276px;margin-top:-69px;-webkit-transform:translatey (0px);}
}
@-webkit-keyframes envelope_top{
0%{-webkit-transform:translatey (0px);}
20%{-webkit-transform:translatey ( -80px);}
40%{-webkit-transform:translatey (0px);}
60%{-webkit-transform:translatey ( -30px);}
80%{-webkit-transform:translatey (0px);}
90%{-webkit-transform:translatey ( -10px);}
100%{-webkit-transform:translatey (0px);}
}
</style>
<div><a href= "http://www.999jiujiu.com/" >http://www.999jiujiu.com/</A></div>
<section class= "Envelope envelope_site" id= "envelope" >
</section>
</body>
Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.
CSS3 using transform attribute to make JS elastic motion