首页 > 代码库 > 效果不错的冒泡式提示信息框特效
效果不错的冒泡式提示信息框特效
纯css打造 预览demo:纯css3冒泡式提示信息框特效
css代码:
<style type="text/css"> body{ background:#D6D3C9; color:#383835; font-family:Arial, Arial, Helvetica, sans-serif; } #bubblemenu li { display: inline; margin-left: 15px; cursor:pointer; } #bubblemenu li > div { width: 150px; min-height: 100px; position: absolute; display: inline; margin-left: -120px; padding: 5px; visibility:hidden; opacity: 0; margin-top: -125px; background: #ffffff; font-size:1em; /* Setting the border-radius property for all Browsers */ -moz-border-radius: 5px; /* Firefox */ -webkit-border-radius: 5px; /* Safari and Chrome */ border-radius: 5px; /* Browsers that Support it like Opera */ /* Setting the box-shadow property for all Browsers */ -moz-box-shadow: 0 0 8px gray; /* Firefox */ -webkit-box-shadow: 0 0 8px gray; /* Safari and Chrome */ filter: progid:DXImageTransform.Microsoft.Shadow(color=‘#272229‘, Direction=135, Strength=3); /* IE */ box-shadow: 0 0 8px gray; /* Browsers that Support it like Opera */ /* Setting the transition property for all Browsers */ -moz-transition: all 0.5s ease-in-out; /* Firefox */ -webkit-transition: all 0.5s ease-in-out; /* Safari and Chrome */ -o-transition: all 0.5s ease-in-out; /* Opera */ transition: all 0.5s ease-in-out; /* Browsers that Support it */ } #bubblemenu li:hover > div { visibility:visible; opacity: 1; margin-top: -150px; /* Setting the transition property for all Browsers */ -moz-transition: all 0.5s ease-in-out; /* Firefox */ -webkit-transition: all 0.5s ease-in-out; /* Safari and Chrome */ -o-transition: all 0.5s ease-in-out; /* Opera */ transition: all 0.5s ease-in-out; /* Browsers that Support it */ } </style>
html代码:
<ul id="bubblemenu"> <li> Penn Jillett <div> My favorite thing about the Internet is that you get to go into the private world of real creeps without having to smell them. </div> </li> <li> Thomas Watson <div> I think there is a world market for maybe five computers. </div> </li> <li> Bill Gates <div> 640K ought to be enough for anybody. </div> </li> <li> Sam Ewing <div> Computers are like bikinis. They save people a lot of guesswork. </div> </li> </ul>
主要效果是移动到li标签上,实现显示起tip信息,气泡效果
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。