小编Kai*_*ido的帖子
CSS动画不适用于<img>中的svg
我试图在图像/对象标签中设置SVG动画,但它无法正常工作
svg {
width: 100%;
height: 200px;
}
.rotate-45 {
transform-origin: center;
transform: rotate(45deg);
}
.rotate {
transform-origin: center;
animation: rotate 1s ease-in-out infinite;
}
.rotate-back {
transform-origin: center;
animation: rotate 1s ease-in-out infinite;
animation-direction: alternate;
}
.left {
animation: move 1s ease-in-out infinite;
}
.right {
animation: move 1s ease-in-out infinite;
}
@keyframes rotate {
100% {
transform: rotate(calc(90deg + 45deg));
}
}
@keyframes move {
50% {
transform: translate(-30px, -30px);
}
} <svg width="100%" height="100%" viewBox="0 0 1000 …推荐指数
解决办法
查看次数
如何在var()中设置动态属性名称
我试图使用基于动态值的自定义属性,例如attr().
例如,在下面的代码中,我尝试根据当前元素的id属性访问两个自定义属性.
:root{
--app-foo: 'Hello';
--app-bar: 'World';
}
div::after{
/* expected :
'Hello' for #foo
'World' for #bar */
content: var('--app-'attr(id));
}<div id="foo"></div>
<div id="bar"></div>但它显然失败了.
有没有办法实现这个目标？
推荐指数
解决办法
查看次数
JavaScript 获得 Audio.setSinkId 的权限
我正在尝试更改sinkIdchrome 应用程序中的音频元素。
代码：
var audio = new Audio();
audio.setSinkId("communications");
我会收到这个错误：
DOMException: No permission to use requested device
因此，为了获得许可，我尝试这样做：
navigator.webkitGetUserMedia({
audio: true
}, (stream) => {
console.log("stream: ", stream);
}, (error) => {
console.log("error: ", error);
});
但现在我明白了：
error:
NavigatorUserMediaError {name: "InvalidStateError", message: "", constraintName: ""}
不知道有没有
- “音频”不可用（但实际上应该）
- 我需要一个安全的连接（但我如何在 Chrome 应用程序上获得它？）
推荐指数
解决办法
查看次数
小数不是精确的
如果我做0.3 - 0.2它给0.9999999998不是0.1有没有办法让它给出一个十进制的percise？如果计算器不精确,就不能相信它.
推荐指数
解决办法
查看次数
为什么阻塞事件循环不会阻塞css动画？
我不知道网页渲染生命周期 - 所以在下面的例子中我有两颗心 - 一颗由 js 动画，另一颗由 CSS 动画。当我用alert消息阻止事件循环时，CSS 心脏保持动画状态。
let scale = true;
setInterval(() => {
$('.animate-js').css('transform', `scale(${scale ? 1.4 : 1})`);
scale = !scale;
}, 1000)body {
text-align: center;
}
.heart {
white-space: nowrap;
display: inline-block;
font-size: 150px;
color: #e00;
transform-origin: center;
}
.animate-css {
animation: beat 2s steps(2, end) infinite;
}
/* Heart beat animation */
@keyframes beat {
to {
transform: scale(1.4);
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="heart">I
<div class="animate-css heart">♥</div> CSS</div>
<div …推荐指数
解决办法
查看次数
围绕DIV的HTML / CSS文本
因此，我正在寻找一个H1标签来围绕一个容器。如果使用CSS旋转，则可以旋转文本，但显然只能旋转90度，而不是围绕div旋转。我希望将文本保留在ONE H1标签中，因为设计人员希望将其作为页面的标题并用于SEO。
我不确定从我所做的所有研究中是否有可能。我有点难过。我想你们可能知道这是否有可能。
例如：
<h1>Latest News</h1>
<div>Blue Square</div>
推荐指数
解决办法
查看次数
为什么 IntersectionObserver 返回的数组中 forEach 的索引始终为 0？
我正在使用 IntersectionObserver API。
当进入特定部分时，background-color会发生变化。为了处理这个问题，我必须获取此处调用的
数组中输入条目的索引。 IntersectionObserverEntryentries
我使用forEach方法来获取条目的索引，但奇怪的是它总是将索引设置为0。但是当我通过获得的索引访问条目时，它工作得很好。
const intersectionObserver = new IntersectionObserver(entries => {
entries.forEach((entry,index) => {
if(entry.isIntersecting) {
console.log('Intersecting',index);
entry.target.className = entry.target.className.replace('hidden','fadeIn');
changeBackgroundColor(entry.target.dataset.color);
changeLogoColor(entry.target.dataset.theme);
} else {
console.log('Leave',index);
entry.target.className = entry.target.className.replace('fadeIn','hidden');
}
});
});
const fadeInElemes = document.querySelectorAll('.hidden');
fadeInElemes.forEach((fadeInElem) => intersectionObserver.observe(fadeInElem));
结果如下...
相交 0
离开 0
离开 0 .....
我的代码有什么问题吗？为什么索引总是0，但是通过获取的索引访问却得到了正确的元素？
编辑
推荐指数
解决办法
查看次数
HTMLImageElement - src 作为流
过去，您可以使用URL.createObjectURL()MediaStream 并将其传递给它。但是，这已被删除（参见https://www.fxsitecompat.dev/en-CA/docs/2017/url-createobjecturl-stream-has-been-deprecated/）。
替换功能是改为使用HTMLMediaElement.srcObject. 这很好地覆盖了视频案例。
但是，HTMLImageElement不继承自HTMLMediaElement. 它也没有 srcObject。
在我的特定情况下，我正在开发一个 FireFox 插件，它利用 WebRequest 过滤器流功能进行图像转换。使用该 API，我获得了 ArrayBuffer 数据块。我希望能够在我收到它们时将它们流式传输到Image()正在解码它们的实时解码器，而不是简单地累积它们，将它们转换为 Blob，然后通过URL.createObjectURL(blob).
有没有办法以流媒体方式完成此任务？
（注 1：如果需要，我可以使用 FireFox 特定的解决方案。）
（注意 2：我尝试将HTMLVideoElementsrc设置为例如 PNG 但看起来视频元素确实很挑剔并且只支持视频格式而不是静止HTMLVideoElement.srcObject图像。如果我可以加载图像静止图像，那也可能使基于 MediaStream 的解决方案成为可能）。
推荐指数
解决办法
查看次数
CSS 过滤器：反转不适用于背景颜色
我将以下 CSS 应用于<html>标签：filter: invert(1);
所有元素甚至元素都被反转background-color，（Chrome v80）
一旦我在 Safari iOS 13 / Safari MacOS 上尝试相同的方法，除了 <html> 之外的每个元素都会被反转 background-color
我运行的所有浏览器都支持 CSS 过滤器属性：
https://caniuse.com/#feat=mdn-css_properties_filter。
有人可以解释这种行为吗？
html {
filter: invert(1);
/* this background-color does not change on ios+other browsers */
background: #fff;
padding: 50px;
}
body {
background-color: #0000ff;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.text {
text-align: center;
color: red;
}<div class="text">
If it works: color should not be red, background should not …推荐指数
解决办法
查看次数
如何捕获 MediaRecorder.ondataavailble 不再被调用的问题？
我正在使用 捕获用户的音频和视频，navigator.mediaDevices.getUserMedia()然后使用MediaRecorder并将ondataavailable该视频和音频 blob 存储在本地以便稍后上传。
现在我正在处理一个问题，由于某种原因，ondataavailable在录音过程中停止被调用。我不知道为什么，也没有收到任何出错的警报。首先，有谁知道为什么会发生这种情况以及如何捕获错误？
其次，我尝试过重现。通过做这样的事情。
navigator.mediaDevices.getUserMedia({ audio: true, video: true })
.then(function(camera) {
local_media_stream = camera;
camera.getVideoTracks()[0].onended = function() { console.log("VIDEO ENDED") }
camera.getAudioTracks()[0].onended = function() { console.log("Audio ENDED") }
camera.onended = function() { console.log("--- ENDED") }
camera.onremovetrack = (event) => { console.log(`${event.track.kind} track removed`); };
}).catch(function(error) {
alert('Unable to capture your camera. Please check logs.' + error);
console.error(error);
});
并记录流
recorder = new MediaRecorder(local_media_stream, {
mimeType: encoding_options,
audioBitsPerSecond: 128000,
videoBitsPerSecond: …javascript getusermedia web-mediarecorder mediastream mediastreamtrack
推荐指数
解决办法
查看次数
标签 统计
javascript ×7
css ×5
html ×4
css3 ×2
image ×2
mediastream ×2
arrays ×1
audio ×1
browser ×1
dynamic ×1
getusermedia ×1
html5 ×1
sass ×1
svg ×1