标签：style blog http color java 使用 os io
<!DOCTYPE HTML> <html lang="en-US"> <head> <title>潜水射流曝气机</title>
</head> <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;/* 去除文字的闪动 */ -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> <section class="tips"> <p class="bredcolor">css3小技巧:</p> 其实做这个效果和js的原理一样:就是控制位置和时间<br> 但是不同的是css用transform的translate来控制,其实现的最终一把手是transition。<br> </section> <section class="envelope envelope_site" id="envelope"> <h1>css3tra<span class="i_hiden">i</span>n</h1> </section> </body> </html>
标签：style blog http color java 使用 os io
原文地址：http://www.cnblogs.com/youtianxia/p/3914402.html
