我有一个具有无限css3动画的元素,当元素悬停时,它会被更改为另一个无限动画.一切都还可以,但有时动画变化过于有弹性,有没有办法让动画在动画之间平滑(可能在动画之间将元素带到初始状态)在mouseenter和mouseleave上?两个动画的开始和结束状态是相同的.
@keyframes first-animation {
0% { transform: scale3d(1,1,0);}
50% { transform: scale3d(0.8,0.8,0); }
100% { transform: scale3d(1,1,0); }
};
@keyframes second-animation {
0% { transform: scale3d(1,1,0); }
70% { transform: scale3d(0.7,0.7,0); }
80% { transform: scale3d(0.9,0.9,0); }
100% { transform: scale3d(1,1,0); }
};
div{
animation: first-animation 1.7s ease-in-out infinite;
}
div:hover, div:focus{
animation: second-animation 1.1s ease-in-out infinite;
}
Run Code Online (Sandbox Code Playgroud) 如何从第n个元素开始选择所有子元素?例如,我有一个带有7个跨度的div,我需要选择以3-rd元素开头的所有跨距,因此应该选择4,5,6,7.
如何将绝对定位文本居中于流体相对父级?我正在尝试使用text-align:center父元素,但它总是将孩子的左角放在中心,而不是元素本身.
我有一个函数,用几行基本的JavaScript代码模拟输入,但是它附加了文本,但是我想在任何其他已经存在的文本/元素之前将文本添加到元素之前而不更改html结构.
如何通过最简单的JavaScript实现这一目标?
JavaScript的
var el = getElementById('one'), str = 'Abcdefg...'
function type(){
el.innerHTML += str.charAt(i); i++;
if(i < str.length){var t = setTimeout(type, 30);}
};type();
Run Code Online (Sandbox Code Playgroud)
HTML
<span id="one">...<span id="endingEl"></span></span>
Run Code Online (Sandbox Code Playgroud) 如何防止div扩展?我希望div元素不占用100%的可用空间,并且具有它的孩子所具有的宽度.我需要这个水平居中父div.诀窍是子元素应该共享float:left或diplay:inline-block和fluid width,因此可以有很少行的子元素.
我无法将每一行包装在自己的div中,因为它会破坏响应式设计.
将其设置为0 height时是否可以获得元素的attr 的css值max-height?
我需要知道多少元素才能显示onclick,并且由于每个元素的高度都不同,该高度随浏览器的大小而变化,因此我想从CSS文件中获取高度值。
我怎样才能做到这一点:
我有多个类的对象.我的目标是获取其中包含字符串(例如'toaster')的类名(或以该字符串开头)并将其放入变量中.注意我只知道类名的开头,我需要完整.
例如 <div class="writer quite-good toaster-maker"></div>
我有这个div作为我的jQuery对象,我只需要将类名toaster-maker放在变量中className;
我再次不需要选择对象!我只需要将类名放在变量中.
我该怎么做:
我想使用 wp_nav_menu() 创建菜单并稍微自定义它的输出 html。我想在菜单的每个项目中放入< i >链接。< a >< li >
我知道我可以使用< li >css中项目的背景图像来完成这个,但我的目标是在导航中使用字体图标。
我也知道为了实现这一点,我们可以在内部使用 walker 函数wp_nav_menu()或使用wp_get_nav_menu_object()函数,但我根本无法使其正常工作。
HTML:
<div class="wrap">
<div class="fixed"></div>
</div>
<div class="cover"></div>
Run Code Online (Sandbox Code Playgroud)
CSS:
.cover{z-index: 10;}
.wrap{position: relative; z-index: 1;}
.fixed{position: fixed; display: block; z-index: 1;}
Run Code Online (Sandbox Code Playgroud)
示例:http : //jsfiddle.net/6fq8L/
在页面滚动 .cover 元素隐藏在 .fixed 元素后面,尽管它的 z-index 属性更高。如何在 .wrap 和 .fixed 元素上方显示 .cover 元素,以便在滚动页面时覆盖它们?
有没有其他更方便的方法来防止变量变为否定而不是if声明?
var scrollTop = window.pageYOffset,
sW = (44 - .06*scrollTop);
if( sW < 0 ){ sW = 0; }
Run Code Online (Sandbox Code Playgroud) 如何选择具有一个特定类的所有父元素?例如:
<ul class="123">
<li>
<li>
<ul class="qwe">
<li>
<li>
<ul class="123">
<li class="select">
<li>
</ul>
</ul>
</ul>
Run Code Online (Sandbox Code Playgroud)
如何根据具有类'123'的类'select'的li选择所有父ul元素?