CSS3鼠标滑过tip提示框动画特效

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 CSS3鼠标滑过tip提示框动画特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>：CSS3鼠标滑过tip提示框动画特效 </title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />

</head>
<body>
<div id="container">
	<div class="item">
		<h1>D</h1>
		<div class="tooltip">
			<p>Find important documents and manuals.</p>
			<div class="arrow"></div>
		</div>
	</div>
</div>
<div class="item">
	<h1>A</h1>
	<div class="tooltip">
		<p>Take a look at our crew and become a friend.</p>
		<div class="arrow"></div>
	</div>
</div>
<div class="item">
	<h1>C</h1>
	<div class="tooltip">
		<p>Explore our process and see how we can help.</p>
		<div class="arrow"></div>
	</div>
</div>
</body>
</html>

CSS代码(style.css):

@font-face{font-family:'HeydingsCommonIconsRegular';src:url('font/heydings_icons-webfont.eot');src:url('font/heydings_icons-webfont.eot?#iefix') format('embedded-opentype'),url('font/heydings_icons-webfont.woff') format('woff'),url('font/heydings_icons-webfont.ttf') format('truetype'),url('font/heydings_icons-webfont.svg#HeydingsCommonIconsRegular') format('svg');font-weight:normal;font-style:normal;}
*{margin:0;padding:0;}
body{background:#e7e7e7;}
#container{width:400px;margin:100px auto 0 auto;}
.item{width:100px;height:100px;margin:15px;background:#73a058;float:left;border-radius:50px;}
h1{font-family:'HeydingsCommonIconsRegular',sans-serif;font-weight:normal;margin:30px 0 0 0;color:#fff;text-align:center;font-size:60px;line-height:30px;}
.tooltip p{font-family:sans-serif;font-size:14px;font-weight:300;}
.tooltip{width:120px;padding:10px;border-radius:3px;position:absolute;box-shadow:1px 1px 10px 0 #ccc;margin:-500px 0 0 -20px;background:#fff;-webkit-transition:margin .5s ease-in-out;-moz-transition:margin .5s ease-in-out;}
.item:hover{background:#6d643b;}
.item:hover .tooltip{margin:-145px 0 0 -20px;-webkit-transition:margin .15s ease-in-out;-moz-transition:margin .15s ease-in-out;}
.arrow{position:absolute;margin:10px 0 0 50px;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #fff;}

附件:下载该文件资源,减少时间成本(增值服务)