如何解决使用 ::before 或 ::after 伪元素来维护动画元素的区域?
我正在为“BOUNCE”中的字母“O”设置动画,以便上下弹跳。当它上升时,整个元素离开单词其余部分的区域(将光标放在文本上最容易看到这一点。)
我可以使用伪元素来保持与其余字母相同的高度吗(这样当我将光标移到“O”所在的位置时,它总是一个文本光标?)
当我尝试添加一个伪类时,它似乎以“O”为动画;不确定是否有办法阻止它这样做。我尝试了 animation: none
和 position: absolute; bottom: 0;
,但似乎都不起作用。
CodePen 链接:https://codepen.io/YanivelKneivel/pen/poNGdeB 或以下代码:
HTML
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Bowlby+One&display=swap" rel="stylesheet">
<p class="bounce">B<span class="bounce__letter">O</span>UNCE</p>
CSS(带 SCSS)
*,*::before,*::after {
box-sizing: border-box;
}
body {
text-align: center;
height: 500px;
background-color: #A8F5B6;
}
.bounce {
font-family: 'Bowlby One',sans;
font-size: 8rem;
margin-top: 5rem;
color: #FF6989;
display: inline-block;
}
.bounce__letter {
animation: bounce .7s cubic-bezier(0.30,2.4,0.85,2.50) infinite;
position: relative;
display: inline-block;
&::before {
content:'';
position: absolute;
height: 100%;
width: 100%;
animation: none;
// background-color: blue; //FOR TESTING
}
}
@keyframes bounce {
from,to {bottom: 10px; transform: scale(1,0.9)}
80% {bottom: 60px; transform: scale(1,1)}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。