CSS3-tooltip提示框動畫提示框

阿新 • • 發佈：2018-12-29

程式碼複製到本地可以直接看到效果

效果在這：
這裡寫圖片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    /*清除預設樣式*/
    html, body, h1, h2, h3, h4, h5, h6, form, fieldset,div,dl,dt,dd,ul,ol,li,input,button,textarea,p,th 
,td,a,img ,strong{border:0; margin:0px; padding:0px;}
    body, input, button, select, td, th, textarea{ font-family:"Microsoft YaHei"; font-size:12px; color: #000;}
    h1, h2, h3, h4, h5, h6{font-size:100%; font-weight: normal;}
    li{list-style-type:none;}
    img,input{vertical-align:middle;}
    img{ max-width 
: 100%; }
    cite,em{ font-style:normal;}
    img{ max-width: 100%;}
    a{text-decoration:none; color: #000;}
    a:hover{text-decoration:none;}
    a img{border: none;}
    .clear{clear:both; font:0px/0px sans-serif; display:block;}
    .cfix:after{content:".";visibility:hidden;display:block;clear:both;height 
:0;}
    .cfix{zoom:1;}
    .none, .dropMenu li dl{ display: none;}
    .fLeft, .dropMenu li,  .navBar li{float:left;}
    .fRight, .bq_footer ul li{float:right;}

    .box{
        width: 300px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -150px;
        margin-top: -83px;
        padding: 20px;
        border: 1px solid #ccc;
    }

    .box .cul_title_h4{
        display: inline-block;
        border-bottom: 2px solid #0d6cbf;
        padding: 4px 0;
        margin-bottom: 10px;
    }

    .box .labelList li{
        width: 33.3333%;
        float: left;
        position: relative;
    }

    .box .labelList li a{
        box-sizing: border-box;
        color: #666;
        display: block;
        margin-right: 6px;
        background-color: #fafafa;
        padding: 4px 8px;
        height: 28px;
        border-left: 1px solid #ededed;
        overflow: hidden;
        line-height: 20px;
        transition: all linear .218s;
    }

    .box .labelList li a:hover{
        background-color: #0d6cbf;
        border-left: 4px solid #fed426;
        color: #fff;
    }

    .box .labelList li .tooltip{
        display: block;
        opacity: 0;
        border-radius: 10px;
        background-color: rgba(0,0,0,0.8);
        color: #fff;
        position: absolute;
        left: -4px;
        bottom: 100%;
        width: 100%;
        padding: 5px 2px;
        margin-bottom: 15px;
        text-align: center;
        font-size: 14px;
        /*設定Y軸上的位移，使其產生飛入效果*/
        transform: translateY(10px);
        -webkit-transform: translateY(10px);
        -moz-transform: translateY(10px);
        -ms-transform: translateY(10px);
        -o-transform: translateY(10px);
        /*設定過渡動畫，過渡時間為0.25秒，過渡形式為加速過渡*/
        transition: all .25s ease-in;
        -webkit-transition: all .25s ease-in;
        -moz-transition: all .25s ease-in;
        -ms-transition: all .25s ease-in;
        -o-transition: all .25s ease-in;
    }

    .box .labelList li .tooltip:after{
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-top:8px solid rgba(0,0,0,0.8);
        position: absolute;
        left: 50%;
        bottom: -8px;
        width: 0;
        height: 0;
        content: "";
        margin-left: -8px;
    }
</style>
<body>

<div class="box">
    <h4 class="cul_title_h4">熱門標籤</h4>
    <ul class="labelList cfix">
        <li><a href="#">JavaScript</a><div class="tooltip">108個話題</div></li>
        <li><a href="#">jQuery</a><div class="tooltip">108個話題</div></li>
        <li><a href="#">CSS3</a><div class="tooltip">108個話題</div></li>
    </ul>
</div>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    $(".box .labelList li a").hover(function () {
        $(this).next(".tooltip").css({"opacity":"1","transform":"translateY(0px)"});
    }, function () {
        $(this).next(".tooltip").css({"opacity":"0","transform":"translateY(10px)"});
    })
</script>
</html>

有什麼不足，歡迎大神們指正哈

CSS3-tooltip提示框動畫提示框

程式碼複製到本地可以直接看到效果效果在這： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></ti

CSS3之ToolTip------飛入動畫提示框

1.效果預覽 2.實現思路 (1)首先整個效果由兩部分組成，即兩個div，底部為容器，藍色部分為其子元素 (2)通過position：absolute將tooltip定位於灰色區域的頂部

CSS3滑鼠放上按鈕懸浮框提示效果

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" c

純JS、CSS3實現高仿IOS訊息alert彈窗（警告框，確認框，提示框）。老鐵們，沒毛病。

簡潔，大方的ios彈窗風格。網上有很多關於alert 彈窗的栗子可以借鑑使用。本文章主要應用在移動端上面的彈窗實現。在專案沒有應用到其他框架彈窗的基礎上，此例項應該可以滿足大部分彈窗上的要求,可直接應用於專案之中。使用方法： 1、引入依賴的樣式檔案和指

替代alert的消息框和提示框

模式 back -h div osi lose body 由於 conf 　　alert提示框由於外觀不太友好，所以一般都不用alert了。　　我在這裏使用bootstrap的樣式，寫了一個可以單獨顯示消息，也可以確認取消的提示框。　　使用的外觀如下：　　一：單獨顯示

高級控件【安卓5】——信息提示框、對話框

make 安卓 com log list 股市 message bundle gif Toast信息提示框 1 Button bt1=(Button)findViewById(R.id.Tbt01); 2 Button bt2=(Button)findViewByI

js彈出框、對話框、提示框、彈窗總結

js彈出框、對話框、提示框、彈窗總結一、JS的三種最常見的對話框//====================== JS最常用三種彈出對話框 ======================== //彈出對話框並輸出一段提示信息 function ale() { /

Jquery 搜索框自動提示

complete 提示返回下拉 bsp tco on() 數據庫查詢 AR 為文本框增加自動提示下拉功能，比如輸入 1，則從後臺數據庫查詢出包含1 的字段，在文本框增加下拉列表供用戶選擇 ajax 返回數據為搜索查詢字段的json集合 <script sr

文本框內容提示效果

element blur js實現 () 文本框 ext 消失由於顯示文本內容提示效果，未輸入內容時顯示文本內容，點擊輸入時內容後消失，由於是IE8，所以無法利用placeholder實現效果：<input placeholder="提示語"/>，利用j

如何關閉運行Configuration Manager Console時提示檢查更新對話框？

自動 add fff zhang image ble ecb 架構 works 如何關閉運行Configuration Manager Console時提示檢查更新對話框？ ?Lander Zhang 專註外企按需IT基礎架構運維服務，IT Helpdesk 實戰培訓踐行者

含有截止顯示時間的移動端彈框資訊提示外掛

顯示樣式：擴充套件配置項js： /** * modal * elemet 繫結啟用的單機元素 * @param * title {string} 彈框的標題 * content {s

uwp - ContentDialog - 自定義仿iphone提示框，提示框美化

原文: uwp - ContentDialog - 自定義仿iphone提示框，提示框美化為了實現我想要的效果花費了我很長時間，唉，當初英語不好好學，翻官網翻了半天才找到，分享給剛入門的新手。首先看一張圖片示例，我們要模仿的dialog就是長這樣的：

Android 彈出框LemonBubble提示控制元件

簡介：這是一個完全Made in China的炫酷彈出指示層Android版本（-_-#意思就是還有iOS的），他能讓你快速的自定義任何樣式的彈出框最新更新記錄：捕捉了LemonBubble.forceHide()中的空指標異常，保證開發者在onDestroy

視訊網站開發：Ajax非同步實現搜尋輸入框的提示功能

在我們實際專案的開發中，有時候一個小小的功能，可能都需要考慮很長的時間，因為必須把這個小功儘可能的做好做到極致。我的視訊網站從2018年年初做到現在，已經歷經了多半年的時光。由開始的功能單一，只能實現海量視訊的展示及免廣告播放功能；到現在的花樣

Android搜尋框自動提示文字框——（單一提示）

AutoCompleteTextView(單一提示) package com.example.android_06; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import androi

css製作tips提示框，氣泡框，製作三角形

有時候我們的頁面會需要這樣的一些提示框或者叫氣泡框，運用css，我們可以實現這樣的效果。為了實現上面的效果，我們首先要理解如何製作三角形。當我們給一個DIV不同顏色的邊框的時候，我們可以得到下面的效果。 .triangle{ border-top

Android輸入框自動提示進階--自定義佈局

發現Android的有兩種方法AutoCompleteTextView和MultiAutoCompleteTextView提示出來的提示框只是純文字而且是單條資料,要是想實現加一個圖片或者是每一條資料展示兩個資料呢,這就需要重寫介面卡設定佈局了重寫介面卡: packag

Android輸入框自動提示

Android用的有兩種方法AutoCompleteTextView和MultiAutoCompleteTextView,第二種可以連續提示輸入,如下圖 AutoCompleteTextView常用屬性

echarts提示框，提示內容的編輯與自定義

tooltip.formatter string, Function 提示框浮層內容格式器，支援字串模板和回撥函式兩種形式。 1, 字串模板模板變數有 {a}, {b}，{c}，{d}，{e}，分別表示系列名，資料名

javascript彈出瀏覽器的三種提示框：提示資訊框、確認框、輸入文字框

瀏覽器的三種提示框： alert()提示資訊框 confirm()提示確認框 prompt()提示輸入文字框 1、alert()提示資訊框效果: 實現程式碼：

CSS3-tooltip提示框 動畫提示框

程式碼複製到本地可以直接看到效果

相關推薦

CSS3-tooltip提示框動畫提示框