首页 > 代码库 > 效果不错的冒泡式提示信息框特效

效果不错的冒泡式提示信息框特效

纯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信息,气泡效果