有没有办法background-position取出百分比值？目前我的按钮仅适用于一个明确的价值观width和background-position.
body {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.button {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
color: white;
font-weight: bold;
width: 350px;
height: 50px;
border: 1px solid green;
transition: background 0.5s;
background-repeat: no-repeat;
background-image: linear-gradient(to left, #2484c6, #1995c8 51%, #00bbce), linear-gradient(to right, #2484c6 0%, #1995c8 51%, #00bbce 76%);
}
.button-pixel {
background-position: -350px 0px, 0px 0px;
}
.button-pixel:hover {
background-position: 0px 0px, 350px 0px;
}
.button-percentage …我正在尝试为div框创建放射状渐变光泽效果，但我不确定这样做的最佳方法是什么。我没有发现实现我想要实现的目标的资源；只是光泽会影响看起来像叠加的效果。
我发现的大多数示例看起来都是这样的http://jsfiddle.net/nqQc7/512/。
下面，我显示了我要创建的内容。
#shine-div {
height: 30vh;
width: 60vw;
margin-right: auto;
margin-left: auto;
border-radius: 10px;
/*background: radial-gradient(ellipse farthest-corner at right top, #FFFFFF 0%, #ffb3ff 8%, #ff33ff 25%, #800080 62.5%, #b300b3 100%);*/
display: flex;
justify-content: center;
align-items: center;
color: white;
font-weight: bold;
animation: colorChange 5s infinite;
}
@keyframes colorChange {
0% {
background: radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #ffb3ff 8%, #ff33ff 25%, #800080 62.5%, #b300b3 100%)
}
50% {
background: radial-gradient(ellipse farthest-corner at top, #FFFFFF 0%, #ffb3ff …我有锚标记链接的示例代码片段。如何使用过渡将背景颜色从下到上悬停？
我找到了这个参考链接，但这不是我想要在 css 中执行的操作，它使用伪元素before和after.
.container {width:1000px; max-width:100%; margin:0 auto; padding:0; text-align:center;}
a {margin:0 auto;text-decoration:none;width:150px; height:30px; background: red; display:block; border: 1px solid black; color:#fff;border-radius:20px; text-align:center;transform-origin: left top;
transition: all 1s ease;}
a:hover {background: green; color:black; border:1px solid green;}<div class="container">
<a href="#">Lorem Ipsum Dolor</a>
</div>它是使用 css 属性transition来transform做到这一点吗？请帮忙，我对 CSS3 很陌生。