css实现动画效果

实现这样的效果

 

1.在页面中传入图片

2.在页面中画出上下左右，用 border-left  border-right   border-top  border-bottom 画出线

3.用translate把线移动出去

4.用 transition实现时间的效果

源代码：

 

.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)
}