*{margin:0;padding:0;}.ac{width:985px;height:1000px;background:white;margin:100px auto;opacity:0.8;}
body{background-image:url('https://images2015.cnblogs.com/blog/969197/201703/969197-20170325160900815-1058599404.jpg');
z-index:-1;}
#header{opacity:0.7}#main{opacity:0.7;}blogTitle{color:black;}
#d1{
           
            width:400px;
            height:400px;
            position:relative;
            opacity:0.5;
            margin:50px auto;
        }
        #tupian{height:400px;
            width:400px;

        }
        #d2{
            width:200px;
            height:0;
            position:absolute;
            background:#f00;
            opacity:0.4;
            transition:0.5s ease;
            left:0;right:0;bottom:100%;
        }
        #d4{
            height:200px;
            width:0;
            position:absolute;
            
            transition:2s ease;
            left:0;top:0;right:100%;
            overflow:hidden;
        }
        #d5{height:200px;
            width:0;
            position:absolute;
            
            transition:2s ease;
            left:100%;bottom:0;right:0;
            overflow:hidden;

        }
        #d3{bottom:0;right:0;
            position:absolute;
            right:0;
            background:#f00;
            opacity:0.4;
            width:200px;
            bottom:0;
            height:0;
            transition:0.5s ease;
        }
        
        #d5{bottom:0;right:0;left:100%;}
        #d1:hover #d2{bottom:0;height:100%;}
        #d1:hover #d3{height:100%;}
        #d1:hover #d4{width:100%;}
        #d1:hover #d5{left:0;width:100%;}
        .aa{white-space:nowrap;color:white;
            text-align:center;position:absolute;top:95%;left:50%;height:25px;transform:translate(-50%,-50%);
        }
        .bb{white-space:nowrap;color:white;
            text-align:center;position:absolute;top:5%;left:50%;height:25px;transform:translate(-50%,-50%);}