鼠标进入元素，出现动态移动的边线框

发表于：2023-09-06 13:58:35浏览：99次TAG： #CSS

<body>
    <div class="a">
        <div class="b">
            <div class="b-top"></div>
            <div class="b-right"></div>
            <div class="b-bottom"></div>
            <div class="b-left"></div>
        </div>
        <div class="c"></div>
    </div>
</body>

.a{
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    position: relative;
    margin-top: 50px;
}

.b{
    width: 200px;
    height: 300px;
    background-color: red;
    box-sizing: border-box;
    position: absolute;
    overflow: hidden;
    z-index: 19;
    transition: all 1s;
}

.b:hover{
    animation: my 1s;
    animation-delay: 500ms;
    animation-fill-mode: forwards;
}

.b-top{
    width: 200px;
    height: 4px;
    background-color: blue;
    position: absolute;
    top:0;
    left:-200px;
    transition: all 500ms;
}

.b-bottom{
    width: 200px;
    height: 4px;
    background-color: blue;
    position: absolute;       
    bottom: 0;     
    right:-200px;
    transition: all 500ms;
}

.b-left{
    width: 4px;
    height: 300px;
    background-color: blue;
    position: absolute;
    left:0;
    bottom: -300px;
    transition: all 500ms;
}

.b-right{
    width: 4px;
    height: 300px;
    background-color: blue;
    position: absolute;
    right:0;    
    top:-300px;      
    transition: all 500ms;
}

.b:hover .b-top{
    left: 0;
}

.b:hover .b-bottom{
    right: 0;
}

.b:hover .b-left{
    bottom: 0;
}

.b:hover .b-right{
    top: 0;
}

.c{
    width: 200px;
    height: 300px;
    background-color: #696969;
    position: absolute;
    z-index: 9;
    transition: all 1ms;
}

.b:hover~.c{
    animation: my1 1s;
    animation-delay: 500ms;
    animation-fill-mode: forwards;            
}

@keyframes my{
    0%{transform: translateX(0) translateY(0);}
    100%{transform: translateX(-10px) translateY(-10px);}
}

@keyframes my1{
    0%{transform: translateX(0) translateY(0);}
    100%{transform: translateX(5px) translateY(5px);}            
}

栏目分类全部>