css怎么做文字自动移动
导读：CSS中有一个很常用的功能就是让文字自动移动，通常应用在滚动内容的展示等场合中。具体实现如下：html { height: 100%;}body { position: relative; height: 100%; overflo...
CSS中有一个很常用的功能就是让文字自动移动，通常应用在滚动内容的展示等场合中。具体实现如下：
html {
height: 100%;
}
body {
position: relative;
height: 100%;
overflow-y: hidden;
}
.container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
white-space: nowrap;
animation: move 30s linear infinite;
}
.container p {
display: inline-block;
font-size: 24px;
margin-right: 200px;
}
@keyframes move {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}
首先，我们要设置HTML的高度为100%。同时设置body的高度为100%且overflow-y为hidden，这样可以隐藏超出容器高度的部分，并且保证滚动条不出现。接下来，我们在body内创建一个名为.container的盒子，使用绝对定位，宽高均为100%。注意，这里使用white-space属性将其中的文本元素放到一起，否则每个文本元素将会自动换行。同时，我们要为.container设置动画，循环时长为30秒，动画样式为匀速的抽象变换函数，并设置为无限循环。穿件文本元素时，使用p标签，并将其设置为inline-block。这样，每个文本元素将自动横向排列，并保持宽高一致。如果还需要在文本元素之间添加一点空隙，可以使用margin-right属性。最后，我们为动画设置关键帧。在开始时刻，.container都在初始位置，即水平方向的偏移是0%。到结束时刻，.container将以匀速的方式向右平移，并持续30秒。注意，为了实现持续不断的移动效果，我们将动画循环设置为inifinte。以上代码实现了一个基本的文字自动移动效果，我们可以根据实际需要细化调整样式细节。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： css怎么做文字自动移动
本文地址： https://pptw.com/jishu/534902.html