效果不錯的冒泡式提示資訊框特效

標籤：style   blog   http   color   os   io   for   ar   

純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資訊，氣泡效果