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

阿新 • • 發佈：2019-01-27

1.效果預覽
這裡寫圖片描述

2.實現思路
這裡寫圖片描述
(1)首先整個效果由兩部分組成，即兩個div，底部為容器，藍色部分為其子元素
(2)通過position：absolute將tooltip定位於灰色區域的頂部
(3)使用transform: translateY()和transition屬性實現平移的過渡動畫效果
(4)初始時，將tooltip的opacity屬性設定為0，即全透明

3.程式碼
(1)wrapper樣式

.wrapper{
            cursor: help;
            position: relative;
            left: 200px 
;
            top: 200px;
            background-color: #ececec;
            color: #000;
            text-align: center;
            width: 200px;
            padding: 15px 40px;
            font-weight: bold;

        }

(2)tooltip樣式

.wrapper .tooltip{
            display: block;
            /*這行必須寫，因為我們只是將tooltip設定為全透明，tooltip並不是真正的消失，所以當滑鼠移至tooltip區域時它會自己彈出*/ 

            pointer-events: none;
            cursor: help;
            /*設定為全透明*/
            opacity: 0;
            background-color: #1496BB;
            color: #fff;
            position: absolute;
            left: -20px;
            bottom: 100%;
            width: 100%;
            padding: 20px;
            margin-bottom 
: 15px;
            /*設定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;
            /*為tooltip新增邊框陰影*/
            box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
            -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);
            -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);

        }

(3)tooltip底部三角形箭頭

.wrapper .tooltip:after{
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-top:10px solid #1496BB; 
            position: absolute;
            left: 50%;
            bottom: -10px;
            width: 0;
            height: 0;
            content: "";
            margin-left: -10px;
        }

(4)為tooltip新增:before，防止滑鼠向上移動到tooltip時，tooltip消失

.wrapper .tooltip:before{
            width: 100%;
            height: 20px;
            position: absolute;
            left: 0;
            bottom: -20px;
            content: "";
        }

(5)為wrapper新增hover響應

.wrapper:hover .tooltip{
            opacity: 1;
            pointer-events: auto;
            transform: translateY(0);
            -webkit-transform: translateY(0);
            -moz-transform: translateY(0);
            -ms-transform: translateY(0);
            -o-transform: translateY(0);
        }

(6)html程式碼

<body>

    <div class="wrapper">
        show a tooltip
        <div class="tooltip">
            this a tooltip
        </div>
    </div>
</body>

最終效果
這裡寫圖片描述

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

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

CSS3-tooltip提示框動畫提示框

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

CSS3 之高級動畫（7）CSS3帶方向箭頭的標註框

ren -c alt adding http css border scale back 效果： html： <h1 class="title-style">Css3 callouts</h1> <div clas

兼容FF和IE的tooltip 鼠標提示框

row fad tro fin use ttr href fall scrip 原文發布時間為：2009-09-07 —— 來源於本人的百度文章 [由搬家工具導入]http://www.walterzorn.de/tooltip/tooltip.htm 【&#

Echarts學習之十八：tooltip提示框

tooltip ={ //提示框元件 trigger: 'item',

Tooltip(提示框)組件

() event easy 允許元素 eas log options troy <!DOCTYPE html> <html> <head> <title>jQuery Easy

EasyUI 學習(1)-Tooltip（提示框）

fun 銷毀跟著 num sel function bsp del trac 一、創建組件 Tooltip不依賴其他組件 1.使用class加載 <a href="#" class="easyui-tooltip" title="這是一個提示信息">Hover

（二）easyUI之消息提示框

onf 間隔 asc sage utf-8 quest easy tle click <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&

jQuery實現加入購物車飛入動畫效果之開發不停，填坑不止（起點位置在Y軸方向位置偏移）

開發時為了完成購物車的飛入拋物線，因為懶惰隨大流使用了fly.js外掛，用的時候遇到的兩個坑坑~~ 1. 有滾動條時，拋物體的起點位置在Y軸方向上有位置偏移，偏大 2. 頁面有滾動條時，拋物體的結束位置不一樣，偏大我：(⊙o⊙)…煩煩的。。。這就是用別人東西的代價。。。。。。不

echarts中tooltip提示框位置控制

option = { title: { text: '折線圖堆疊' }, tooltip: { trigger: 'axis', position: function(point, params, dom, rect,

Extjs之自動消失提示框（Ext example msg）

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！

微信小程式之----載入中提示框loading

微信小程式之----載入中提示框loading wx.json Page({ /** * 頁面的初始資料 */ data: { }, onLoad: function (options) { // 欄目分類請求介面 var lanmu = this;

easyui Tooltip 提示框

通過 $.fn.tooltip.defaults 重寫預設的 defaults。當用戶移動滑鼠指標在某個元素上時，出現提示資訊視窗用來顯示額外資訊。提示內容可以包含任何來自頁面的或者通過 ajax 生成的 html 元素。用法建立提示框（Tooltip） 1、從標記建立提

下一代CSS3之動畫

效果：程式碼： <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>逆水行舟不進則退</title>

CSS3之transition和animation動畫

在寫完css3之變形後，感覺一下子對transform的使用清晰了很多，所以決定再把css3中其他重要新功能也梳理一下。本文將梳理transition和animation動畫功能本文示例中使用到的html結構都是統一的，程式碼如下： <s

ios學習筆記之-點選一個按鈕彈出撥打電話提示框

按鈕的程式碼就不寫了。直接寫主要程式碼。 <key>LSApplicationQueriesSchemes</key> <array> <string>tel</string> <string>telp

css3初體驗之animation簡單動畫例子【來回滑動的小球】

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&g

淺談對Bootstrap的看法之三（提示框和彈出框、滾動監聽、小工具）

1.提示框和彈出框相關說明：提示框和彈出框效果類似。提示框：通過向元素新增 data-toggle="tooltip" 來建立提示框，<a href="#" data-toggle="tooltip" title="我是提示內容!">滑鼠移動到我這</a&g

從零開始學 Web 之 CSS3（六）動畫animation，Web字型

大家好，這裡是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 部落格園：http://www.cnblogs.com/lvonve/ CSDN：https://blog.csdn.net/lvonve/

Discuz!論壇教程之去掉附件圖片提示下載框方法

預設圖片滑鼠移動過去會顯示圖片名和下載，有些Discuz!站長需要讓帖子內容頁面更美觀，可以使用以下辦法去除。模板路徑\template\default\forum\discuzcode.htm 搜尋 <img{if $attach['price'] &&a

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

相關推薦