小编dav*_*qet的帖子
HTML5视频无缝循环
我知道这个问题已被多次询问了,我在StackOverflow上查看了它们中的每一个问题.
我只是试图在HTML5播放器中循环播放5秒的MP4视频并使其无缝连接.我已尝试过jwplayer和video.js,无论是在本地还是在网站空间,都没有.我尝试过使用"已结束"的活动; 我试过预加载/预缓冲; 我已经尝试过收听视频的最后一秒,然后寻求开始完全绕过停止/播放事件.我仍然总是看到抖动,我仍然总是看到加载图标(最新的Chrome和Firefox).
作为参考,这是我最新的video.js代码:
<video id="loop_me" class="video-js vjs-default-skin vjs-big-play-centered"
width="640" height="480"
data-setup='{"controls": false, "autoplay": true, "loop": true, "preload": "auto"}'>
<source src="video/loop_me.mp4" type="video/mp4" />
</video>
<script type="text/javascript">
var myPlayer = videojs("loop_me");
videojs("loop_me").ready(function(){
this.on("timeupdate", function(){
var whereYouAt = myPlayer.currentTime();
if (whereYouAt > 4) {
myPlayer.currentTime(1);
}
});
});
</script>
有没有人成功地做到了这一点？如果是这样,请你发一个完整的解决方案吗？我通常不会要求或想要那些,但我认为这次可能是必要的.
推荐指数
解决办法
查看次数
使用带有SVG <object>的Google字体
我正在使用<object>标签在我的页面中嵌入SVG ,他们应该使用Google字体(例如Roboto).但是,SVG不会选择这些字体,而是默认使用系统字体.
我究竟做错了什么？每个SVG都要求嵌入字体<style>吗？
示例代码:
<head>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
</head>
<body>
<object width="250" height="200" type="image/svg+xml" data="img/popup_image.svg"></object>
</body>
SVG片段:
<text font-size="14" fill="#333" font-family="Roboto">Words go here</text>
推荐指数
解决办法
查看次数
使用CSS过渡在Firefox中奇怪的像素移位/跳跃
问题:
我正在使用CSS来翻转卡片并展示一只小猫.有一种行为似乎只存在于Firefox中,因此它会不断地将图像移动/调整几个像素.只需将鼠标悬停在卡背上,观察它在缩放动画完成后移动一点,然后通过单击它来翻转卡片以观察小猫在动画之后如何重新调整其位置和大小.
同样,这不会发生在Chrome或Internet Explorer中.任何人都可以解释是什么导致它或提供补救措施？
小提琴:
代码:
$('.card').mouseover(function() {
$(this).css({
'transform': 'scale(1.2)',
'-webkit-transform': 'scale(1.2)',
'transition': 'transform 500ms',
'-webkit-transition': '-webkit-transform 500ms'
});
}).mouseleave(function() {
$(this).css({
'transform': 'scale(1)',
'-webkit-transform': 'scale(1)',
'transition': 'transform 500ms',
'-webkit-transition': '-webkit-transform 500ms'
});
}).mousedown(function() {
$('div.back').css({
'transform': 'perspective(1000px) rotateY(-180deg) translateZ(0)',
'-webkit-transform': 'perspective(1000px) rotateY(-180deg)',
'transition': 'transform 800ms ease-in-out 300ms',
'-webkit-transition': '-webkit-transform 800ms ease-in-out 300ms'
});
$('.hide').show();
$('div.front').css({
'transform': 'perspective(1000px) rotateY(0) translateZ(0)',
'-webkit-transform': 'perspective(1000px) rotateY(0)',
'transition': 'transform 800ms ease-in-out 300ms',
'-webkit-transition': '-webkit-transform 800ms ease-in-out 300ms',
'backface-visibility': 'hidden',
'-webkit-backface-visibility': …推荐指数
解决办法
查看次数
Bootstrap:使用offcanvas侧边栏时保持内容响应
以下是我目前正在进行的工作示例:
这就是我想做的事情:
内容(即三个圆圈或其中的任何内容<section>)都是响应式的,并调整自身大小以适应当前的浏览器大小.尝试使小提琴渲染窗口变小并注意圆圈的堆叠方式.
现在,当我点击汉堡包菜单时,我希望同样的事情发生.出现的侧边栏使用" offcanvas reveal "将其自身推入视图,但不会触发响应行为; 它只是将所有内容推到页面边缘.我该如何解决这个问题？
这是我的代码:
<div id="wrapper">
<header>
<div class="navmenu navmenu-default navmenu-fixed-right">
<ul class="nav navmenu-nav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li class="active"><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
</header>
<div class="canvas">
<div class="navbar navbar-default navbar-fixed-top">
<button type="button" class="navbar-toggle" data-toggle="offcanvas" data-recalc="false" data-target=".navmenu" data-canvas=".canvas">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="container">
<!-- content here -->
</div>
</div>
</div>
推荐指数
解决办法
查看次数
多个同步CSS3变换以不同的速度转换
题:
是否有可能在一个元素上进行两种不同的变换并让它们以不同的速度转换？
没有变换的例子(小提琴):
div {
width: 100px;
height: 100px;
background: red;
transition: width 1s linear, height 2s linear;
}
div:hover {
width: 200px;
height: 400px;
}
注意宽度扩展到200px需要1秒钟,高度扩展到400px需要2秒钟.
变换示例(小提琴):
div {
width: 100px;
height: 100px;
background: red;
transition: transform 1s linear, transform 2s linear;
}
div:hover {
transform: scale(1.5);
transform: rotate(45deg);
}
注意它只执行第二次转换.如何指定要为转换执行哪个转换？这是CSS转换设计的疏忽吗？我怎样才能完成这个？
推荐指数
解决办法
查看次数
CSS 过滤器在对象周围创建实心边框
问题描述（小提琴）：
我试图在具有透明度的 PNG 周围制作实心边框，所以box-shadow不是一个选项（因为它只会遮蔽图像的方角）。
如何filter: drop-shadow()在不使用模糊或散布阴影的情况下在整个元素周围创建边框？我可以对同一个元素应用多个过滤器来达到这种效果吗？还是有另一种方法来实现这一目标？
代码：
#object {
position: absolute;
left: 50%;
top: 50%;
margin-left: -211px;
margin-top: -120px;
}
.shadow {
-webkit-filter: drop-shadow(5px 5px white);
}
推荐指数
解决办法
查看次数
是否可以模糊或淡出 SVG 路径？
是否可以模糊或淡出 SVG 路径？我有一堆线条，理想情况下我希望在开头或结尾（即仅在一侧）淡出，或者至少模糊它们，这样看起来一半比另一半更清晰。
如果不可能，我怎样才能改变 SVG 以使其成为可能？
var bodyElement = document.querySelector("body");
bodyElement.addEventListener("mousemove", getMouseDirection, false);
var xDirection = "";
var yDirection = "";
var oldX = 0;
var oldY = 0;
function getMouseDirection(e) {
if (oldX < e.pageX) {
xDirection = "right";
} else {
xDirection = "left";
}
if (oldY < e.pageY) {
yDirection = "down";
} else {
yDirection = "up";
}
oldX = e.pageX;
oldY = e.pageY;
}
var tl;
$('g')
.on('mouseover', function() {
tl = new TimelineLite();
if …推荐指数
解决办法
查看次数
将圆角边框添加到元素的选定角上
我怎么能用纯CSS来构建这样的东西呢？
到目前为止,我已经走了多远:小提琴
即使我继续添加额外的spans ,我也在努力想要在那里获得圆角.
码:
body {
background: #000;
}
.container {
position: relative;
width: 300px;
height: 150px;
margin: 10% auto;
}
.top-right {
position: absolute;
top: -10px;
right: 0;
width: 50px;
height: 1px;
background: white;
border-radius: 5px;
}
.box {
width: 100%;
height: 100%;
background: red;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
}
h3 {
color: white;
}<div class="container">
<span class="top-right"></span>
<div class="box">
<h3>Content</h3>
</div>
</div>推荐指数
解决办法
查看次数
重用类的问题/不理解实例化
更新 - 这里的 JSFiddle 演示：https ://jsfiddle.net/vb2ptmuo/11/
我正在玩我遇到的一个有趣的效果：https : //tympanus.net/codrops/2019/08/07/image-trail-effects/
首先，我有一个div包含一堆img元素的。它将它们转储到一个数组中，然后从跟随鼠标的那些图像中创建轨迹效果。您可以通过new ImageTrail(".content"). 但是，如果我有不止一组图像并且我想用这些图像再次重新触发它呢？例子：
<div class="content">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
</div>
<div class="content-2">
<img src="4.jpg">
<img src="5.jpg">
<img src="6.jpg">
</div>
执行第二个操作new ImageTrail(".content-2")并不会用第二组图像替换第一组图像，即使代码像它应该的那样读给我听。您仍然只能看到跟踪中的第一组图像。
如果我将 ImageTrail 类实例化两次（如果这甚至是一件事），我也有点担心性能，但这完全是我的主要问题的次要问题。
我觉得有一个简单的解决方案，但我很想念它。向下滚动到演示底部的注释代码“这不起作用”
推荐指数
解决办法
查看次数
在 Pixi.js 中绘制线条动画
是否可以在 Pixi.js 中为线条绘制动画？（画布、WebGL 等等。）
我完全理解如何为已经渲染的线条或对象设置动画，但是如何让它为线条本身的绘图设置动画，就像使用 TweenMax 一样？我已经对示例和代码进行了详尽的搜索，但令我感到震惊的是，我一直无法找到这样做的单一参考点。
var stage = new PIXI.Container();
var graphics = new PIXI.Graphics();
graphics.lineStyle(20, 0x33FF00);
graphics.moveTo(30,30);
graphics.lineTo(600, 300);
stage.addChild(graphics);
animate();
function animate() {
renderer.render(stage);
requestAnimationFrame( animate );
}
推荐指数
解决办法
查看次数