【CSS】垂直滚动公告

CSS制作的垂直滚动公告，支持多条切换

样式代码：

<style>
	.box{
		background-color: #000;
		color:#fff;
		width:500px;
		height:40px;
		overflow: hidden;
		margin:100px auto;
		text-align: center;
	}
	.t1{
		font-size: 13px;
		display: block;
		height: 40px;
		position: relative;
		animation: dh1 8s infinite;
		line-height: 40px;
		text-align: center;
		color: #fff;
	}
	.t2{
		font-size: 13px;
		display: block;
		height: 40px;
		position: relative;
		animation: dh2 8s infinite;
		animation-delay: 4s;
		line-height: 40px;
		text-align: center;
		color: #fff;
		text-align: center;
	}
	
	@keyframes dh1
	{
		0%    {top:40px;opacity: 0;z-index:1;}
		20%   {top:0px;opacity: 1;z-index:2;}
		40%   {top:0px;opacity: 1;z-index:2;}
		60%   {top:0px;opacity: 0;z-index:1;}
		80%  {top:0px;opacity: 0;z-index:1;}
		100%  {top:0px;opacity: 0;z-index:1;}
	}
	
	@keyframes dh2
	{
		0%    {top:0px;opacity: 0;z-index:1;}
		20%   {top:-40px;opacity: 1;z-index:2;}
		40%   {top:-40px;opacity: 1;z-index:2;}
		60%   {top:-40px;opacity: 0;z-index:1;}
		80%   {top:-40px;opacity: 0;z-index:1;}
		100%  {top:-40px;opacity: 0;z-index:1;}
	}
</style>

HTML代码：
 

<div class="box">
  <div class="t1">努力加油</div>
  <div class="t2">2024未来年</div>
</div>