一款带鼠标悬停翻转的个人卡片简洁版,只要鼠标滑入卡片区域,就会翻转显示卡片背面的图标联系方式,卡片风格比较简洁大气,喜欢的童鞋请收下吧。
页面的head部分,远程调用font-awesome图标字体库,并引入本地CSS样式文件,代码如下:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link type="text/css" rel="stylesheet" href="css/style.css">
页面的body部分,用了多个div容器的嵌套,代码如下:
<div class="card-container">
<div class="left"></div>
<div class="right"></div>
<div class="card">
<div class="front">
<div class="cover"></div>
<div class="photo">
<img src="http://www.sucaihuo.com/other/avatar/dir/905.jpg">
</div>
<h3 class="name">richer</h3>
<p class="role">html+css+javascript</p>
<div class="supporting_text">
<span>php+mysql</span>
</div>
<div class="mdl-card__actions mdl-card--border mdl-typography--text-center">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">联系方式</button>
</div>
</div>
<div class="back">
<ul class="icons">
<li><i class="mdi fa fa-qq"><span>QQ</span></i></li>
<li><i class="mdi fa fa-wechat"><span>微信</span></i></li>
<li><i class="mdi fa fa-weibo"><span>微博</span></i></li>
<li><i class="mdi fa fa-envelope-o"><span>邮箱</span></i></li>
</ul>
</div>
</div>
</div>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791