CSS动画案例-无缝滚动
来源:互联网 发布:淘宝店怎么上传图片 编辑:程序博客网 时间:2024/06/02 02:57
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ec-css无缝滚动</title>
<link rel="stylesheet" href="reset.css">
<style>
.demo-marquee {
width: 400px;
margin: 20px auto;
overflow: hidden;
}
.demo-marquee ul {
width: 1600px;
animation: ec-marquee-move 6s infinite linear;
}
.demo-marquee ul:hover {
animation-play-state: paused;
}
@keyframes ec-marquee-move {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(-800px);
}
}
</style>
</head>
<body>
<div class="demo-marquee">
<ul class="fllil">
<li><img src="image/1.jpg"/>
</li>
<li><img src="image/2.jpg"/>
</li>
<li><img src="image/3.jpg"/>
</li>
<li><img src="image/4.jpg"/>
</li>
<li><img src="image/1.jpg"/>
</li>
<li><img src="image/2.jpg"/>
</li>
<li><img src="image/3.jpg"/>
</li>
<li><img src="image/4.jpg"/>
</li>
</ul>
<div class="clear"></div>
</div>
</body>
</html>
阅读全文
0 0
- CSS动画案例-无缝滚动
- 上下无缝滚动案例
- 基于动画无缝滚动
- div+css+javascript 实现无缝滚动,marquee无缝滚动,无缝滚动,兼容firefox
- js--缓动动画、匀速运动、无缝滚动
- Div+CSS无缝滚动终极版
- 图片无缝滚动代码(DIV+CSS+JavaScript)
- div+css+js无缝滚动代码
- 图片无缝滚动代码(DIV+CSS+JavaScript)
- css + js实现简单无缝滚动字幕
- html,css插入多张图使无缝滚动
- 用JavaScript写的无缝滚动的小案例
- 无缝滚动
- 无缝滚动
- 无缝滚动
- 无缝滚动
- 无缝滚动
- 无缝滚动
- 阿里云ECS服务器配置LAMP使用IP地址无法访问填坑(一)
- 制作Cordova插件
- mybatis-config.xml文件配置
- Source.Insight.v3.50.0063-ISO
- 一个想法照进现实-《IT连》创业项目:聊聊IT连App是如何思考解决IT人员单身问题的
- CSS动画案例-无缝滚动
- Loaded runtime CuDNN library: 5005和 Check failed: stream->parent()->GetConvolveAlgorithms问题
- mysql--select--part1
- java IO总结
- 阿里云主机CentOs中Apache开启Rewrite模块
- Python
- 算法文章
- python练习(八)
- Nova Data Flow(Newton版)