利用CSS3实现悬停动画工具提示效果



53 210 71



特效描述:利用CSS3实现 悬停动画工具 提示效果,利用CSS3实现悬停动画工具提示效果

代码结构

1. 引入CSS

<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' />

2. HTML代码

        <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.51qianduan.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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滑动选项卡切换 弹出层拖动 选项卡切换 滑动手风琴 窗口提示框 滑动星星打分 收缩收起展开 渐隐切换 淡出淡入淡进 其他更多 鼠标悬停 css绘制样式 文字收缩展开 文字淡出淡进 提示框/弹出层 切换按钮

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到