我正在尝试围绕另一个对象（圆）绕一个“点”轨道，但是由于z-index该点始终出现在圆的上方，因此它就意味着绕轨道旋转。
CodePen链接：https ://codepen.io/moy/pen/ROVZXd ? editors = 1100
理想情况下，动画的第二部分应在对象的后面进行，这样才能看到动画的另一半，直到另一边出来-可能吗？
我考虑过淡化正在移动的物体，但我不认为这样会产生平滑/遮盖的效果？
关于如何掩盖此区域，我有些困惑，因为我看不到CSS知道要隐藏的方式。我以为也许可以z-index通过动画更改50％的比例并将其重置为0％/ 100％，但这似乎无济于事。
有任何想法吗？提前致谢！
.earth {
background: white;
border: 1px solid black;
border-radius: 50%;
display: block;
height: 100px;
margin: 30px auto;
position: relative;
width: 100px;
z-index: 20;
}
.orbit {
border: 2px #eee transparent;
border-radius: 50%;
height: 140px;
margin: auto;
position: absolute;
top: -20px;
left: -20px;
transform: rotateZ(60deg) rotateY(60deg);
transform-style: preserve-3d;
width: 140px;
z-index: 10;
}
.orbit .moon {
animation: move ease-in-out infinite;
animation-duration: 2s;
background: black; …我有一个<ul>包含图像的几个列表项.该<ul>显示器水平上更宽的屏幕,但是手机上显示我的列表项通过2的2我原本这与float:left; width: 50%;在列表项的一套伟大的工作.但由于图像是徽标和所有不同的尺寸,它看起来不正确,所以我决定使用flexbox重新排序列表项目,以便图像排列不同,看起来更整洁.我的CSS如下:
ul {
overflow: hidden;
display: -webkit-box; /* OLD: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* OLD: Firefox (buggy) */
display: -ms-flexbox; /* MID: IE 10 */
display: -webkit-flex; /* NEW, Chrome 21?28, Safari 6.1+ */
display: flex;
-webkit-flex-flow: row wrap;
-moz-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
li {
display: block;
margin: 0 0 @baseline/2 0;
padding: 0;
text-align: center;
width: 50%;
}
li:nth-child(1) …编辑仔细检查后，调整视口大小时这非常糟糕。它停止工作或在狭窄的窗口上，并且滚动速度超级超级快。所以我把它作为赏金！
--
我见过类似的东西，并一直在尝试重构 JS。我有两列内容，滚动时它们向相反的方向移动。这应该连续循环。
问题是我是否删除元素的高度.project。向下滚动时内容会平滑滚动，但向上滚动时则不会。内容的高度/长度会有所不同，因此我在这里实际上无法确定固定值。
这似乎取决于视口高度。如果 UI 的行为符合预期，并且我减小了视口的宽度，它可能会像上面描述的那样停止工作。但如果我随后降低高度 - 它可以再次开始正常运行。那么也许这取决于加载时视口中可见的内容量？
示例（也在代码片段中）： https ://jsfiddle.net/rdowb0y5/1
我将添加一个“媒体查询”，以便仅在平板电脑/桌面视图和移动设备上可见，JS 被删除并且内容只是堆叠。
预先感谢 - 真的期待对此的一些支持！
$(document).ready(function() {
var num_children=$('.split-loop__left').children().length;
var child_height=$('.split-loop__right').height() / num_children;
var half_way=num_children * child_height / 2;
$(window).scrollTop(half_way);
function crisscross() {
var parent=$(".split-loop"); //.first();
var clone=$(parent).clone();
var leftSide=$(clone).find('.split-loop__left');
var rightSide=$(clone).find('.split-loop__right');
if (window.scrollY > half_way) {
//We are scrolling up
$(window).scrollTop(half_way - child_height);
var firstLeft=$(leftSide).children().first();
var lastRight=$(rightSide).children().last();
lastRight.appendTo(leftSide);
firstLeft.prependTo(rightSide);
}
else if (window.scrollY < half_way - child_height) {
var lastLeft=$(leftSide).children().last();
var …我已经使用Flexslider一段时间并且喜欢它,但我有一个自定义功能,我试图实现我有点卡住了.
在每张幻灯片中,我有一些带有2个按钮的文本,基本上是真或假.单击其中一个按钮后,根据用户是否选择了正确的答案进行动画处理.不管他们选择什么,经过几秒钟的短暂延迟后,我希望幻灯片能够动画到下一张幻灯片.
我的flexslider调用如下所示:
$(window).load(function () {
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
slideshow: false,
controlNav: false,
touch: true,
smoothHeight: true
});
});
我设法创建了一些javascript,以便在单击按钮时移动到第二张幻灯片:
$('.true-or-false .btn').click(function () {
$('.slider').flexslider(0);
});
但是,为每一个按钮执行此操作会很痛苦,我试图找到一个"下一个"功能但却无法正常工作.除此之外,我试图添加.delay(2000)但是上面的代码看起来似乎不太好.
我认为flexslider中的幻灯片有延迟功能,我只需要找到一种方法,使用自定义按钮移动到下一张幻灯片.任何人都可以对此有所了解吗？
感谢您抽时间阅读!STE
*编辑*
出于某种原因,当我第一次尝试下面的代码时,它没有用,但现在添加'next'会使幻灯片在点击按钮时动画到下一个 - 现在我只需要延迟!
$('.true-or-false .btn').click(function () {
$('.slider').flexslider('next');
});
我试图确保在共享我的网站时显示正确的元信息。我以为我可以正常工作，但我在不同的社交网站上遇到了一些问题，如下所示：
最初我只有这些meta name="twitter:东西，但后来添加了meta property="og:上面的内容，因为我被告知这是 LinkedIn 需要的。
这是我在网站中使用的元/OpenGraph 数据head：
<!-- OpenGraph -->
<meta property="og:title" content="myurl.com - What this website is" />
<meta property="og:description" content="Specialising in lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod." />
<meta property="og:url" content="http://myurl.com" />
<meta property="og:image" content="/img/site/linkedin-media-image.png" />
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@twitteruser">
<meta name="twitter:url" content="https://myurl.com">
<meta name="twitter:title" content="I am a lorem ipsum dolor sit amet, consectetur …我在任何地方都找不到。熟悉MailChimp的任何人都可以提出建议吗？
我已经嵌入了表单/输入，并且有一些空的div（下），其中插入了错误/成功消息。
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
当我将自定义文本添加到空div时，提交表单时它就会被覆盖，因此很显然，它是从某种方式/位置从MailChimp获取内容的！
有任何想法吗？
我试图实现的效果是点击一个按钮,一个由8个三角形组成的圆圈旋转.当它停止时,选择圆顶顶部的三角形.然后打开相对于所选段的fancybox覆盖(最后一部分尚未工作).选择段的顺序对用户来说是随机的,但可以像我在CSS中那样预设(当前:第3>第6>第1>第8>第2>第5>第7>第4).
我已经创建了一个codepen来显示我目前的进展,你可以通过访问下面的链接看到它很难解释.
http://codepen.io/moy/pen/DrbAL
单击"旋转"按钮时,圆圈旋转3次(1080度)+另外270度,因此第3个列表项目位于div的顶部 - 这样可以正常工作.
我的第一个问题是:在第二次点击按钮时,圆圈需要再次旋转3次然后再多一点,将下一个选定的列表项/段(6)定位在div的顶部,依此类推其余的项目.有没有办法做到这一点,而不必添加1080到圆已经旋转的数量？因此,值始终为1080deg+圆圈需要旋转以将相关线段定位在div顶部的额外量.否则,最后一项的值将达到10000度!如果必须这样做,我想我将不得不忍受它,并得到我的数学帽子.
第二个问题是:一旦圆圈完成旋转,我该如何显示相关的fancybox叠加？ID目前是每个叠加的标题,但可以很容易地覆盖-1,叠加-2等,以匹配每次旋转后在旋转轮上设置的spin-1,spin-2的类别.
谢谢,希望有人能帮忙!
我觉得我在这里遗漏了一些非常明显的东西，我可以为其编写 CSS，但我想知道是否有一种方法可以使用嵌套 SCSS 来做到这一点。如果您在某个类上设置了样式，并且该类位于不同的元素上，是否可以调整样式。例如一个h2然后是一个h3。我知道你可以通过额外的课程来做到这一点，比如......
.title-class {
background-size: 30px;
font-size: 30px;
&.another-class {
background-size: 20px;
font-size: 20px;
}
}
这将呈现为.title-class.another-class {}
我所追求的是基类.title-class {}和嵌套样式h3.title-class {}- 这可能吗？
我认为类似以下内容（理论上）显然行不通！我尝试使用@root，但我对此的理解很少，所以我无法让它工作。
.title-class {
background-size: 30px;
font-size: 30px;
&h3 {
background-size: 20px;
font-size: 20px;
}
}
提前致谢！