标签：
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://www.cnblogs.com/strick/p/4591521.html
