- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试为看起来像 this one 的骨架添加一个微妙的微光动画。 .我目前有一个看起来像这样的屏幕(参见 CodePen ):
我正在尝试编写一个可以像这样接受 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/
我有两个包含两个接近矩形的形状的蒙版。 面罩示例(黄色): 现在,我要确定其中一个遮罩比另一个遮罩更接近实际矩形。 有可能实现吗? 最佳答案 获取轮廓和(旋转的)矩形边界框之间的面积差。面积差异最小的
我最近从 numpy 1.11 升级到 numpy 1.13 希望摆脱这个屏蔽数组警告,但它仍然存在: MaskedArrayFutureWarning:在具有共享掩码的掩码数组上设置项目不会复制掩码
我需要在sencha中的选项卡面板中添加一个加载掩码,我在 Controller 中通过Ajax请求加载了一个商店,但是在商店加载之前我需要放置一个加载掩码,并且在商店加载之后已加载,我需要将其删除。
我希望能够设置或清除 uintX_t 的(多个)位。 i 是一个运行时变量 (uintX_t)。b 是一个运行时变量 (uintX_t),它被限制为 0 或 1。 mask 是编译时常量。 有没有比以
我有一个处理程序,更像是一个提交按钮。我想掩盖整个页面或该表单以显示等待消息,直到完成其余过程。我做到了,它在FF中有效,但在IE中没有成功,当我执行Ext.getCmp('').body.mask(
我有我使用 Snap SVG 的 JS 代码。在某些时候我使用 element.attr({mask:maskelement}); 在该片段中,element和 maskelement是我的 svg
我需要从图标(.ICO) 文件中获取XOR Mask 和AND Mask。 如果有人可以建议我如何从 Java 执行此操作,那就太棒了。如果没有,您是否知道有任何应用程序可以获取这两个掩码并允许您扔掉
我一直在尝试学习scenekit并完成了一本书,但只有碰撞检测部分不明白,也许是最重要的部分。有类别掩码、共谋掩码和物理体?.contactTestBitMask。 我想创建一个简单的游戏来实现这个目
我在 Canvas 上制作了一个矩形 mask ,我需要 mask 外的任何东西都具有 0.8 的不透明度,因此 mask 外的所有对象都被视为不透明请看一下 fiddle 。 http://jsfi
我有一个包含可滚动内容的 div。我想为其添加一个覆盖内容的颜色 mask ,但不会随内容滚动。 http://jsfiddle.net/6e9t1wt3/1/ *{box-sizing:bord
在我的代码中,我必须选择这两个表达式之一(其中 mask 和 i 是非常数整数 -1 > i & 1) 和 (mask & 1 << i) 哪个更快?,我们在Stack Overflow上找到一个类似
我有一个包含 Image 的 Imageview 。还有一个包含兔子形状的面具形状。我有一个代码可以给出以下结果。 - (UIImage*)mynewmaskImage:(UIImage *)imag
您可能熟悉 enum 位掩码方案,例如: enum Flags { FLAG1 = 0x1, FLAG2 = 0x2, FLAG3 = 0x4, FLAG4 = 0x8
在本文之后,我将尝试实现他们如何计算每个实体的对数概率的平均值(第3.3节)。更具体地说,每个实体的得分计算为其令牌上的日志概率的平均值。。我有一个实体列表和一些提示:。任务是为每个提示找到应该适合的
我正在尝试遮盖比 mask 小的背景图像。背景和蒙版之间的空间显示为黑色。 这是我正在使用的代码: batch.end(); batch.begin(); Gdx
因此,我一直在尝试将背景图像裁剪成圆形 六边形,我发现 webkit 令人惊叹的 mask 图像非常容易地解决了我所有的问题。遗憾的是,它仅适用于 Chrome 和 Safari(当然)。 我如何为非
我有两个Java项目数据服务应用程序和数据报告应用程序,数据服务应用程序生成用于某些处理和数据报告应用程序的某些数据应该使用数据服务应用程序来使用它生成的数据来生成一些报告,这两个应用程序都应该构建为
我有一个带有绿色背景的简单 Activity ,我正在尝试提供一个带有透明圆形区域的红色叠加层。这是我要实现的效果: Expected Image 根据我在网上找到的代码,我看到的是这样的: Resu
我关注了这个link创建一个名为 mask 的自定义操作。tensorflow op的主体是 def tf_mask(x, labels, epoch_, name=None): # add "la
正如标题所说,我有 self.view,我将其添加到它的 mask 中(link) 属性另一个 View ,但是当我使用 addSubview 添加更多 View 到 self.view 时,掩码被删
我是一名优秀的程序员,十分优秀!