HTML5氣泡懸浮框(已經加上完整文件)

本文轉載自查看原文 2016-05-04 23:00 2666 HTML5/ 前端學習

源文件鏈接:https://pan.baidu.com/s/1M7j41_OWGpD8ddgXwbO8kg 密碼:b7vr

設計氣泡懸浮框

1.在網頁設計中，氣泡懸浮框常常用於頁面中為某些對象顯示提示信息，恰當地使用氣泡懸浮框能夠使網頁布局更加完美，使網頁看上去更漂亮、美觀；

2.一般而言，替換文本使用alt屬性來呈現，說明性文本通過title屬性來實現，這兩個屬性是HTML默認提供的功能，在網頁設計中使用它們，容易引起用戶的反感；

3.在這種情況下，使用氣泡懸浮框能夠產生不一樣的視覺體驗。

下面使用氣泡懸浮框來設計網頁中的替代文本與說明文本。

設計過程：

（一）設計網頁布局

使用Balsamiq Mockups工具將網頁布局描繪出來，如下圖所示。

(二)編寫HTML5代碼

我們將標題設置為: Fade in/out Tooltip Design, CSS3 & jQuery

但是在這里需要注意"字符實體"

如果要顯示& 那么實體名稱為& 實體編號&

其他字符實體見下表：

下面添加<a>並設置class 和 href.在<a>標簽內插入<div>標簽

<a class="tooltip photo1" href="http://yamoo9.com/?p=699">
    <div class="tooltip-box">
        <h4 class="tooltip-title">在嘉平地區登上擺渡船</h4>
        <p class="tooltip-desc">2011年8月20日清晨10點40分，從上風站乘地鐵趕往嘉平站。事實上，這次旅行......</p>
    </div>
</a>

添加其他的<a>標簽：

<a class="tooltip photo1" href="http://yamoo9.com/?p=699">
    <div class="tooltip-box">
        <h4 class="tooltip-title">在嘉平地區登上擺渡船</h4>
        <p class="tooltip-desc">2011年8月20日清晨10點40分，從上風站乘地鐵趕往嘉平站。事實上，這次旅行......</p>
    </div>
</a>
</li>
<li>
<a class="tooltip photo2" href="http://yamoo9.com/?p=699">
    <div class="tooltip-box">
        <h4 class="tooltip-title">Artnuvo's drawing</h4>
        <p class="tooltip-desc">Art Student Lengue of NewYork位於紐約曼哈頓區，培養了大批世界級的藝術家。讓我們一起
            鑒賞金惠景老師在那兒繪畫的傑作!</p>
    </div>
</a>
</li>
<li>
<a class="tooltip photo3" href="http://yamoo9.com/?p=699">
    <div class="tooltip-box">
        <h4 class="tooltip-title">Adobe Creator -ACL Yamoo</h4>
        <p class="tooltip-desc">最近出現了一些非常引人關注的字眼，如"贈"、"分享"等。ACL Yamoo積極響應這場運動，
            開放了“開放知識講座”項目，跟大家一起分享知識</p>
    </div>
</a>

（三）編寫CSS3樣式表

1.控制body樣式

body{
    padding: 150px;
    background: #2b2b2b url(../images/bg_tile.jpg);
}

2.設置標題字體樣式

h1{
    margin-bottom: 40px;
    font-family: 'Lato',Sans-Serief;
    color:#fff;
}

同時需要在CSS代碼前加上字體應用

