SUNJOY154 2023-03-21 21:58 采纳率: 100%
浏览 50
已结题

一个CSS中动画的显示问题，为什么字段向上的移动速度远快于我所设置的时间？

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
    <title>2D变换transform</title>
    <style>
        *{
            margin:0px;
            padding:0px;
        }
.div3{
            /*float: left;*/
            height:200px;
            width:200px;
            background:dodgerblue;
            overflow:hidden;
            position:absolute;
            left:200px;
            top:150px;
        }
p{
            font-size: 24px;
            height:30px;
            margin-top:10px;
            color: red;
            border:2px solid;
            font-family:  宋体,serif;
            animation:xingqi 20s linear infinite;
        }
        @-webkit-keyframes xingqi {
            0%{ margin-top:0px;}
            10%{ margin-top:-20px;}
            20%{margin-top:-40px;}
            30%{ margin-top:-60px;}
            40%{ margin-top:-80px;}
            50%{ margin-top:-100px;}
            60%{ margin-top:-120px;}
            70%{ margin-top:-140px;}
            80%{ margin-top:-160px;}
            90%{ margin-top:-180px;}
            100%{ margin-top:-200px;}

        }
</style>
</head>
<body>
<div class="div3">
    <p>星期一</p>
    <p>星期二</p>
    <p>星期三</p>
    <p>星期四</p>
    <p>星期五</p>
    <p>星期六</p>
    <p>星期天</p>
    <p>星期一</p>
    <p>星期二</p>
</div>
</body>
</html>

我就想实现星期一到下面的星期二循环向上滚动，我明明设置了20秒但为啥页面上几秒不到字段就全都挤上去了，结果最后div框里都是空的。是哪里出问题了？

  • 写回答

3条回答 默认 最新

  • CSDN专家-showbo 2023-03-21 22:44
    关注

    margin-top为负值会移动出div外，而div设置了overflow:hidden，所以最终看不到，去掉overflow:hidden就可以看到p实际还在继续移动
    由于margin-top是参考上一个元素的底部或者父元素（第一个子元素），所以第一个p移动-20px，第二p实际移动了-40px，依次类推，所以挤压在一起

    可以讲p设置为relative定位，然后通过设置top为负值实现一个一个网上移动

    
        p {position:relative;
            font-size: 24px;
            height: 30px;
            margin-top: 10px;
            color: red;
            border: 2px solid;
            font-family: 宋体,serif;
            animation: xingqi 5s linear infinite;
        }

 @-webkit-keyframes xingqi {
            0% {
                top: 0px;
            }

            10% {
                top: -20px;
            }
。。。。其他下面的margin-top全部改为top
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(2条)

报告相同问题？

问题事件

  • 系统已结题 3月30日
  • 已采纳回答 3月22日
  • 创建了问题 3月21日

悬赏问题

  • ¥20 西门子S7-Graph,S7-300，梯形图
  • ¥50 用易语言http 访问不了网页
  • ¥50 safari浏览器fetch提交数据后数据丢失问题
  • ¥15 matlab不知道怎么改，求解答！！
  • ¥15 永磁直线电机的电流环pi调不出来
  • ¥15 用stata实现聚类的代码
  • ¥15 请问paddlehub能支持移动端开发吗？在Android studio上该如何部署？
  • ¥20 docker里部署springboot项目，访问不到扬声器
  • ¥15 netty整合springboot之后自动重连失效
  • ¥15 悬赏！微信开发者工具报错，求帮改