css achieve animation effects

To achieve this effect

 

1. Incoming picture page

2. Draw up and down on the page, with border-left border-right border-  top draw lines border-bottom

3. The moves out of line with the translate

4. The effect achieved with transition time

Source:

 

.eight{
    margin-top: 30px;
    width: 300px;
    height: 300px;
    position: relative;
    overflow: hidden;
    
}
.eight img {
    width: 300px;
    height: 300px;
}

.b1 {
    height: 200px;
    width: 270px;
    position: absolute;
    border-top: solid 1px black;
    border-bottom: solid 1px red;
    top: 30px;
    left:20px;
    transform: translateX(300px);
    transition: 1s  all;
}

.b2 {
    height: 225px;
    width: 220px;
    position: absolute;
    border-left: solid 1px black;
    border-right: solid 1px red;
    top: 23px;
    left: 45px;
    transform: translateY(300px);
    transition: 2s  all;
}
.eight:hover .b1{
    transform: translate(0,0)  rotateZ(360deg);
}

.eight:hover  .b2{
    transform: translate(0,0)   rotateZ(360deg); 
}
.eight p:nth-of-type(1){
    position: absolute;
    left: 184px;
    top: 30px;
    transform: translateX(280px);
}
.eight p:nth-of-type(2){
    position: absolute;
    left: 233px;
    top:247px;
    transform: translateY(280px);
}
.eight p:nth-of-type(3){
    position: absolute;
    left: 233px;
    top: 193px;
    transform: translateY(390px);
}
.eight:hover  p:nth-of-type(1){
    transform: translate(0,0)
}
.eight:hover  p:nth-of-type(2){
    transform: translate(0,0)
}
.eight:hover  p:nth-of-type(3){
    transform: translate(0,0)
}