1632986389(1).png
image.png
<ul v-loading="leftLoading" class="_left">
<li v-for="item in data" :key="item.id">
<div class="font">{{item.name}}</div>
</li>
</ul>
li{
cursor:pointer;
width: 80%;
height: 70px;
overflow: hidden;
background: #000;
color:#fff;
position: relative;
text-align:center;
line-height: 70px;
margin: 10px auto;
.font{
&::before {
top: 15px;
right: 5px;
bottom: 15px;
left: 5px;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
transform: scale(0,1);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
&::after {
top: 5px;
right: 15px;
bottom: 5px;
left: 15px;
border-right: 1px solid #fff;
border-left: 1px solid #fff;
transform: scale(1,0);
transform-origin: 100% 0;
}
}
}
li .font::before, li .font::after {
position: absolute;
content: '';
opacity: 0;
transition: all 0.5s;
}
li:hover .font::before, li:hover .font::after {
opacity: 1;
transform: scale(1);
transition: all 0.5s;
}
