CSS3 Share Tooltip

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

CSS3 Share Tooltip

这个例子的效果其实很早就分享了,可能有很多同学不知道这个网址,当初是想做一个纯CSS3案例分享的网站,但由于时间和精力有限,最终胎死腹中,还好,在w3cplus主站上开了这样一个专栏,那些效果又可以面世了,今天开始抽空将把以前那些自认为还可以一看的demo效果移上来。今天转移过来的是第一个案例效果,共享按钮的提示效果,这个效果结构和样式都略有一定的难度,在学习这个属性之前最好先了解一下CSS3的animation,transform等属性的使用方法。感兴趣的继续往下吧。

demodownload

HTML CODE

<section>
  <article>
    <h1>SHA</h1>
  </article>
  <article>
    <a href="#" data-title="FackeBook">Facebook</a>
		<a href="#" data-title="Twitter">Twitter</a>
  </article>
</section>
<section>
  <article>
    <h1>ARE</h1>
  </article>
	<article>
    <a href="#" data-title="Stumble">Stumble</a>
    <a href="#" data-title="Dribbble">Dribbble</a>
  </article>
</section>

CSS CODE

body{
	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
	background:#003961;
}
.demo {
	width: 400px;
	height: 80px;
	margin: 50px auto;
}
.demo section {
	width: 50%;
	height: 80px;
	float: left;
}
.demo section:first-child::before{
	content:"";
	background:rgba(0,0,0,0.4);
	position: absolute;
	height: 50px;
	width: 170px;
	margin-left: 120px;
	box-shadow: 0 0 12px rgba(0,0,0,0.3);
}
.demo section h1 {
	margin-top: 12px;
	overflow: hidden;
	width: 33px;
	color: #fff
}
.demo article {
	position: absolute;
	height: 50px;
	width: 100px;
	background: #00aeef;
	/*transition*/
	-webkit-transition:all 300ms;
	-moz-transition:all 300ms;
	-o-transition:all 300ms;
  -ms-transition:all 300ms;
	transition:all 300ms;
	text-align:center;
}
.demo article a {
	
剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/demo/521.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部