首页 > 代码库 > css3仿制js的弹力效果
css3仿制js的弹力效果
- 使用css3技术仿制的JavaScript弹力效果，其实做这个效果和Js的原理是一样的：就是控制位置和时间，但是不同的是css用transform的translate来控制，其实现的最终是transition。
<!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>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。