css之动态渐变、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是一种CSS简写属性，用于一次性集中定义各种背景属性，包括color、image、origin与size、repeat方式等等。
此属性是一个简写属性，可以在一次声明中定义一个或多个属性。background-clip、background-color、background-image、background-origin、background-position、background-repeat、background-size和background-attachment。
对于所有简写属性，任何没有被指定的值都会被设定为它们的初始值。

w3school

background简写属性在一个声明中设置所有的背景属性。
如果不设置其中的某个值，也不会出问题，比如background: #ff0000 url('smiley.gif');也是允许的。
通常建议使用这个属性，而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少。

---

background-size

MDN

background-size设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。
没有被背景图片覆盖的背景区域仍然会显示用background-color属性设置的背景颜色。此外，如果背景图片设置了透明或者半透明属性，衬在背景图片后面的背景色也会显示出来。

w3school

background-size属性规定背景图像的尺寸。

---

transition

MDN

CSS的transition属性是transition-property、transition-duration、transition-timing-function和transition-delay的一个简写属性(en-US)。
过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换，像是:hover，:active或者通过JavaScript实现的状态变化。

w3school

transition属性是一个简写属性，用于设置四个过渡属性。

---

background-position-x

MDN

background-position-xCSS属性设置水平方向的位置，与每个背景图片等位置层设置属性background-origin相关。更多信息请查看background-position属性，这个用的比较普遍。

w3school

background-position属性设置背景图像的起始位置。
这个属性设置背景原图像(由background-image定义)的位置，背景图像如果要重复，将从这一点开始。
您需要把background-attachment属性设置为"fixed"，才能保证该属性在Firefox和Opera中正常工作。