不少前端开发者会用到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>
通过以上代码就能实现。
文汇建站(济南网站建设)为众多客户提供过创新易用的设计方案,有效的提升了产品体验 和客户品牌价值,为用户带来真实的体验提升!用优秀的设计帮助企业创造具有影响力和价值的体验,创造超越竞争对手的品牌竞争力,以深度拓展设计的商业价值, 用设计的的力量使客户实现商业目标,用设计的力量驱动企业的持续发展。
如果您想要了解更多网站建设方面的问题,那么欢迎您咨询文汇建站官网,我们必不会让您失望。文汇建站为企业量身定制企业型、营销型、高端品牌定制型网站,专注于为中小企业提供网站建设、网站制作、网站设计、网站开发等建站服务,助企业发展,赢得市场先机!
文章来自济南网站建设文汇建站,转载请注明出处:https://www.cnwenhui.cn/wenhui-show-841.html
2、本站永久网址:https://www.yuanmacun.com
3、本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
4、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
6、本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
源码村资源网 » 如何在网页的左侧放置一个悬浮广告请用css代码阐述(网站右侧悬浮代码html)
1 评论