麦客CRM赞助极客编程挑战#019:生成个人头像悬浮伸缩式菜单效果

 关注

相关CSS代码如下：

@import "//cdn.gbtags.com/font-awesome/4.1.0/css/font-awesome.min.css";
html {
background: #d7d9d9;
font-family: 'microsoft yahei' ,Arial,sans-serif;
}
*, html, body {
font-family: Open Sans;
}
ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
.container {
margin: 40px auto 0;
width: 143px;
}
.profile-container {
position: relative;
width: 143px;
float: left;
}
.profile {
background: #f6f6f6;
float: left;
padding: 4px;
border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.avatar img {
display: block;
border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.follow {
margin: 4px 0 0 0;
}
.follow button {
display: block;
width: 100%;
border: 0;
background: #268cde;
color: white;
padding: 7px 0;
margin: 0;
border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
cursor: pointer;
}

代码挑战要求：

用户鼠标悬浮在个人头像或者关注按钮后，台阶式展示相关的菜单内容，具体请参考如下动态图片效果（点击以下图片查看动画GIF文件）：

提交方式：

• 录制代码编写过程或最终代码：点击开始

• 跟帖发布代码预览地址（使用GB按钮可以直接嵌入发帖回复中）：演示地址

• 【强烈提醒】加入QQ群：157757552， 获奖用户及递交快递联系方式

• 【强烈提醒】请在个人信息中添加QQ号，方便我们联系人获得快递地址

麦客CRM

麦客CRM是轻简好用的"表单"在线信息收集和联系人管理工具。区别于传统CRM无法触及海量真实用户，麦客CRM以用户自定义"表单"（活动报名、问卷调研、登记反馈、在线订单等）收集信息，用数据分析帮助企业解决大规模联系人分层管理。辅以EDM、短信功能，帮助企业与客户产生有效联系。（www.mikecrm.com）

礼品赞助

本期礼品5份（麦客CRM礼物包：精美记事本+高级笔记本+鼠标垫+围巾） 由麦客CRM鼎力赞助！~~~

如何增加获奖机率？

• 最快完成奖一名： 最快保存递交“合格”代码

• 最佳讲解奖一名： 代码录制过程及讲解详细完整

• 最佳人气奖一名： 点赞（点+）的人最多

• 本期参与奖二名： 新人参加本挑战均有机会获取奖品

晒晒往期获奖礼物

点击这里晒晒礼物

点击“阅读原文”查看具体活动相关信息