純CSS3進行hover時顯示帶箭頭和動畫的tips效果

因爲sg沒有關聯獲取它站文章的功能,把本身的原創博客給搬來給新手提供點簡單教程.
效果圖:當鼠標放在ps,ai上顯示對應的內容.

流程分析:鼠標移動顯示提示,鼠標在父層(內有顯示和隱藏層)時,隱藏層進行動畫顯示.區別於平常的hover,咱們用盡可能少的html和css代碼達到理想的狀態.
這裏邊有個很容易被帶到溝裏的一個小地方,常常有人問怎麼作出三角形?其實那不過是個旋轉了45°的正方形.

---

html:

<div class='box'>
<a href='' class='box_title'>滑動層</a>
<div class='box_content'>內容層</div>
</div>

---

css:

/*三角形*/
.box>.box_content:before {
    position: absolute;
    top: -4px;
    left: calc(50% - 5px);
    width: 10px;
    height: 10px;
    background: #fff;
    box-shadow: -2px -2px 0 -1px #c4c4c4;
    content: "";
    transform: rotate(45deg)
}
/*自適應居中*/
.box>.box_content{
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 3;
    visibility: hidden;
    padding: 10px;
    height: auto;
    min-height: 12px;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
    color: #6f6f6f;
    font-size: 12px;
    opacity: 0;
    transition: visibility 0s linear .2s,opacity .2s linear 0s;
    transform: translateX(-50%);
    backface-visibility: visible!important;
    backface-visibility: hidden;
}
/*hover效果*/
.box:hover>.box_content{
    visibility: visible;
    opacity: 1;
    transition: visibility 0s linear 0s,opacity .4s linear;animation: fade-top;animation-duration:.4s;-webkit-animation:fade-top .4s;}
/*hover動畫*/
@keyframes fade-top{0%{opacity:.1;top:120%}100%{opacity:1;top:100%}}@-webkit-keyframes fade-top{0%{opacity:.1;top:120%}100%{opacity:1;top:100%}}

在ff,chrome,ie11測沒有問題,其他支持css3瀏覽器沒時間測.歡迎反饋.
下一篇有空再簡介一下jquery相關.