小编I h*_*ode的帖子
如何创建纯CSS三维球体？
tl; dr: 我想用CSS创建一个实际的3D球体 - 而不仅仅是一种幻觉
注意:某些代码段示例没有响应.请全屏使用.
使用纯CSS,您可以创建和动画 三维立方体,如下所示:
#cube-wrapper {
position: absolute;
left: 50%;
top: 50%;
perspective: 1500px;
}
.cube {
position: relative;
transform-style: preserve-3d;
animation-name: rotate;
animation-duration: 30s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes rotate {
0% {
transform: rotate3d(0, 0, 0, 0);
}
100% {
transform: rotate3d(0, 1, 0, 360deg);
;
}
}
.face {
position: absolute;
width: 200px;
height: 200px;
border: solid green 3px;
}
#front_face {
transform: translateX(-100px) translateY(-100px) translateZ(100px);
background: rgba(255, 0, 0, 0.5); …推荐指数
解决办法
查看次数
强制重新激活ajaxed内容上的所有(脚本/函数)
TL;博士
我使用ajax来获取新内容.提取内容并将其添加到页面中.但是,脚本不会"重新启动",因为它们的调用不在ajaxed之外div.
脚本加载和触发初始页面加载没有任何问题,但是当我通过ajax添加新内容时没有.我没有控制台错误,如果我直接访问URL,则没有问题.
有关:
- 强制脚本在AJAX加载页面中运行 - 与一个特定脚本相关.我想修复(重新)所有脚本,包括来自Cloudflare应用程序的动态脚本
- 在Wordpress中使用带有Ajax的jQuery脚本 - 与上面相同,这仅涉及一个特定的脚本
- ajax加载内容,脚本没有执行
介绍:
我在WordPress网站上使用Ajaxify WordPress站点(AWS).
该插件允许您div通过其id 选择a ,然后div使用ajax 在其中获取新内容
HTML标记
<html>
<head></head>
<body>
<div id="page">
<header></header>
<main id="ajax"> <!-- This is what I want to ajaxify -->
<div class="container">
main page content
</div>
</main> <!-- end of ajaxfied content -->
<footer></footer>
</div> <!-- #page -->
</body>
</html>
问题
插件工作,我得到新鲜的内容加载和样式,但有一个问题.我的一些页面脚本和函数调用不在我使用ajax的div之外.我有两个例子
1-砌体装载并调用 <footer>
<html>
<head></head>
<body>
<div id="page">
<header></header>
<main id="ajax"> …推荐指数
解决办法
查看次数
隐藏在堆积的div后面溢出与透明背景在身体顶部有SVG背景
我有一个包含fixeddiv(#navigation)的布局,其中包含按钮.布局还包括可滚动内容(.card).
#navigation目前有一个绿色背景用于演示目的.像这样:
#navigation {
position: fixed;
top: 20px;
left: 50%;
transform: translate(-50%, 0%);
background: green;
padding: 25px;
}<div id="navigation"><button id="btn1">Button</button>
<button id="btn2">Button</button>
<button id="btn3">Button</button>
<button id="btn4">Button</button>
</div>我想.card在绿色背景后面隐藏任何元素的任何部分.所以,我使用z-index堆叠顺序,它运作良好.像这样:
#card-wrapper {
width: 250px;
margin: 100px auto;
}
.card {
height: 200px;
width: 200px;
background: #131418;
margin: 1em auto;
display: inline-block
}
#navigation {
position: fixed;
top: 20px;
left: 50%;
transform: translate(-50%, 0%);
z-index: 1;
background: green;
padding: 25px;
}
#main { …推荐指数
解决办法
查看次数
如何在YouTube嵌入<iframe>中重置活动的触摸事件监听器？
TL;博士:
YouTube嵌入式视频<iframe>标签具有触摸事件监听器.活动的触摸事件监听器会导致滚动性能问题 - AKA jank.我通常通过在CSS中使用 来修复与活动触摸事件相关的jank问题.这不适用于Youtube嵌入式视频元素.touch-action: initial <iframe>
介绍:
Kayce Basques - Google技术人员 - 写道:
当您滚动页面并且有一个延迟使页面感觉不固定在您的手指上时,这称为滚动扫描.很多时候,当你遇到滚动冲击时,罪魁祸首是一个触摸事件监听器.
触摸事件侦听器通常用于跟踪用户交互和创建自定义滚动体验,例如在与嵌入式Google地图交互时完全取消滚动.
目前,浏览器无法知道触摸事件监听器是否要取消滚动,因此它们总是在滚动页面之前等待监听器完成.
我找到了一种方法来使用触摸操作来回避这个问题
触摸动作CSS属性指定用户是否可以通过触摸屏操纵给定区域以及以何种方式操作(例如,通过平移或缩放浏览器内置的功能).
如果我用touch-action: initial这个问题就消失了.
如果你想看看是什么导致滚动抖动和什么不滚动,请检查下面的屏幕截图
红色按钮会导致凹陷,而绿色按钮则不会.两者之间的唯一区别是红色按钮被设置为touch-action: manipulation使红色按钮主动"监听"并处理输入,然后滚动才能继续
问题
我嵌入了来自Youtube的视频.iframe包含活动的触摸事件侦听器.我上面提到的方法不起作用.我无权访问Youtube代码来编辑侦听器并将其设置为被动.
我试图缩小这个问题的范围.我发现该类的元素具有.html5-video-player以下CSS
.html5-video-player {
touch-action: manipulation;
}
根据文档, manipulation可以
[...]启用平移和捏缩放手势,但禁用其他非标准手势,例如双击缩放.禁用双击以进行缩放消除了浏览器在用户点击屏幕时延迟生成点击事件的需要.这是"pan-x pan-y pinch-zoom"的别名(为了兼容性,它本身仍然有效).
和
[...]也经常用于完全禁用由于支持双击缩放手势而导致的点击事件延迟.
所有这些都是我不需要的东西.
Logic说我需要做的就是将它添加到我的CSS中
.html5-video-player {
touch-action: initial;
}
但这不起作用,也不是这样:
.html5-video-player {
touch-action: initial !important;
}
或这个:
.html5-video-player …推荐指数
解决办法
查看次数
标签 统计
css ×3
javascript ×3
jquery ×2
ajax ×1
css-shapes ×1
css3 ×1
dom-events ×1
iframe ×1
listener ×1
wordpress ×1
youtube-api ×1