CSS中的线性属性是什么意思?
background-position 0.1s linear;
我正在查看这段代码,但对线性属性不熟悉。这如何改变按钮的渐变?
.btn:hover {
color: #333333;
text-decoration: none;
background-color: #e6e6e6;
background-position: 0 -15px;
-webkit-transition: background-position 0.1s linear;
-moz-transition: background-position 0.1s linear;
-ms-transition: background-position 0.1s linear;
-o-transition: background-position 0.1s linear;
transition: background-position 0.1s linear;
}
最佳答案
单词线性代表CSS转换中使用的缓动功能 - 这正式称为“转换计时函数”。在这种情况下,线性告诉CSS该元素将在整个过渡动画中保持相同的速度。
当我们指定过渡计时函数时,我们正在定义一个表示整个动画速度的曲线图。
Take a look at the MDN documentation here - you can see a list of the other options
要获得其他有趣的动画效果,您可以尝试“ease-in”或“ease-out”,它们代表动画开始较慢然后加速,或者开始快速然后减速。
使用cubic-bezier(start, mid1, mid2, end)
如果您愿意的话,您甚至可以定义自己的缓动。这四个值代表动画开始、中点1、中点2 和结束时的速度。
关于CSS背景位置0.1s线性;,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16799727/