所以我使用 CSS 动画在文本周围反弹,但动画似乎很紧张,有什么方法可以让这个运行更流畅?
代码如下:
HTML
<div class="x">
<p class="y">TEST</p>
</div>
SCSS
$size: 100px;
body {
margin: 0;
}
img, div {
width: $size;
height: $size;
}
.x {
animation: x 3s linear infinite alternate;
}
.y {
font-size: 35px;
animation: y 4s linear infinite alternate;
}
@keyframes x {
100% {
transform: translateX( calc(100vw - #{$size}) );
}
}
@keyframes y {
100% {
transform: translateY( calc(100vh - #{$size}) );
}
}