css-鼠标经过图片效果
时间：2020-12-29 14:09:08
收藏：0
阅读：21
1.边框线
<a href="" class="dttw_tp">
<div class="t-top"></div>
<div class="t-bottom"></div>
<img src="images/n1_xw1.png" >
</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;
}
/* 替换 */
原文：https://www.cnblogs.com/111wdh/p/14205940.html
评论（0）