css文字滚动

最新推荐文章于 2024-04-01 23:44:34 发布

重生之我是菜鸡程序员

最新推荐文章于 2024-04-01 23:44:34 发布

阅读量382

点赞数

分类专栏： css 文章标签： css html css3

本文链接：https://blog.csdn.net/NiHao___/article/details/119859049

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单的CSS文字滚动轮播</title>
</head>
<style>
  
#container {
  font-size: 32px;
  display:block;
}

#flip {
  height:50px;
  overflow:hidden;
}

#flip > div > div {
  color:black;
  padding: 0 18px;
  line-height: 45px;
  height:45px;
  margin-bottom:45px;
  display:inline-block;
}

#flip div:first-child {
  animation: show 10s linear infinite;
}

@keyframes show {
  0% {margin-top:-270px;}
  5% {margin-top:-180px;}
  33% {margin-top:-180px;}
  38% {margin-top:-90px;}
  66% {margin-top:-90px;}
  71% {margin-top:0px;}
  99.99% {margin-top:0px;}
  100% {margin-top:-270px;}
}
</style>
<body>

<div id="container">
  <div id="flip">
    <div><div>1</div></div>
    <div><div>2</div></div>
    <div><div>3</div></div>
  </div>
</div>

</body>
</html>

重生之我是菜鸡程序员

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css文字滚动

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>简单的CSS文字滚动轮播</title></head><style> #container { font-size: 32px; display:block;}#flip { height:50px; overflow:hidden;}#flip >.
复制链接

扫一扫