漂亮的CSS提示框 | 菜鸟工具

​x
 
<!DOCHTML>
  <html>
    <head>
      <meta charset="utf-8" >
      <tittle></tittle>
      <style>
        .wrapper
        {
          background:#ececec;
          position:relative;
          text-align:center;
          margin:100px;
          width: 200px;
          padding-top:10px;
          padding-bottom:10px;
          font-size:20px;
        }
        .tooltip
        {
          position:absolute;
          bottom:100%;
          background: #1496bb;
          padding-top:10px;
          padding-bottom:10px;
       width:100%;
          margin-bottom:15px;
          color:#fff;
          opacity:0;
          -webkit-transform: translateY(10px);
     -moz-transform: translateY(10px);
      -ms-transform: translateY(10px);
       -o-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: all .30s ease-out;
     -moz-transition: all .30s ease-out;
      -ms-transition: all .30s ease-out;
       -o-transition: all .30s ease-out;
          transition: all .30s ease-out;
             -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0,0.28);
     -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0,0.28);0.28);0.28);
       -o-box-shadow: 2px 2px 6px rgba(0, 0, 0,0.28);0.28);
          box-shadow: 2px 2px `6px rgba(0, 0,0.28);
        }
        .tooltip:after
        {
          content:"";
          border:solid;
          position:absolute;
          left:50%;
          top:100%;
          border-width:5px;
          border-color:#1496bb transparent transparent transparent;
       
        }
        
        
        .wrapper:hover .tooltip
        {
          opacity:1;
          -webkit-transform: translateY(0px);
     -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
       -o-transform: translateY(0px);
          transform: translateY(0px);
          
        }
      </style>
    </head>
    <body>
      <div class="wrapper">
        I have a tool
        <div class="tooltip">
          这只是一个提示框
        </div>
      </div>
    </body>
  </html>
HTML