纯css文字由下向上轮播

最新推荐文章于 2024-06-19 14:56:38 发布

蚂蚁小草

最新推荐文章于 2024-06-19 14:56:38 发布

阅读量1.6k

点赞数

分类专栏： html css

本文链接：https://blog.youkuaiyun.com/yueruitao/article/details/84874183

版权

css 同时被 2 个专栏收录

9 篇文章

订阅专栏

html

6 篇文章

订阅专栏

本文介绍如何仅使用CSS实现一种创新的文字展示方式，文字内容从下方逐行向上滚动，为网页增添动态视觉效果。通过CSS的keyframes动画和定位技巧，创建无缝循环的滚动效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>711111111111111111111</p>
        <p>2211111111111111111111</p>
        <p>331111111111111111111</p>
        <p>441111111111111111111</p>
        <p>551111111111111111111</p>
        <p>661111111111111111111</p>
        <p>771111111111111111111</p>
        <p>881111111111111111111</p>
        <p>991111111111111111111</p>
        <p>001111111111111111111</p>
    </div>
</div>

</body>
</html>