防百度知道中心页面动画效果

最近在百度知道中心看到一个动画挺有意思的,就想了一下看怎么实现,百度原效果如下:

防百度知道中心页面动画效果_第1张图片

码云地址:码云上的demo

html代码:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>baidutitle>
    <link rel="stylesheet" href="css/baidu.css">
    <script src="js/jquery-1.11.3.min.js">script>
    <script>
        $(function(){
            $(".item").hover(function(){
                $(".hv-hide").slideUp('500');
                $(".hv-hide").fadeOut('500');
                $(".u-icon").fadeTo("slow", 1);
            },function(){
                $(".bottom p:first").fadeIn('500');
                $(".hv-hide").slideDown('500');
                $(".u-icon").fadeTo("fast", 0);
            });
        });
    script>
head>
<body>
    <div class="box" id="box">
        <div class="item">
            <div class="top">
                <div class="hv-hide">
                    <h2>芝麻团队h2>
                    <p>共同进步,共用成长很<br>快乐啊,哈哈哈~!p>
                div>
                <p class="img">
                    <img src="img/item.jpg">
                    <span>辅导团数学span>
                p>
                <div class="ot">
                    <p>团队已经采纳(200,332,333)p>
                    <p>
                        擅长:<span>数学span><span>英文span><span>物理span>
                    p>
                div>
            div>
            <div class="u-icon">
                <img src="img/u.png">
                <img src="img/u2.png">
                <img src="img/u3.png">
                <img src="img/u2.png">
                <img src="img/u3.png">
                <img src="img/u.png">
            div>
            <div class="bottom">
                <p>已经有<span>11232span>个芝麻团p>
                <p>
                    <a href="#">加入团队a>
                p>
            div>
        div>
    div>
body>
html>

css代码:

* {
  margin: 0;
  padding: 0; 
  font-family:"微软雅黑";
}
body{background:#eee;}

#box{width:800px;margin:50px auto;}
#box .item{
    position: relative;
    width:270px;
    height:430px;
    color:#fff;
    border:1px solid #eee;
    background:#fff;
    box-shadow: 0 0 5px #ccc;
    overflow: hidden;
}
/**动画css部分*/


#box .item:hover .top .img img{
    transform:scale(0.9);
    transition: all .5s;
}
#box .item:hover .top{
    height:240px;
    transition: all .5s;
}



/**动画css部分*/


#box .item .top{
    position:absolute;
    top:0;
    z-index: 999;
    height:320px;
    width:100%;
    text-align:center;
    background:#F59537;
    overflow: hidden;
    transition: all .5s;
}
#box .item .top h2{
    padding-top:40px;
    margin-bottom:15px;
    font-weight:normal;
}
#box .item .top .img img{
    height:120px;
    width:120px;
    margin-top:15px;
    border:3px solid #fff;
    border-radius:60px;
    transform:scale(1);
    transition: all .5s;
}
#box .item .top .ot{
    margin-top:20px;
}
#box .item .top .ot p{
    margin:5px 0;
    font-size:13px;
}
#box .item .top .ot p span{
    margin:0 5px;
    text-decoration: underline;
}
#box .item .top .img span{
    display:block;
    margin-top:10px;
    font-size:13px;
}
#box .item .u-icon{
    position: relative;
    top:30px;
    width:180px;
    background:#fff;
    margin:220px auto 0;
    font-size:0;
    text-align: center;
    opacity: 0;
}
#box .item .u-icon img{
    height:40px;
    width:40px;
    margin:5px ;
    border-radius:20px;
    border:2px solid #ccc;
}
#box .item .bottom p{
    text-align:center;
}
#box .item .bottom p:first-child{
    margin-top:10px;
    color:#666;
    font-size:14px;
}
#box .item .bottom p:first-child span{
    color:#ee5e0f;
}
#box .item .bottom p a{
    display:block;
    width:125px;
    height:40px;
    margin:10px auto 0;
    line-height:40px;
    text-align:center;
    text-decoration: none;
    color:#35b558;
    font-size:14px;
    border:1px solid #eee;
    box-shadow: 0 1px 5px #ccc;
}
#box .item .bottom p a:hover{
    border:1px solid #ccc;
}

最终效果图:

防百度知道中心页面动画效果_第2张图片

结束语:天气突然变冷了,快到过年了,最近烦心事太多,希望年后会慢慢变好,一直在努力着。。。。

你可能感兴趣的:(web前端,CSS,CSS3)