使用CSS3来实现
若要用CSS3的属性实现的话,非
animation
莫属,因为transition是需要手动的触发,而且不能无限次执行下去,而
animation
恰好能解决这个问题。
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
@keyframes rowup {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
100% {
-webkit-transform: translate3d(0, -50px, 0);
transform: translate3d(0, -50px, 0);
.list {
width: 300px;
border: 1px solid #999;
margin: 20px auto;
position: relative;
height: 200px;
overflow-Y: auto;
font-size: 15px;
font-family: 'Microsoft Yahei';
.list .rowup {
-webkit-animation: 5s rowup linear infinite normal;
animation: 5s rowup linear infinite normal;
position: relative;
</style>
<div class="list">
<div class="cc rowup">
<div class="item">1- 121233fffffr国家认可更健康进口价格困扰</div>
<div class="item">2- 3123233</div>
<div class="item">3- 个人口结构俄跨入国际科技馆客人感觉</div>
<div class="item">4- ggrgerg</div>
<div class="item">5- fvdgdv</div>
<div class="item">6- 德国南部巴士与卡车相撞起火 </div>
<div class="item">7- 外交部再次回应印军越界:要求立即将越界部队撤回</div>
<div class="item">8- 德国网红致信默克尔</div>
<div class="item">9- 国资委原</div>
</body>
</html>
使用CSS3来实现若要用CSS3的属性实现的话,非animation莫属,因为transition是需要手动的触发,而且不能无限次执行下去,而animation恰好能解决这个问题。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &
注:swiper官网:https://2.swiper.com.cn/usage/index.html
首先加载插件,点击下载基础测试包,测试包里面已经包含了js和
css
文件。注意引用路径的修改
(下载地址:https://2.swiper.com.cn/download/index.html#file1)
<link rel="stylesheet" href="
css
/idangerous.swiper.
css
">
可以使用
CSS3
的 `animation` 和 `transform` 属性来
实现
表格的
循环
滚动
效果。
首先,需要为表格的容器元素添加 `overflow: hidden` 属性,使超出容器的部分隐藏。然后,为表格
设置
一个高度,并将其位置设为绝对定位,这样才能对表格进行
动画
。接下来,使用 `animation` 属性来定义
动画
的名称、时长、
循环
次数等属性。最后,使用 `transform: translateY()` 来控制表格在垂直方向上的移动。
示例代码如下:
```
css
.table-container {
overflow: hidden;
position: relative;
height: 200px;
.table {
position: absolute;
animation: scroll-table 10s linear infinite;
@keyframes scroll-table {
from {
transform: translateY(0);
transform: translateY(-100%);
上述代码
中
,`.table-container` 是表格的容器元素,`.table` 是表格本身。
动画
`scroll-table` 持续时间为 10 秒,每次
循环
执行一次,从初始位置移动到距离容器顶部 100% 的位置。