@import url(http://fonts.googleapis.com/css?family=Lato:100);

3.控制圖片樣式

a.tooltip{
    position: relative;
    display:block;
    width:100px;
    height:100px;
    border:5px solid #4b4b4b;
    background:#fff no-repeat center;
}

同時設置.gallery-nav內的li元素

.gallery-nav li{
    float:left;
    margin-right:100px;
}

下面分別為控制a.tooltip、a.tooltip.photo1(photo2 / photo3)的樣式

a.tooltip{
    border-radius:55px;
    -webkit-border-radius:55px;
    -khtml-border-radius:55px;
    -moz-border-radius:55px;

}
a.tooltip.photo1{
    background-image: url(../images/sussjini-bbo.jpg);
}
a.tooltip.photo2{
    background-image: url(../images/khk-artwork.png);
}
a.tooltip.photo3{
    background-image: url(../images/interview-yamoo9.png);
}

4.控制氣泡懸浮框1：基本樣式、位置、添加圓角與尾巴並制作Transition動畫

a.tooltip .tooltip-box {
    opacity:0;
    position: absolute;
    left:50%;
    bottom:100px;
    width:20em;
    margin-left:-10.4em;
    padding:.8em;
    background:#111;
    -webkit-border-radius:15px 0px;
    -khtml-border-radius:15px 0px;
    -o-border-radius:15px 0px;
    border-radius:15px 0px;
    
    -webkit-transition:all .4s ease-in .3s;
    -moz-transition:all .4s ease-in .3s;
    -o-transition:all .4s ease-in .3s;
    -ms-transition:all .4s ease-in .3s;
    transition:all .4s ease-in .3s;
}

a.tooltip:hover .tooltip-box, 
a.tooltip:focus .tooltip-box {
    opacity: 1;
    bottom: 90px;
}
a.tooltip .tooltip-box:before {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 120px;
    border-top: 10px solid #111;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}

a.tooltip .tooltip-title {
    color:#fff;
}
a.tooltip.tooltip-desc{
    margin-bottom:0;
    font-size:11px;
    text-align:justify;
    color:#bcbcbc;
}

下面給出完整代碼：

<!DOCTYPE html>
<!--[if IE 6]><html lang="zh" class="no-js old ie6"><![endif]-->
<!--[if IE 7]><html lang="zh" class="no-js old ie7"><![endif]-->
<!--[if IE 8]><html lang="zh" class="no-js old ie8"><![endif]-->
<!--[if IE 9]><html lang="zh" class="no-js modern ie9"><![endif]-->
<!--[if !IE]><!--><html lang="zh" class="no-js modern"><!--<![endif]-->
<head>
<meta charset="utf-8" />
<title>CSS3 Tooltip Design - 淡入/淡出提示工具設計</title>
<link rel="stylesheet" href="css/tooltip.css" />
<script src="js/jquery.min.js"></script>
<script src="js/tooltip.js"></script>
</head>
<body>
<h1> Fade in/out Tooltip Design, CSS3 &amp;jQuery</h1>
<ul class="gallery-nav">
<li>
<a class="tooltip photo1" href="http://yamoo9.com/?p=699">
    <div class="tooltip-box">
        <h4 class="tooltip-title">在嘉平地區登上擺渡船</h4>
        <p class="tooltip-desc">2011年8月20日清晨10點40分，從上風站乘地鐵趕往嘉平站。事實上，這次旅行......</p>
    </div>
</a>
</li>
<li>
<a class="tooltip photo2" href="http://yamoo9.com/?p=699">
    <div class="tooltip-box">
        <h4 class="tooltip-title">Artnuvo's drawing</h4>
        <p class="tooltip-desc">Art Student Lengue of NewYork位於紐約曼哈頓區，培養了大批世界級的藝術家。讓我們一起
            鑒賞金惠景老師在那兒繪畫的傑作!</p>
    </div>
</a>
</li>
<li>
<a class="tooltip photo3" href="http://yamoo9.com/?p=699">
    <div class="tooltip-box">
        <h4 class="tooltip-title">Adobe Creator -ACL Yamoo</h4>
        <p class="tooltip-desc">最近出現了一些非常引人關注的字眼，如"贈"、"分享"等。ACL Yamoo積極響應這場運動，
            開放了“開放知識講座”項目，跟大家一起分享知識</p>
    </div>
</a>
</li>
</body>
</html>

完整CSS代碼：

@charset "utf-8";
@import "reset.css";
@import url(http://fonts.googleapis.com/css?family=Lato:100);
/* tooltip.css - ToolTip設計樣式, 2012 © yamoo9.com
---------------------------------------------------------------- */
body{
    padding: 150px;
    background: #2b2b2b url(../images/bg_tile.jpg);
}

h1{
    margin-bottom: 40px;
    font-family: 'Lato',Sans-Serief;
    color:#fff;
}

.gallery-nav li{
    float:left;
    margin-right:100px;
}

a.tooltip{
    position: relative;
    display:block;
    width:100px;
    height:100px;
    border:5px solid #4b4b4b;
    background:#fff no-repeat center;
    background-size:cover;
    
    border-radius:55px;
    -webkit-border-radius:55px;
    -khtml-border-radius:55px;
    -moz-border-radius:55px;
    
    -webkit-transition:all .4s ease-in .3s;
    -moz-transition:all .4s ease-in .3s;
    -o-transition:all .4s ease-in .3s;
    -ms-transition:all .4s ease-in .3s;
    transition:all .4s ease-in .3s;
}
a.tooltip:hover,
a.tooltip:focus{
    border-color:#fff;
}

a.tooltip .tooltip-box {
    opacity:0;
    position: absolute;
    left:50%;
    bottom:100px;
    width:20em;
    margin-left:-10.4em;
    padding:.8em;
    background:#111;
    -webkit-border-radius:15px 0px;
    -khtml-border-radius:15px 0px;
    -o-border-radius:15px 0px;
    border-radius:15px 0px;
    
    -webkit-transition:all .4s ease-in .3s;
    -moz-transition:all .4s ease-in .3s;
    -o-transition:all .4s ease-in .3s;
    -ms-transition:all .4s ease-in .3s;
    transition:all .4s ease-in .3s;
}

a.tooltip:hover .tooltip-box, 
a.tooltip:focus .tooltip-box {
    opacity: 1;
    bottom: 90px;
}
a.tooltip .tooltip-box:before {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 120px;
    border-top: 10px solid #111;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}

a.tooltip .tooltip-title {
    color:#fff;
}
a.tooltip.tooltip-desc{
    margin-bottom:0;
    font-size:11px;
    text-align:justify;
    color:#bcbcbc;
}

a.tooltip.photo1{
    background-image: url(../images/sussjini-bbo.jpg);
}
a.tooltip.photo2{
    background-image: url(../images/khk-artwork.png);
}
a.tooltip.photo3{
    background-image: url(../images/interview-yamoo9.png);
}

.clearfix:after{
    content:"";
    display: block;
    clear:both;
}
.ie6.clearfix{height:1px;}
.ie7.clearfix{min-height:1px;}

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 html5 懸浮提示框 html5懸浮球效果 HTML5實現對話氣泡動畫方法 HTML5設計網頁熔岩燈導航（navigation bar）插件已經加上完整源代碼 HTML5實現微信聊天氣泡效果【HTML5】實現QQ聊天氣泡效果 html5

的完整屬性 HTML5 文件上傳 HTML5 文件上傳 html5之文件操作