मैं शीर्षक के तहत एक एनीमेशन लाइन जोड़ता हूं। लेकिन अच्छी तरह से फैल नहीं सकते - एचटीएमएल, सीएसएस, सीएसएस-एनिमेशन

मैंने समस्या को गुमराह किया है लेकिन नीचे उल्लिखित समस्या का समाधान नहीं मिला

यहां मेरा कोड है:

span.line-wrap {
position: relative;
display: inline-block;
}
span.line {
display: inline-block;
position: absolute;
top: 100%;
width: 0;
border-top: 2px solid #666;
-webkit-transition: width 0.5s ease-in;
}
span .line-left {
left: 0;
}
span .line-right {
left: 50%;
}
span.line-wrap:hover span.line {
width: 50%;
}
a {
color: #000;
text-decoration: none;
}
<h2>
<span class="line-wrap">
<span class="line line-left"></span>
<span class="line line-right"></span>
<a href="xxx">Long long long title</a>
</span>
</h2>

वर्तमान में यह इस तरह एक दिशा में एनिमेट करेगा:

Long long long long title.
----       -----

लेकिन मुझे इसे इस तरह एनिमेट करने की ज़रूरत है।

Long long long long title.
----------

मुझे पता है कि यह अभी काम नहीं करता है, लेकिन इसका समाधान हो सकता है। लेकिन मुझे नहीं पता। कृपया मुझे कुछ सुझाव दें।

धन्यवाद

उत्तर:

उत्तर № 1 के लिए 4

एक वास्तविक छद्म स्टाइल स्पैन के बजाय छद्म-तत्व और स्केल ट्रांसफॉर्म का उपयोग करें।

h2 {
text-align: center;
}
a {
text-decoration: none;
text-transform: uppercase;
position: relative;
display: inline-block;
color:rebeccapurple
}
a::after {
content: "";
width: 100%;
position: absolute;
top: 100%;
left: 0;
height: 4px;
background: currentColor;
transform: scaleX(0);
transition: transform .35s ease;
}
a:hover::after {
transform: scaleX(1);
}
<h2>
<a href="xxx">title</a>
</h2>


संबंधित सवाल
सबसे लोकप्रिय