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;}

posted @ 2016-05-04 23:00 伊甸一点阅读(8153) 评论(0) 编辑收藏举报

刷新页面返回顶部

伊甸一点

温一杯咖啡，敲一段代码

HTML5气泡悬浮框(已经加上完整文件)

公告