如何修复此动画CSS Animation?我想将文本动画与段落对齐。另外,我不确定我是否使用正确的方法来做到这一点。如果您知道另一个更简单的解决方案,请教我。如果可能的话,我只想使用CSS制作这种类型的动画。
谢谢!
h1.entry-title, .blog h1.entry-title
{
font-family: 'Playfair Display', serif;
font-size: 51px;
line-height: 60px;
font-weight: 400;
color: #000;
margin: 0 auto;
padding-top: 0;
padding-bottom: 50px;
text-align: left;
}
.flip {
height:50px;
overflow:hidden;
display: inline-block;
padding-left: 10px;
}
.flip > div > div {
color:#000;
padding:4px 12px;
height:45px;
margin-bottom:45px;
display:inline-block;
}
.flip div:first-child {
animation: show 8s linear infinite;
}
.flip div div {
background:#fff701;
}
.flip div:first-child div {
background:#fff701;
}
.flip div:last-child div {
background:#fff701;
}
@keyframes show {
0% {margin-top:-270px;}
5% {margin-top:-180px;}
33% {margin-top:-180px;}
38% {margin-top:-90px;}
66% {margin-top:-90px;}
71% {margin-top:0px;}
99.99% {margin-top:0px;}
100% {margin-top:-270px;}
}
<div id="content" class="site-content">
<div class="header-content content-1170 center-relative block">
<h1 class="entry-title">
You can’t wait for<div class=flip>
<div><div>succes,</div></div>
<div><div>money,</div></div>
<div><div>class,</div></div>
</div>
<br>
you have to go after it with a club.
</h1>
</div>
您可以利用em值和内联块元素的行为来将框放在文本旁边并协调位置:
示例使用alternate
以避免在每次重新启动animation
时跳转,>]。
span { display: inline-block; vertical-align: -0.175em; /*reset box from the baseline */ text-align: center; /* whatever*/ height: 1.1em; /* average line-height*/ overflow: hidden; /* don't let it grow*/ } span span { display: block; /* stack pieces of text */ background: yellow; margin-bottom: 0.2em; } span span:first-of-type { margin-top: -3.9em; /* 1.1em + 0.2em * 3 to climb up 3 boxes */ animation: slide 8s alternate infinite; } span ~ span span { background:tomato } span ~ span span:first-of-type { animation-delay:-4s; } @keyframes slide { /* 4 steps for 4 lines */ 0%, 20% { margin-top: -3.9em; } 25%, 50% { margin-top: -2.6em; } 55%, 70% { margin-top: -1.3em; } 75%, 100% { margin-top: 0; } } p + p {font-size: 2.5em;}
<p> let's have <span> <span>text</span> <span>words</span> <span>stories</span> <span>something</span> </span> to tell or is that only <span> <span>text</span> <span>words</span> <span>stories</span> <span>something</span> </span> after all .</p> <p> let's have <span> <span>text</span> <span>words</span> <span>stories</span> <span>something</span> </span> to tell or is that only <span> <span>text</span> <span>words</span> <span>stories</span> <span>CSS</span> </span> after all .</p>