CSS3悬停动画工具提示效果

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

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

以下是 CSS3悬停动画工具提示效果的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
    <head>
		<meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <title>Tips & Tricks: How to create animated tooltips with CSS3</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <meta name="description" content="Tips & Tricks: How to create animated tooltips with CSS3" />
        <meta name="keywords" content="tooltips, css3, hover, pseudo-element, pseudo-class, animated, transition" />
        <meta name="author" content="Codrops" />
        <link rel="shortcut icon" href="../favicon.ico"> 
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
		<link href='http://fonts.googleapis.com/css?family=Alegreya+SC:700,400italic' rel='stylesheet' type='text/css' />
    </head>
    <body>
        <div class="container">
			<!-- Codrops top bar -->
            <div class="codrops-top">
				<a href="http://tympanus.net/TipsTricks/CSS3MenuHoverEffect/">
                    <strong>« Previous Tip: </strong>How to spice up your menu with CSS3
                </a>
				<span class="right">
					<a href="http://www.growcase.com/2011/11/friday-freebie-the-social-gunman-icons-concept/" target="_blank">Social Icons by Emir Ayouni - growcase.com</a>
                    <a href="http://tympanus.net/codrops/2012/02/01/how-to-create-animated-tooltips-with-css3/">
                        <strong>Back to the Codrops Article</strong>
                    </a>
                </span>
                <div class="clr"></div>
            </div><!--/ Codrops top bar -->
			<header>
				<h1><span>Tips & Tricks</span> How to create animated tooltips with CSS3</h1>
				<nav class="codrops-demos">
					<a class="current" href="index.html">Demo 1</a>
					<a href="index2.html">Demo 2</a>
					<a href="index3.html">Demo 3</a>
					<a href="index4.html">Demo 4</a>
                <nav>
			</header>
			<ul class="tt-wrapper">
				<li><a class="tt-gplus" href="#"><span>Google Plus</span></a></li>
				<li><a class="tt-twitter" href="#"><span>Twitter</span></a></li>
				<li><a class="tt-dribbble" href="#"><span>Dribbble</span></a></li>
				<li><a class="tt-facebook" href="#"><span>Facebook</span></a></li>
				<li><a class="tt-linkedin" href="#"><span>LinkedIn</span></a></li>
				<li><a class="tt-forrst" href="#"><span>Forrst</span></a></li>
			</ul>
        </div>
    </body>
</html>

CSS代码(demo.css):

/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
html,body{margin:0;padding:0;height:100%;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;}
section,header{display:block;}
/* General Demo Style */
body{font-family:Cambria,Palatino,"Palatino Linotype","Palatino LT STD",Georgia,serif;background:#f8fafe url(../images/bg.jpg) repeat top left;font-weight:400;font-size:15px;color:#3a2127;overflow-y:scroll;}
a{color:#333;text-decoration:none;}
.container{width:100%;height:100%;position:relative;text-align:center;}
.clr{clear:both;}
.container > header{padding:20px 30px 20px 30px;margin:0px 20px 10px 20px;position:relative;display:block;text-shadow:1px 1px 1px rgba(0,0,0,0.2);text-align:center;}
.container > header h1{position:relative;color:#498ea5;font-weight:700;font-style:normal;font-size:30px;padding:0px 0px 5px 0px;text-shadow:0px 1px 1px rgba(255,255,255,0.8);}
.container > header h1 span{font-family:'Alegreya SC',Georgia,serif;font-size:20px;line-height:20px;display:block;font-weight:400;font-style:italic;color:#719dab;text-shadow:1px 1px 1px rgba(0,0,0,0.1);}
.container > header h2{font-size:16px;font-style:italic;color:#2d6277;text-shadow:0px 1px 1px rgba(255,255,255,0.8);}
/* Header Style */
.codrops-top{line-height:24px;font-size:11px;background:rgba(255,255,255,0.4);text-transform:uppercase;z-index:9999;position:relative;box-shadow:1px 0px 2px rgba(0,0,0,0.2);}
.codrops-top a{padding:0px 10px;letter-spacing:1px;color:#333;text-shadow:0px 1px 1px #fff;display:block;float:left;}
.codrops-top a:hover{background:#fff;}
.codrops-top span.right{float:right;}
.codrops-top span.right a{float:left;display:block;}
.codrops-demos{text-align:center;display:block;line-height:30px;padding:20px 0px;}
.codrops-demos a{display:inline-block;margin:0px 4px;padding:0px 4px;color:#85b9cb;text-shadow:none;line-height:20px;font-style:italic;font-size:13px;border-radius:3px;background:rgba(255,255,255,0.5);box-shadow:0px 1px 2px rgba(0,0,0,0.1);-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;-o-transition:all 0.2s linear;-ms-transition:all 0.2s linear;transition:all 0.2s linear;}
.codrops-demos a:hover{color:#699daf;background:rgba(255,255,255,0.9);}
.codrops-demos a.current,.codrops-demos a.current:hover{background:#bdd4dc;color:#fff;}

CSS代码(style.css):

.tt-wrapper{padding:0;width:435px;height:70px;margin:80px auto 30px auto;}
.tt-wrapper li{float:left;}
.tt-wrapper li a{display:block;width:68px;height:70px;margin:0 2px;outline:none;background:transparent url(../images/growcase_the_social_gunman_icons.png) no-repeat top left;text-indent:-9000px;position:relative;}
.tt-wrapper li .tt-gplus{background-position:0px 0px;}
.tt-wrapper li .tt-twitter{background-position:-68px 0px;}
.tt-wrapper li .tt-dribbble{background-position:-136px 0px;}
.tt-wrapper li .tt-facebook{background-position:-204px 0px;}
.tt-wrapper li .tt-linkedin{background-position:-272px 0px;}
.tt-wrapper li .tt-forrst{background-position:-340px 0px;}
.tt-wrapper li a span{width:100px;height:auto;line-height:20px;padding:10px;left:50%;margin-left:-64px;font-family:'Alegreya SC',Georgia,serif;font-weight:400;font-style:italic;font-size:14px;color:#719DAB;text-shadow:1px 1px 1px rgba(0,0,0,0.1);text-align:center;border:4px solid #fff;background:rgba(255,255,255,0.3);text-indent:0px;border-radius:5px;position:absolute;pointer-events:none;bottom:100px;opacity:0;box-shadow:1px 1px 2px rgba(0,0,0,0.1);-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}
.tt-wrapper li a span:before,.tt-wrapper li a span:after{content:'';position:absolute;bottom:-15px;left:50%;margin-left:-9px;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid rgba(0,0,0,0.1);}
.tt-wrapper li a span:after{bottom:-14px;margin-left:-10px;border-top:10px solid #fff;}
.tt-wrapper li a:hover span{opacity:0.9;bottom:70px;}

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