<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>纯Css文字轮播轮播-jq22.com</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
.div1 {
width:200px;
height:200px;
overflow:hidden;
margin:auto;
position:relative;
}
@keyframes anis {
100% {
transform:translateY(-200px)
}
}img {
position:absolute;
}
.div2 {
animation:anis 10s linear infinite;
}
.div2:hover {
animation-play-state:paused;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">
<p>111111111111111111111</p>
<p>211111111111111111111</p>
<p>311111111111111111111</p>
<p>411111111111111111111</p>
<p>511111111111111111111</p>
<p>611111111111111111111</p>
<p>7
纯css文字由下向上轮播
最新推荐文章于 2024-07-13 16:54:13 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)