1.边框线
<a href="" class="dttw_tp">
<div class="t-top"></div>
<div class="t-bottom"></div>
<img src="images/n1_xw1.png" alt="">
</a>
/* 边框动画 */
a.dttw_tp {
position: relative;
}
.t-top::before {
position: absolute;
content: "";
0px;
right: 0px;
top: 0px;
height: 2px;
background-color: var(--main-color);
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
/* 替换 */
a.dttw_tp:hover .t-top::before {
100%;
}
.t-top::after {
position: absolute;
content: "";
right: 0px;
top: 0px;
2px;
height: 0px;
background-color: var(--main-color);
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
/* 替换 */
a.dttw_tp:hover .t-top::after {
height: 100%;
}
.t-bottom::before {
position: absolute;
content: "";
0px;
left: 0px;
bottom: 0px;
height: 2px;
background-color: var(--main-color);
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
/* 替换 */