<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css"> .wrap { height: 30px; overflow: hidden; position: absolute; top: 30; left: 100; width: 100% } p { margin: 0; height: 30px; line-height: 30px; text-align: center; background: #ccc; width: 300px;
} .content p { position: absolute;
} @-webkit-keyframes anim1 { 0% { top: 40px; opacity: 1 } 50% { top: -40px; opacity: 1 } 75% { top: -40px; opacity: 0 } 100% { top: 40px; opacity: 0 } } @-webkit-keyframes anim2 { 0% { top: -40px; opacity: 0 } 25% { top: 40px; opacity: 0 } 50% { top: 40px; opacity: 1 } 100% { top: -40px; opacity: 1 } } .content p:nth-child(1) { -webkit-animation: anim1 5s linear infinite;
} .content p:nth-child(2) { -webkit-animation: anim2 5s linear infinite;
}
</style>
</head>
<body>
<div class="wrap">
<div class="content">
<p>第一条消息</p>
<p>第二条消息</p>
</div>
</div>
</body>
</html>
