transform: rotate(旋转) | scale(缩放) | skew(倾斜) | translate(移动) ;
html
<style>
.jinggao {
width: 60vw;
display: inline-block;
text-align: center;
overflow: hidden;
box-sizing: border-box;
}
@keyframes Animation {
0% {
/* 右边 */
transform: translateX(40vw);
}
100% {
/* 左边 */
transform: translateX(-40vw);
}
}
.text {
display: inline-block;
color: #3379b7;
font-size: 18px;
animation: Animation 12s linear infinite;
}
.text:hover {
animation-play-state: paused;
cursor: pointer;
}
</style>
html
<div>
<div class="jinggao">
<span class="text">右进左出</span>
</div>
</div>