Html 使用CSS移动文本
我试图在彩色背景框内前后移动一行文本。我可以用marquee标记漂亮地实现这一点，但我听说它的用法不推荐，所以我决定改用CSS。虽然我从CSS教程中复制了动画函数的形式，但我不明白为什么线条不移动。你能告诉我我的代码有什么问题吗 我的HTML代码：Html 使用CSS移动文本,html,css,Html,Css,我试图在彩色背景框内前后移动一行文本。我可以用marquee标记漂亮地实现这一点，但我听说它的用法不推荐，所以我决定改用CSS。虽然我从CSS教程中复制了动画函数的形式，但我不明白为什么线条不移动。你能告诉我我的代码有什么问题吗 我的HTML代码： <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html" charset="U
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="UTF-8">
<title>Part 1</title>
<link rel="stylesheet" content="text/css" href="part1-2.css">
</head>
<body>
<div class="background">
<div class="title">I'm moving</div>
</div>
</body>
</html>
您可以使用文本缩进： 部门背景 { 宽度：100%； 高度：50px； 背景色：ffcc00； } 部门名称 { 位置：相对位置； 字体系列：Arial； 字体大小：25px； 字体大小：粗体； -webkit动画：movingtitle 10s无限交替线性； 动画：movingtitle 10秒无限交替线性； /*增加*/ 空白：nowrap； 溢出：隐藏； } @-webkit关键帧移动标题 { /*修改*/ 至{文本缩进：100%；} } @关键帧移动标题 { /*修改*/ 至{文本缩进：100%；} } 我要搬家了
您可以使用文本缩进： 部门背景 { 宽度：100%； 高度：50px； 背景色：ffcc00； } 部门名称 { 位置：相对位置； 字体系列：Arial； 字体大小：25px； 字体大小：粗体； -webkit动画：movingtitle 10s无限交替线性； 动画：movingtitle 10秒无限交替线性； /*增加*/ 空白：nowrap； 溢出：隐藏； } @-webkit关键帧移动标题 { /*修改*/ 至{文本缩进：100%；} } @关键帧移动标题 { /*修改*/ 至{文本缩进：100%；} } 我要搬家了
您没有实现简单的@keyframes函数，该函数在某些浏览器中会被调用，也许您的浏览器也会被调用。 您还可以在动画函数中使用边距，如下所示
@-webkit-keyframes movingtitle
{
from {margin-left: 0px;}
to {margin-left: 1366px;}
}
@keyframes movingtitle
{
from {margin-left: 0px;}
to {margin-left: 1366px;}
}
希望它能工作 您没有实现简单的@keyframes函数，该函数在某些浏览器中被调用，也可能在您的浏览器中被调用。 您还可以在动画函数中使用边距，如下所示
@-webkit-keyframes movingtitle
{
from {margin-left: 0px;}
to {margin-left: 1366px;}
}
@keyframes movingtitle
{
from {margin-left: 0px;}
to {margin-left: 1366px;}
}
希望它能工作 哇！工作很有魅力！你能给我解释一下你的解决方案吗？为什么要使用文本缩进和什么是空白：nowrap？@BrotherEye空白：nowrap；将文本保持在线上，否则它会将行环绕到右侧。文本缩进根据通常用于显示具有经典平均文本缩进的新图表的设置值推送或推送文本：1em；100%取容器的全宽。我想我刚刚知道出了什么问题。我忘记了@keyframes在@webkit-之后！非常感谢你！你刚刚给我展示了一个移动的好方法！哇！工作很有魅力！你能给我解释一下你的解决方案吗？为什么要使用文本缩进和什么是空白：nowrap？@BrotherEye空白：nowrap；将文本保持在线上，否则它会将行环绕到右侧。文本缩进根据通常用于显示具有经典平均文本缩进的新图表的设置值推送或推送文本：1em；100%取容器的全宽。我想我刚刚知道出了什么问题。我忘记了@keyframes在@webkit-之后！非常感谢你！你刚刚给我展示了一个移动的好方法！是的，我也知道了。谢谢！你能告诉我怎样使文本在碰到框边后向后推吗？它一直在边界上移动。@Eye兄弟，你说的是哪一个框和边界，因为你的代码中没有。哦，对不起，我指的是背景的边缘。我的文本在返回之前一直在移动。我希望它在触摸背景边缘后向右返回。@Brother Eye好的，做一件事，在两个关键帧中使用百分比而不是px，比如从{margin left:0%；}到{margin left:90%；}是的，我也刚刚计算出来。谢谢！你能告诉我怎样使文本在碰到框边后向后推吗？它一直在边界上移动。@Eye兄弟，你说的是哪一个框和边界，因为你的代码中没有。哦，对不起，我指的是背景的边缘。我的文本在返回之前一直在移动。我希望它在触摸背景边缘后向右返回。@Brother Eye好的，做一件事，在两个关键帧中使用百分比而不是px，比如从{margin left:0%；}到{margin left:90%；}