animation 轮播图/文字滚动

最新推荐文章于 2024-06-29 16:52:40 发布

小k铁柱

最新推荐文章于 2024-06-29 16:52:40 发布

阅读量996

点赞数 1

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/qq_40890601/article/details/107979584

版权

本文介绍了如何利用CSS3的`transition`和`animation`特性制作轮播图和文字滚动效果。在轮播图中，通过设置container宽度、移除列表样式、设置无限宽度的ul以及恰当的`animation`属性实现无缝滚动。对于文字滚动，逐字显示的效果，以及纵向列表滚动的实现也进行了说明。总结提到，计算`keyframes`时间比例时要注意不超过总长度，停顿时间按2n法则计算，避免留白问题。

摘要由CSDN通过智能技术生成

轮播图

使用CSS3 的animation 和 tranform 特性做了一个轮播图
在这里插入图片描述

		<!-- tranform 实现轮播图 -->
		<div class="container">
			<ul class="imgScroll">
				<li><a href="#"><img src="img/黑暗.jpg"/></a></li>
				<li><a href="#"><img src="img/绿色桌面壁纸.jpg"/></a></li>
				<li><a href="#"><img src="img/黑暗.jpg"/></a></li>
				<li><a href="#"><img src="img/绿色桌面壁纸.jpg"/></a></li>

最低0.47元/天解锁文章

小k铁柱

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
animation 轮播图/文字滚动

轮播图使用CSS3 的animation 和 tranform 特性做了一个轮播图  <div class="container"> <ul class="imgScroll"> <li><a href="#"><img src="img/黑暗.jpg"/></a></li> <li><a href="#">
复制链接

扫一扫

专栏目录