我想讓鏈接產生這種懸停效果，讓他連續不斷，而不需要懸停來表明文本是一個鏈接。我有這樣的效果，當游標懸停時，一些影片出現在底部的邊框上，就像下劃線一樣，但我想讓這種效果一直回圈下去。誰能幫幫我？
.efeitosublinhado{
position:relative;
text-decoration:none;
}
.efeitosublinhado2{
position:relative;
text-decoration:none;
content:'';
position:absolute;
bottom:0;
right:0;
width:0;
height:2px;
背景顏色:紅色。
transition:width 0.6s cubic-bezier(0.25,1,0.5,1);
-moz-animation:linky 2s infinite easy-in-out;
-webkit-animation:linky 2s infinite easy-in-out;
}
@keyframes linky{
0%{
width:0%;
}
100%{
width:100%;
}
}
@-moz-keyframes linky{
0%{
width:0%;
}
100%{
width:100%;
}
}
@-webkit-keyframes linky{
0%{
width:0%;
}
100%{
width:100%;
}
}
.efeitosublinhado::before{
content:'';
position:absolute;
bottom:0;
right:0;
width:0;
height:2px;
背景顏色:紅色。
過渡:寬度0.6s cubic-bezier(0.25,1,0.5,1)。
}
.efeitosublinhado:hover::before{
背景顏色:紅色。
left:0;
right:auto;
width:100%;
}
<a href="WWW.google. pt" class="T3Cefeitosublinhado">這個文本將邊界底部效果</a>
uj5u.com熱心網友回復：
嘗試在before中設定影片：
.efeitosublinhado{
position: relative;
text-decoration: none;
}
@keyframes linky{
0%{
width:0%;
}
100%{
width:100%;
}
}
@-moz-keyframes linky{
0%{
width:0%;
}
100%{
width:100%;
}
}
@-webkit-keyframes linky{
0%{
width:0%;
}
100%{
width:100%;
}
}
.efeitosublinhado: :before{
content:''/span>。
position: absolute;
bottom:0。
left:0;
right: auto;
width:0;
height:2px;
background-color:紅色。
transition:width 0.6s cubic-bezier（0. 25,1,0.5,1）。)
-moz-animation:linky 2s infinite easy-in-out;
-webkit-animation:linky 2s 無限easy-in-out;
animation:linky 2s無限的ease-in-out。
}<a href="WWW.google. pt" class="efeitosublinhado">這個文本將邊框底部效果</a> 轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/330564.html
標籤：