CSS3--动态实现ToolTip效果(实例)
效果图如下↓↓↓↓↓ (知识点见代码注释)
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3实现鼠标悬停显示消息提示框</title>
<meta http-equiv="X-UA-compatible" contnet="IE=edge">
<meta name="viewport" content="width=device-width" initial-scale="1">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
</head>
<body>
<div class="nav">
<ul>
<li>
<a href="#" class="tooltip tooltip-effect-1">Home
<!-- 应用SVG做背景图片 -->
<span class="tooltip-content">
<!-- 应用文字图片,fa:Icon公共类; fa-camera:相机Icon; fa-fw:使i标签display:block; fa-spin:Icon动画效果; fa-border:Icon具有圆角边框; -->
<i class="fa fa-camera fa-fw"></i>
</span>
</a>
</li>
<li>
<a href="#" class="tooltip tooltip-effect-2">About me
<span class="tooltip-content"><i class="fa fa-heartbeat fa-fw"></i></span>
</a>
</li>
<li>
<a href="#" class="tooltip tooltip-effect-3">Photography
<span class="tooltip-content"><i class="fa fa-diamond fa-fw"></i></span>
</a>
</li>
<li>
<a href="#" class="tooltip tooltip-effect-4">Work
<span class="tooltip-content"><i class="fa fa-cogs fa-fw"></i></span>
</a>
</li>
<li>
<a href="#" class="tooltip tooltip-effect-5">Contact
<span class="tooltip-content"><i class="fa fa-comments fa-fw"></i></span>
</a>
</li>
</ul>
</div>
</body>
</html>
CSS
html {
width:100%;
height:100%;
/*屏幕旋转时文字大小不发生改变;*/
-webkit-text-size-adjust:none;
}
body {
margin:;
padding:;
width:100%;
height:100%;
background: #47c9af;
color:#74777b;
font-weight:;
font-size: 1.5em;
font-family:"Raleway","Arial";
}
ul {
list-style: none;
padding:;
margin:;
}
a:link,a:visited,a:focus {
text-decoration: none;
outline: none;
}
*,*:after,*:before {
/*padding(填充)和border(边框)都不要影响盒子原先设定的大小;*/
-webkit-box-sizing:border-box;
}
*:after,*:before {
display: block;
content:"";
}
/*清除浮动*/
*:after {
clear:both;
}
/*Navgaitor*/
.nav {
width:800px;
height:300px;
margin:200px auto;
}
.nav li {
display: inline-block;
margin:0 1em;
}
.tooltip {
display: inline-block;
font-weight:;
color:rgba(0,0,0,0.3);
padding:0.15em 0.25em 0 0;
position: relative;
z-index:;
transition: 0.4s;
}
.tooltip:hover {
color:rgba(255,255,255,1);
}
.tooltip-content {
position: absolute;
z-index:;
width:80px;
height:80px;
/*span相对于父元素a垂直居中:
left:50%;span的左侧距离a的左侧是a宽度一半的距离;
margin-left:-40px;左移相对于自身宽度的一半;
bottom:100%;span的底部距离a的底部是a高度一倍的距离,刚好在a的正上方;
*/
left:50%;
margin-left: -40px;
bottom:100%;
margin-bottom: 20px;
text-align: center;
padding-top: 22px;
/*应用svg文件做背景图片;*/
background:url(../img/tooltip1.svg) no-repeat center center;
opacity:;
transition: 0.4s;
}
.tooltip-content i {
font-style: normal;
font-size: 30px;
color:#47c9af;
opacity:;
transition: 0.3s;
}
.tooltip-effect-1 .tooltip-content {
/*
translate3d(0,10px,0):元素沿Y轴向下移动10px;
rotate3d(1,1,1,45deg):元素分别在X轴,Y轴和Z轴旋转45°;
transform-origin:50% 100%;元素以本身计算出的位置为中心点;
*/
transform: translate3d(0,10px,0) rotate3d(1,1,1,45deg);
transform-origin :50% 100%;
}
.tooltip-effect-1 .tooltip-content i {
/*
元素在X轴和Y轴上缩放0倍(最小化),在Z轴缩放1倍(不缩放);
*/
transform:scale3d(0,0,1);
}
.tooltip-effect-2 .tooltip-content {
transform: translate3d(0,20px,0);
}
.tooltip-effect-2 .tooltip-content i {
transform:translate3d(0,15px,0);
}
.tooltip-effect-3 .tooltip-content {
transform:translate3d(0,10px,0) rotate3d(0,1,0,90deg);
transform-origin:50% 100%;
}
.tooltip-effect-3 .tooltip-content i {
transform:scale3d(0,0,1);
}
.tooltip-effect-4 .tooltip-content {
transform:translate3d(0,-20px,0);
}
.tooltip-effect-4 .tooltip-content i {
transform:translate3d(0,20px,0);
}
.tooltip-effect-5 .tooltip-content {
transform:scale3d(0,0,1);
transform-origin:50% 100%;
}
.tooltip-effect-5 .tooltip-content i {
transform:translate3d(0,20px,0);
}
/*划过效果,所有效果归位0;*/
.tooltip:hover .tooltip-content,
.tooltip:hover .tooltip-content i {
opacity:;
transform:translate3d(0,0,0) rotate3d(1,1,1,0) scale3d(1,1,1);
}
注:Icon字体引用自 Font Awesome Icons 下载链接 课程链接
svg文件(复制以下代码到编辑器,然后保存文件后缀名为.svg)
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 80 90" enable-background="new 0 0 80 90" xml:space="preserve">
<g>
<path fill="#FFffff" d="M39.8,89.5c0,0.2,0.4,0.2,0.4,0c1.2-6.7,7.4-11.8,14.8-11.8H25C32.4,77.7,38.6,82.8,39.8,89.5z"/>
<circle fill="#FFffff" cx="40" cy="40.3" r="40"/>
</g>
</svg>
CSS3--动态实现ToolTip效果(实例)的更多相关文章
- Silverlight动态生成控件实例
刚学习Silverlight,做了一个动态创建控件的实例 实现结果:根据已有的控件类名称,得到控件的实例化对象 实现思路1:就是定义一个模板文件,将类名做为参数,在silverlight中使用Srea ...
- CSS3实现时间轴效果
原文:CSS3实现时间轴效果 最近打开电脑就能看到极客学院什么新用户vip免费一个月,就进去看看咯,这里就不说它的课程怎么滴了,里面实战路径图页面看到了这个效果: 有点像时间轴的赶脚,而且每一块鼠标悬 ...
- 基于CSS3动态背景登录框代码
基于CSS3动态背景登录框代码.这是一款基于jQuery+CSS3实现的带有动画效果的动态背景登陆框特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class ...
- jQuery动态星级评分效果实现方法
本文实例讲述了jQuery动态星级评分效果实现方法.分享给大家供大家参考.具体如下: 这里的jQuery星级评分代码,是大家都很喜欢的功能,目前广泛应用,本星级评分加入了动画效果,注意,如果要真正实现 ...
- AS3实现ToolTip效果
AS3核心类中没有ToolTip类,Flex中的ToolTip类没法用在AS3工程中,Aswing的JToolTip不错,不过如果仅仅为了使用这一个类而导入Aswing就不太明智了.由于最近的项目需要 ...
- jQuery+PHP+Ajax动态数字统计展示实例
jQuery+PHP+Ajax实现的一款动态数字统计展示实例,本例是在页面上动态展示了当前在线用户数,当然了,你可以应用到其他更多场景中. 首先我们在#number放置要统计的数字: <div ...
- css3图片模糊过滤效果
css3图片过滤效果,鼠标放上后其它图片模糊,鼠标所在位置的图片是清淅的,有效索引出当前的图片,对图片的模糊处理是本特效的亮点,你完全可以将模糊的效果应用于其它的图片特效中,你同样也可借此代码研究一下 ...
- 基于css3的轮播效果
花了一上午来调整页面在ie10上的显示问题,sass编译生成的css文件在ie内核下一直不能正确加载,果然兼容性的问题还需要好好研究.转入正题,用css3实现轮播效果主要是基于css3的framewo ...
- 24个 HTML5 & CSS3 下拉菜单效果及制作教程
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...
随机推荐
- .net+mssql制作抽奖程序思路及源码
近期一直在研究数据库,刚好有个项目要做抽奖程序,恩,拿来练练手吧. 抽奖程序: 思路整理,无非就是点一个按钮,然后一个图片旋转一会就出来个结果就行了,可这个程序的要求不是这样的,是需要从数据库中随机抽 ...
- WPF 之 自定义窗体标题栏
在WPF中自定义窗体标题栏,首先需要将窗体的WindowStyle属性设置为None,隐藏掉WPF窗体的自带标题栏.然后可以在窗体内部自定义一个标题栏. 例如,标题栏如下: <WrapPanel ...
- 使用get方式提交数据
get提交代码 import java.io.InputStream; import java.net.HttpURLConnection; import java.net.MalformedURLE ...
- IOS 沙盒机制 && 关于document\library\tmp的灵活使用
默认情况下,每个沙盒含有3个文件夹:Documents, Library 和 tmp.因为应用的沙盒机制,应用只能在几个目录下读写文件Documents:苹果建议将程序中建立的或在程序中浏览到的文件数 ...
- [Java] SSH框架笔记_框架分析+环境搭建+实例源码下载
首先,SSH不是一个框架,而是多个框架(struts+spring+hibernate)的集成,是目前较流行的一种Web应用程序开源集成框架,用于构建灵活.易于扩展的多层Web应用程序. 集成SSH框 ...
- [xPlugins] 开发中常用富文本编辑器介绍
富文本编辑器学习,常见富文本编辑器有: CKeditor(FCkeditor).UEditor(百度推出的).NicEdit.KindEditor CKEditor 即 FCKEditor FCKed ...
- [WinForm] TableLayoutPanel和FlowLayoutPanel的使用
这篇文章主要跟大家分享下,在配餐系统的开发中,对tableLayoutPanel 和 flowLayoutPanel 控件的使用方法和技巧 ——后附上 测试demo, 相信需要的朋友下载看后能很快的知 ...
- 10个实用的但偏执的Java编程技术
在沉浸于编码一段时间以后,你会渐渐对这些东西习以为常.因为,你知道的-- 任何事情有可能出错,没错,的确如此. 这就是为什么我们要采用"防御性编程",即一些偏执习惯的原因.下面是我 ...
- c#入门实例
1.概述 C#是一个语言,.net是一个平台,上面支持用C#或者VB.Net写代码 2.注释 若注释量较少用 // 开头,大量用 /* */ 表示 输出结果 3.命名空间 所谓n ...
- Oracle基础<5>--触发器
一.触发器 触发器是当特定事件出现时自动执行的代码块.比如,每次对员工表进行增删改的操作时,向日志表中添加一条记录.触发器和存储过程是由区别的:触发器是根据某些条件自动执行的,存储过程是手动条用的. ...