jQuery仿微博个人名片点击关注特效

1、新建html文档。

2、准备好需要用到的图标。

3、书写hmtl代码。

<div class="container">

<header>

<div class="bio">

    <img src="images/up.jpg" alt="background" class="bg">

<div class="desc">

<h3>cher</h3>

你所拥有的一切都是你吸引而来的。我们都活在过去的行为和想法造就的世界里。

</div>

</div>

<div class="avatarcontainer">

<img src="images/photo.jpg" class="avatar">

<div class="hover">

<div class="icon-"></div>

</div>

</div>

</header>

<div class="content">

<div class="data">

<ul>

<li>

2,931

<span>帖子</span>

</li>

<li>

1,118

<span>粉丝</span>

</li>

<li>

531

<span>关注</span>

</li>

</ul>

</div>

<div class="follow"> <div class="icon-"></div> 粉我</div>

</div>

</div>

4、书写css代码。

.data { margin-top: .6em; color: #81878b; }

.data ul { margin: 0; padding: 0; }

.data li { width: 32%; text-align: center; display: inline-block; font-size: 1.5em; font-family: 'Microsoft YaHei', 'Lantinghei SC', 'Open Sans', Arial, 'Hiragino Sans GB', 'STHeiti', 'WenQuanYi Micro Hei', 'SimSun', sans-serif; border-right: solid 1px #bdc3c7; }

.data li:last-child { border: none; }

.data li span { display: block; text-transform: uppercase; font-family: 'Microsoft YaHei', 'Lantinghei SC', 'Open Sans', Arial, 'Hiragino Sans GB', 'STHeiti', 'WenQuanYi Micro Hei', 'SimSun', sans-serif; font-size: .5em; margin-top: .6em; font-weight: 700; }

.desc { position: absolute; top: 0; background-color: rgba(0, 0, 0, 0.6); width: 100%; height: 171px; padding: 1.2em 1em 0 1em; color: white; text-align: center; opacity: 0; -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; transition-property: all; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-in; -moz-transition-timing-function: ease-in; -o-transition-timing-function: ease-in; transition-timing-function: ease-in; }

.desc h3 { font-family: 'Microsoft YaHei', 'Lantinghei SC', 'Open Sans', Arial, 'Hiragino Sans GB', 'STHeiti', 'WenQuanYi Micro Hei', 'SimSun', sans-serif; font-size: 1.2em; margin-bottom: .5em; }

.desc p { font-size: .9em; font-family: 'Microsoft YaHei', 'Lantinghei SC', 'Open Sans', Arial, 'Hiragino Sans GB', 'STHeiti', 'WenQuanYi Micro Hei', 'SimSun', sans-serif; line-height: 1.5em; }

.follow { margin: 1.5em auto 0 auto; background-color: #2589cc; width: 150px; color: white; font-family: 'Microsoft YaHei', 'Lantinghei SC', 'Open Sans', Arial, 'Hiragino Sans GB', 'STHeiti', 'WenQuanYi Micro Hei', 'SimSun', sans-serif; text-align: center; padding: .5em; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; transition-property: all; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease; -moz-transition-timing-function: ease; -o-transition-timing-function: ease; transition-timing-function: ease; }

.follow:hover { background-color: #167abd; cursor: pointer; }

5、书写并添加js代码。

<script src='js/jquery.min.js'></script>

<script src="js/index.js"></script>

6、代码整体结构。

7、查看效果。