一、头像
1、先在顶部来个头像，头像再做几个动画特效，就是鼠标移上去的时候边框转180°，需要注意的是图片不能随着边框也转动
所以得把图片和边框放在两个标签中，两个标签都用绝对定位来控制位置，我以前也做过一些动画的记录，可以在《CSS3中的动画效果记录》查看到。
<header>
<img src="img/avatar.jpg" /> <a href="javascript:void(0)"></a> </header>
a标签和img标签的宽度和高度是一样的，这是为了在圆形边框中包住头像，transition就是用来做动画，边框颜色有两种，左边和上边是橙色，右边和下边是棕色的。:first-child是一个选择器。以前对选择器做些过记录，可以在《CSS选择器的一些记录》查看到。
.menu_container section:first-child > header{
margin: 10px auto;
width: 200px; height: 200px; position: relative; } .menu_container section:first-child > header a{ position: absolute; z-index: 1; display: block; border: 10px solid #072256; border-left-color:#E07514; border-top-color:#E07514; border-radius: 50%; width: 180px; height: 180px; -webkit-transition:all .5s ease-in; transition:all .5s ease-in; -moz-transition:all .5s ease-in; -o-transition:all .5s ease-in; } .menu_container section:first-child > header a:hover{ -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .menu_container section:first-child > header img{ width: 180px; height: 180px; border-radius: 50%; display: block; position: absolute; top:10px; left: 10px; }
我还做了个响应式的CSS，用来控制a标签、img标签和header标签的宽度高度。
@media screen and (max-width: 680px) {
.menu_container section:first-child > header{
width: 100px;
height: 100px;
} .menu_container section:first-child > header a{ border-width: 5px; width: 90px; height: 90px; } .menu_container section:first-child > header img{ width: 90px; height: 90px; top:5px; left: 5px; } }
二、表格信息
1、做个列表信息，这里面用到了个选择器。一开始是用table实现的，但是发现用table做响应式的话有点困难，后面就用flex布局了。在媒体查询的时候再变成block布局。
.user_info{ width:100%; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; padding-top:10px; overflow:hidden; } @media screen and (max-width: 680px) { .user_info{ display:block; font-size:1.6rem; } }
2、接下来要做一个动画，就是移到懒羊羊这里做个效果。如下图所示：
<a href="javascript:void(0)"> <span class="line line-top"></span> <span class="line line-right"></span> <span class="line line-bottom"></span> <span class="line line-left"></span> 懒羊羊 </a>
原理就是用span做四根白线，要绝对定位的，a标签设置为相对定位，在加点动画上去就行了，麻烦的地方就是四根白线的位置定位。
.user_info > span > a .line{ position:absolute; -moz-transition:all .4s ease; -o-transition:all .4s ease; -webkit-transition:all .4s ease; transition:all .4s ease; } .user_info > span > a:hover .line{ background:#fff; } .user_info > span > a .line-top{ width:0px; height:1px; left:-110%; top:-2px; } .user_info > span > a:hover .line-top{ width:100%; left:-2px; padding-left:3px; } .user_info > span > a .line-right{ width:1px; height:0px; right:-2px; top:-110%; } .user_info > span > a:hover .line-right{ height:100%; top:-2px; } .user_info > span > a .line-bottom{ width:1px; height:0px; left:-2px; bottom:-110%; } .user_info > span > a:hover .line-bottom{ height:100%; bottom:1px; } .user_info > span > a .line-left{ width:0px; height:1px; right:-110%; bottom:-2px; } .user_info > span > a:hover .line-left{ width:100%; right:-2px; bottom:1px; padding-right:3px; }
源码下载：
http://download.csdn.net/detail/loneleaf1/8849069
本文转自 咖啡机（K.F.J） 博客园博客，原文链接：http://www.cnblogs.com/strick/p/4591521.html，如需转载请自行联系原作者
