gpt4 book ai didi

html - 如何使用 CSS Mask 为骨架屏幕制作动画

转载 作者:行者123 更新时间:2023-12-02 16:28:50 25 4
gpt4 key购买 nike

我正在尝试为看起来像 this one 的骨架添加一个微妙的微光动画。 .我目前有一个看起来像这样的屏幕(参见 CodePen ):

Skeleton screen

我正在尝试编写一个可以像这样接受 SVG 的骨架组件:

<div class="skeleton" aria-busy="true">
<svg width="233" height="68" viewBox="0 0 233 68" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.8">
<rect x="79" y="32" width="154" height="11" rx="2" fill="black" fill-opacity="0.07"/>
<rect width="179" height="20" rx="2" fill="black" fill-opacity="0.07"/>
<rect x="79" y="52" width="84" height="11" rx="2" fill="black" fill-opacity="0.07"/>
<rect y="26" width="67" height="42" rx="2" fill="black" fill-opacity="0.07"/>
</g>
</svg>
</div>

这是我用来为 SVG 上方的闪光设置动画的 CSS:

.skeleton {
overflow: hidden;
position: relative;
}

.skeleton::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(to right, rgb(243, 242, 241) 0%, rgb(237, 235, 233) 50%, rgb(243, 242, 241) 100%) 0px 0px / 90% 100% no-repeat rgb(243, 242, 241);
transform: translateX(-100%);

animation-name: skeleton-animation;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-direction: normal;
animation-iteration-count: infinite;
}

@keyframes skeleton-animation {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}

我正在尝试弄清楚如何使用描述的某种掩码 here , 这样动画微光只发生在 SVG 上。

最佳答案

一种方法是使用 SVG 作为 mask-image 并更新线性渐变 background-position:

示例(使用您自己的渐变颜色进行更新):

.skeleton {
overflow: hidden;
position: relative;
width: 233px;
height: 68px;
background: linear-gradient(to right, rgb(143, 142, 141) 0%, rgb(237, 235, 233) 50%, rgb(143, 142, 141) 100%) 0px 0px / 100% 100% rgb(243, 242, 241);
-webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjMzIiBoZWlnaHQ9IjY4IiB2aWV3Qm94PSIwIDAgMjMzIDY4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KICAgIDxnIG9wYWNpdHk9IjAuOCI+DQogICAgICA8cmVjdCB4PSI3OSIgeT0iMzIiIHdpZHRoPSIxNTQiIGhlaWdodD0iMTEiIHJ4PSIyIiBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIxIi8+DQogICAgICA8cmVjdCB3aWR0aD0iMTc5IiBoZWlnaHQ9IjIwIiByeD0iMiIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMSIvPiANCiAgICAgIDxyZWN0IHg9Ijc5IiB5PSI1MiIgd2lkdGg9Ijg0IiBoZWlnaHQ9IjExIiByeD0iMiIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMSIvPg0KICAgICAgPHJlY3QgeT0iMjYiIHdpZHRoPSI2NyIgaGVpZ2h0PSI0MiIgcng9IjIiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjEiLz4NCiAgICA8L2c+DQogIDwvc3ZnPg==");
margin: 1em;
animation: linearAnim 2s infinite linear
}

@keyframes linearAnim {
0% {
background-position: 0px 0px;
}
100% {
background-position: 230px 0px;
}
}

/* demo purpose only */
.skeleton + .skeleton {

background: linear-gradient(to right, rgba(143, 142, 141,0.75) 0%, rgba(237, 235, 233, 0.75) 50%, rgba(143, 142, 141, 0.75) 100%) 0px 0px / 100% 100% rgba(243, 242, 241, 0.5);
}
.skeleton.blue {
background-color:blue;
}
.skeleton.red {
background-color:red;
}
.skeleton.yellow {
background-color:yellow;
}
.skeleton.green {
background-color:green;
}
.flex {display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding-top:0.6em;font-size:10px;color:#fff8;}
body {background:#bee; display:grid;grid-template-columns:repeat(auto-fill, 300px);}
<div class="skeleton" aria-busy="true"></div>
<div class="skeleton blue" aria-busy="true"></div>
<div class="skeleton red" aria-busy="true"></div>
<div class="skeleton yellow" aria-busy="true"></div>
<div class="skeleton green flex" aria-busy="true">On its way ...</div>

这是一个类似的问题,但方法不同 CSS animation, only render overlay on specific elements


编辑

如果要求将您的 SVG 放在 HTMl 中,您可以给它一个 ID 并即时进行编码部分

// https://www.w3docs.com/snippets/javascript/how-to-encode-and-decode-strings-with-base64-in-javascript.html

let svg = document.getElementById("mask").outerHTML
let sk =document.querySelector(".skeleton");
let encodedString = btoa(svg);
sk.setAttribute("style", " -webkit-mask-image: url('data:image/svg+xml;base64," + encodedString + "')");
.skeleton {
overflow: hidden;
position: relative;
width: 233px;
height: 68px;
background: linear-gradient( to right, rgb(143, 142, 141) 0%, rgb(237, 235, 233) 50%, rgb(143, 142, 141) 100%) 0 0 / 200% 100% rgb(243, 242, 241);
margin: 1em;
animation: linearAnim 1.25s infinite linear;
}

@keyframes linearAnim {

100% {
background-position: -200% 0;
}
}

#mask {
display: none;
}
<div class="skeleton" aria-busy="true">
<svg id="mask" width="233" height="68" viewBox="0 0 233 68" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.5">
<rect x="79" y="32" width="154" height="11" rx="2" fill="black" fill-opacity="0.5"/>
<rect width="179" height="20" rx="2" fill="black" fill-opacity="0.5"/>
<rect x="79" y="52" width="84" height="11" rx="2" fill="black" fill-opacity="0.5"/>
<rect y="26" width="67" height="42" rx="2" fill="black" fill-opacity="0.5"/>
</g>
</svg>
</div>

关于html - 如何使用 CSS Mask 为骨架屏幕制作动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63914191/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com