不少前端开发者会用到css3特效，今天在做页面时用到了一个上下浮动的效果，分享一下。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div{ background: #639; width: 235px; height: 216px; position: absolute; top: 300px; left: 300px; } /*nimation-delay:1s*/ @keyframes arrow1{ 0%{transform: translateY(0);} 100%{transform: translateY(20px);} } @-webkit-keyframes arrow1{ 0%{-webkit-transform: translateY(0);} 100%{-webkit-transform: translateY(20px);} } .arrow{ animation: arrow1 2s infinite; -webkit-animation: arrow1 2s infinite; animation-timing-function:ease-in-out; -webkit-animation-timing-function:ease-in-out; -webkit-animation-direction:alternate; animation-direction:alternate; } </style> </head> <body> <div> <img src="images/gyy_18.jpg" /> </div> </body> </html>
通过以上代码就能实现。
文汇建站（济南网站建设）为众多客户提供过创新易用的设计方案，有效的提升了产品体验 和客户品牌价值，为用户带来真实的体验提升！用优秀的设计帮助企业创造具有影响力和价值的体验，创造超越竞争对手的品牌竞争力，以深度拓展设计的商业价值， 用设计的的力量使客户实现商业目标，用设计的力量驱动企业的持续发展。
如果您想要了解更多网站建设方面的问题，那么欢迎您咨询文汇建站官网，我们必不会让您失望。文汇建站为企业量身定制企业型、营销型、高端品牌定制型网站，专注于为中小企业提供网站建设、网站制作、网站设计、网站开发等建站服务，助企业发展，赢得市场先机！
文章来自济南网站建设文汇建站，转载请注明出处：http://www.cnwenhui.cn/wenhui-show-841.html
2、本站永久网址：https://www.yuanmacun.com
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
源码村资源网 » 悬浮效果html5(悬浮效果的按钮)
1 评论