如何改变闪烁效应中的线性梯度颜色
如何改变闪烁效应中的线性梯度颜色
提问于 2022-07-19 07:44:53
这也许是个愚蠢的问题，但我想不出来。
我需要显示作为占位符的卡片上的闪烁，直到实际的内容被加载。我使用了来自这个回答的CSS，当我应用一个黑暗的背景时，对角线闪烁的颜色改变为黑色，而我想要相同的颜色显示在链接的答案中。对角线闪烁的颜色是基于页面的背景色。
这是代码
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body{
background-color: black;
}
/* Float four columns side by side */
.column {
float: left;
width: 100px;
padding: 0 10px;
}
/* Remove extra left and right margins, due to padding */
.row {margin: 0 -5px;}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Style the counter cards */
.card {
height: 150px;
text-align: center;
background-color: #f1f1f1;
}
.shimmer {
display:inline-block;
-webkit-mask:linear-gradient(-60deg,#000 10%,#0005,#000 70%) right/300% 100%;
background-repeat: no-repeat;
animation: shimmer 2.5s infinite;
max-width:200px;
}
.starting{
margin-left: -10px
}
@keyframes shimmer {
100% {-webkit-mask-position:left}
}
</style>
</head>
<body>
<div class="row">
<div class="column shimmer starting">
<div class="card">
</div>
</div>
<div class="column shimmer">
<div class="card">
</div>
</div>
<div class="column shimmer">
<div class="card">
</div>
</div>
<div class="column shimmer">
<div class="card">
</div>
</div>
</div>
</body>
</html>下面是指向JSFiddle的链接
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-07-19 09:44:41
不要使用遮罩，使用背景，这样你就可以控制你想要的颜色
* {
box-sizing: border-box;
}
body{
background-color: black;
}
/* Float four columns side by side */
.column {
float: left;
width: 100px;
padding: 0 10px;
}
/* Remove extra left and right margins, due to padding */
.row {margin: 0 -5px;}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Style the counter cards */
.card {
height: 150px;
text-align: center;
background :linear-gradient(-60deg,#0000 10%,#0005,#0000 70%) right/300% 100%;
background-repeat: no-repeat;
animation: shimmer 2.5s infinite;
background-color: #f1f1f1;
}
.shimmer {
display:inline-block;
max-width:200px;
}
.starting{
margin-left: -10px
}
@keyframes shimmer {
100% {background-position:left}
}<div class="row">
<div class="column shimmer starting">
<div class="card">
</div>
</div>
<div class="column shimmer">
<div class="card">
</div>
</div>
<div class="column shimmer">
<div class="card">
</div>
</div>
<div class="column shimmer">
<div class="card">
</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73033007
复制相关文章
相似问题
腾讯云开发者
