CSS dynamic gradient, background, size, position, transition

---

CSS

.h2 {
    
    
	color: #333333;
}

.h2 span {
    
    
	background: linear-gradient(to right, #ec695c, #61c454) no-repeat right bottom;
	background-size: 0 2px;
	transition: background-size 700ms;
}

.h2 span:hover {
    
    
	background-position-x: left;
	background-size: 100% 2px;
}

---

html

<h2 class="h2">
    <span>
        css才是永远学不会的编程语言css才是永远学不会的编程语言css才是永远学不会的编程语言css才是永远学不会的编程语言css才是永远学不会的编程语言css才是永远学不会的编程语言css才是永远学不会的编程语言
    </span>
</h2>

---

background

MDN

background is a CSS shorthand property, which is used to centrally define various background properties at one time, including color, image, originand size, repeatmethods, and so on.
This attribute is a shorthand attribute that can define one or more attributes in one declaration. background-clip , background-color , background-image , background-origin , background-position , background-repeat , background-size , and background-attachment .
For all shorthand properties, any values ​​not specified will be set to their initial values .

w3school

backgroundThe shorthand property sets all background properties in one declaration.
If you do not set one of the values, there will be no problem, for example, background: #ff0000 url('smiley.gif');it is also allowed.
It is generally recommended to use this attribute rather than individual attributes individually, as it is better supported in older browsers and requires fewer letters to type.

---

background-size

MDN

background-size sets the size of the background image. The image can retain its original size, or stretch to a new size, or scale to the size of the element's available space while maintaining its original proportions.
Background areas not covered by a background image will still display the background color set with the background-color property. In addition, if the background image is set with transparent or translucent properties, the background color behind the background image will also be displayed.

w3school

The background-size attribute specifies the size of the background image.

---

transition

MDN

The CSS transition property is a shorthand property (en-US) for transition-property , transition-duration , transition-timing-function , and transition-delay . Transitions can define different transition effects for an element when switching between different states. Like switching between different pseudo-elements like :hover , :active or via implemented state changes.
JavaScript

w3school

The transition property is a shorthand property used to set four transition properties.

---

background-position-x

MDN

The background-position-xCSS attribute sets the position in the horizontal direction, which is related to setting the attribute background-origin of each background image and other position layers . For more information, see the background-position property, which is commonly used.

w3school

The background-position property sets the starting position of the background image.
This property sets background-imagethe position of the background original image (defined by ), and the background image will start at this point if it is to be repeated.
You need to background-attachmentset the property to "fixed"to ensure that the property works properly in Firefoxand Opera.