随笔- 443 文章- 77 评论- 996 阅读- 105万

一、头像

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;
}