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: "";     width: 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 {     width: 100%; }
.t-top::after {     position: absolute;     content: "";     right: 0px;     top: 0px;     width: 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: "";     width: 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; }

/* 替换 */