我有一些 HTML,由 CSS 动画,nth-child 遍历跨度列表。
/*Body*/
body{
background-color: #fff;
font-family: 'Century Gothic', sans-serif;
font-weight:300;
/* white-space: pre-wrap; */
}
/*Sentence*/
.sentence{
color: #222;
font-size: 20px;
text-align: left;
}
.orange{
color: orange !important;
}
/*Vertical Flip*/
.verticalFlip{
display: inline;
text-indent: 8px;
}
.verticalFlip span{
animation: vertical 15s linear infinite 0s;
-ms-animation: vertical 15s linear infinite 0s;
-webkit-animation: vertical 15s linear infinite 0s;
color: #000;
opacity: 0;
overflow: hidden;
position: absolute;
}
.verticalFlip span:nth-child(2){
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
}
.verticalFlip span:nth-child(3){
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.verticalFlip span:nth-child(4){
animation-delay: 7.5s;
-ms-animation-delay: 7.5s;
-webkit-animation-delay: 7.5s;
}
.verticalFlip span:nth-child(5){
animation-delay: 10s;
-ms-animation-delay: 10s;
-webkit-animation-delay: 10s;
}
.verticalFlip span:nth-child(6){
animation-delay: 12.5s;
-ms-animation-delay: 12.5s;
-webkit-animation-delay: 12.5s;
}
/*Vertical Flip Animation*/
@-moz-keyframes vertical{
0% { opacity: 0; }
5% { opacity: 0; -moz-transform: rotateX(180deg); }
10% { opacity: 1; -moz-transform: translateY(0px); }
25% { opacity: 1; -moz-transform: translateY(0px); }
30% { opacity: 0; -moz-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0;}
}
@-webkit-keyframes vertical{
0% { opacity: 0; }
5% { opacity: 0; -webkit-transform: rotateX(180deg); }
10% { opacity: 1; -webkit-transform: translateY(0px); }
25% { opacity: 1; -webkit-transform: translateY(0px); }
30% { opacity: 0; -webkit-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
@-ms-keyframes vertical{
0% { opacity: 0; }
5% { opacity: 0; -ms-transform: rotateX(180deg); }
10% { opacity: 1; -ms-transform: translateY(0px); }
25% { opacity: 1; -ms-transform: translateY(0px); }
30% { opacity: 0; -ms-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
<section class="wrapper">
<h2 class="sentence">
<div class="verticalFlip">
<span>1. 📖 Write a Blog post </span>
<span>2. Click <span class="orange">𝜓</span> to open it</span>
<span>3. ✎ Edit it. </span>
<span>4. ⇧ Readers upvote best writers</span>
<span> (✿◠‿◠) 𝟁 </span>
<span> ☆</span>
</div>
</h2>
</section>
我在一个 span 中嵌套了一个 span 来给一个字符涂上橙色:
Click <span class="orange">𝜓</span> to open it</span>
Nth-child 一个接一个地触发 span,但彩色 span 会导致计时中断。我可以看到橙色闪光,但句子中没有出现该字符。我可以重新定时第 n 个子动画,但我正在寻找一个 CSS 属性,如“不”、“忽略”、“跳过此跨度”或“识别此跨度是嵌套的”。
最佳答案
在 CSS 中,可以只定位 direct children使用 >
选择器的元素。在您的情况下,.verticalFlip span
的每个实例都将替换为 .verticalFlip > span
。见下文:
/*Body*/
body{
background-color: #fff;
font-family: 'Century Gothic', sans-serif;
font-weight:300;
/* white-space: pre-wrap; */
}
/*Sentence*/
.sentence{
color: #222;
font-size: 20px;
text-align: left;
}
.orange{
color: orange !important;
}
/*Wrapper*/
/* .wrapper{
background-color: #f5f5f5;
font-family: 'Raleway', sans-serif;
margin: 100px auto;
padding: 40px 40px;
position: relative;
width: 70%;
} */
/*Vertical Flip*/
.verticalFlip{
display: inline;
text-indent: 8px;
}
.verticalFlip > span{
animation: vertical 15s linear infinite 0s;
-ms-animation: vertical 15s linear infinite 0s;
-webkit-animation: vertical 15s linear infinite 0s;
color: #000;
opacity: 0;
overflow: hidden;
position: absolute;
}
.verticalFlip > span:nth-child(2){
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
}
.verticalFlip > span:nth-child(3){
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.verticalFlip > span:nth-child(4){
animation-delay: 7.5s;
-ms-animation-delay: 7.5s;
-webkit-animation-delay: 7.5s;
}
.verticalFlip > span:nth-child(5){
animation-delay: 10s;
-ms-animation-delay: 10s;
-webkit-animation-delay: 10s;
}
.verticalFlip > span:nth-child(6){
animation-delay: 12.5s;
-ms-animation-delay: 12.5s;
-webkit-animation-delay: 12.5s;
}
/*Vertical Flip Animation*/
@-moz-keyframes vertical{
0% { opacity: 0; }
5% { opacity: 0; -moz-transform: rotateX(180deg); }
10% { opacity: 1; -moz-transform: translateY(0px); }
25% { opacity: 1; -moz-transform: translateY(0px); }
30% { opacity: 0; -moz-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0;}
}
@-webkit-keyframes vertical{
0% { opacity: 0; }
5% { opacity: 0; -webkit-transform: rotateX(180deg); }
10% { opacity: 1; -webkit-transform: translateY(0px); }
25% { opacity: 1; -webkit-transform: translateY(0px); }
30% { opacity: 0; -webkit-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
@-ms-keyframes vertical{
0% { opacity: 0; }
5% { opacity: 0; -ms-transform: rotateX(180deg); }
10% { opacity: 1; -ms-transform: translateY(0px); }
25% { opacity: 1; -ms-transform: translateY(0px); }
30% { opacity: 0; -ms-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
<section class="wrapper">
<h2 class="sentence">
<div class="verticalFlip">
<span>1. 📖 Write a Blog post </span>
<span>2. Click <span class="orange">𝜓</span> to open it</span>
<span>3. ✎ Edit it. </span>
<span>4. ⇧ Readers upvote best writers</span>
<span> (✿◠‿◠) 𝟁 </span>
<span> ☆</span>
</div>
</h2>
</section>
关于html - CSS 动画无法识别嵌套跨度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44361768/