一款可点击翻转的个人信息卡片,点击左箭头指向的那个小图标,可以3D翻转显示背面的详细介绍文字,再点击返回的小图标即可翻转至正面内容,图标等均可以自由更换。
页面的head部分,需远程调用font-awesome图标字体库,并引入页面的样式文件,代码如下:
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css'>
<link type="text/css" rel="stylesheet" href="css/style.css"/>
页面的body部分,需设置好卡片正面和背面的容器和显示内容,代码如下:
<div id="wrapper">
<div id="content">
<div id="card">
<div id="front">
<div id="arrow"><i class="fa fa-arrow-left"></i></div>
<div id="top-pic"></div>
<div id="avatar"></div>
<div id="info-box">
<div class="info">
<h1>Richer</h1>
<h2>Digital Creative</h2>
</div>
</div>
<div id="social-bar">
<a href="http://www.sucaihuo.com" target="_blank">
<i class="fa fa-facebook"></i>
</a>
<a href="http://www.sucaihuo.com" target="_blank">
<i class="fa fa-twitter"></i>
</a>
<a href="http://www.sucaihuo.com" target="_blank">
<i class="fa fa-dribbble"></i>
</a>
<a href="http://www.sucaihuo.com">
<i class="fa fa-codepen"></i>
</a>
<a href="javascript:void" class="more-info">
<i class="fa fa-user"></i>
</a>
</div>
</div>
<div id="back">
<div class="back-info">
<p>My name is Jesse Couch, and I am an award winning, intensely creative, coffee-fueled front-end web designer and developer. My style and approach are very straight-forward — I obsess about keeping things as simple as humanly possible. That's it. If you like bells and whistles for the sake of bells and whistles, look elsewhere - but if you want to remain laser-focused on the goals for your new website, it's time time to talk.</p>
</div>
<div id="social-bar">
<a href="http://www.sucaihuo.com" target="_blank">
<i class="fa fa-facebook"></i>
</a>
<a href="http://www.sucaihuo.com" target="_blank">
<i class="fa fa-twitter"></i>
</a>
<a href="http://www.sucaihuo.com" target="_blank">
<i class="fa fa-dribbble"></i>
</a>
<a href="http://www.sucaihuo.com">
<i class="fa fa-codepen"></i>
</a>
<a href="javascript:void" class="more-info">
<i class="fa fa-undo"></i>
</a>
</div>
</div>
</div>
<div id="background">
<div id="background-image"></div>
</div>
</div>
</div>
页面的底部,需引入jQuery库和JS文件,代码如下:
<script type="text/javascript" src='js/jquery.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791