<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>css无缝滚动</title>
<style>
* {
margin: 0;
padding: 0;
}
.whiteBox {
position: relative;
box-shadow: 0px 0px 4px #fff;
margin-left: 5px;
align-self: center;
width: 18px;
height: 20px;
border: 1px solid #fff;
background-color: #fff;
}
.blackBox {
position: relative;
box-shadow: 0px 0px 4px #fff;
margin-left: 5px;
align-self: center;
height: 20px;
width: 18px;
border: 1px solid #fff;
background-color: rgba(255, 255, 255, 0);
}
.scrollOut {
width: 400px;
height: 100px;
overflow: hidden;
margin: 100px auto;
border: 1px solid red;
position: relative;
background-color: blueviolet;
}
.scrollOut .scrollList {
width: 200%;
height: 100px;
position: absolute;
left: -100%;
top: 0;
animation: scrollImg 4s linear infinite;
}
.scrollOut .scrollList li {
float: left;
list-style: none;
width: 100px;
height: 100px;
}
.scrollOut .scrollList img {
width: 100%;
height: 100%;
}
@-webkit-keyframes scrollImg {
0% {
left: -400px;
}
100% {
left: 0px;
}
}
</style>
</head>
<body>
<div class="scrollOut">
<ul class="scrollList">
<li>
<div class="blackBox">
<span></span>
</div>
</li>
<li>
<div class="whiteBox">
<span></span>
</div>
</li>
<li>
<div class="blackBox">
<span></span>
</div>
</li>
<li>
<div class="whiteBox">
<span></span>
</div>
</li>
<li>
<div class="blackBox">
<span></span>
</div>
</li>
<li>
<div class="whiteBox">
<span></span>
</div>
</li>
<li>
<div class="blackBox">
<span></span>
</div>
</li>
<li>
<div class="whiteBox">
<span></span>
</div>
</li>
</ul>
</div>
</body>
</html>

无缝轮播 css3的更多相关文章

  1. 分别用css3、JS实现图片简单的无缝轮播功效

    本文主要介绍分别使用CSS3.JS实现图片简单无缝轮播功效: 一.使用CSS3实现:利用animation属性 (实现一张一张的轮播,肉眼只看见一张图片) HTML部分比较简单,两个div下包着几个i ...

  2. 无缝轮播的案例 及css3无缝轮播案例

    无缝轮播的案例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  3. 网站banner无缝轮播

    网站banner无缝轮播 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  4. js动画 无缝轮播 进度条 文字页面展示 div弹窗遮罩效果

    1.无缝轮播 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.a ...

  5. jQuery插件slides实现无缝轮播图特效

    初始化插件: slides是一款基于jQuery无缝轮播图插件,支持图内元素动画,可以自定义动画类型 1 2 3 4 5 6 7 8 9 10 $(".slideInner").s ...

  6. JQuery制作基础的无缝轮播与左右点击效果

    在网页中我们想要的无缝轮播左右循环有好多好多中,这是我第一个轮播效果,也是最基础的,和大家分享一下,对于初学者希望你们能有所借鉴,对于大神我想让你们尽情的虐我给我宝贵的意见. 这个是我要的效果 进入正 ...

  7. JQ无缝轮播图-插件封装

    类似京东的这种无缝轮播效果: 实例代码下载 HTML代码: <body> <!-- /*觅me 探索生活*/ --> <div class="test" ...

  8. 原生js实现无缝轮播

    原生js实现无缝轮播 因为要做到无缝,所以就要把第一张图片和最后一张连接起来,在此处采用js克隆了第一张图片的节点,添加到最后,显示图片序号的小圆按钮也是使用js动态添加的. html部分 <d ...

  9. jQuery图片无缝轮播

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

随机推荐

  1. 7月新的开始 - Axure学习05 - 元件库的创建

    元件库的创建 元件库的创建.载入.编辑和删除等操作 元件库的后缀名名:.rplib 学习结果: 实现iPhone6的原型图 分辨率是 1080*1920,现在我们按比例缩小去实现(360*640)

  2. xcode 查看stastic

    点GPU 双击柱状图 从上面list里点performance

  3. hibernate meger

    转: 在Hibernate中,有save.persist.savaOrUpdate.merge等方法有插入数据的功能.前三者理解起来较后者容易一些,merge方法从api中的介绍就看以看出它是最复杂的 ...

  4. 48、[源码]-Spring容器创建-初始化事件派发器、监听器等

    48.[源码]-Spring容器创建-初始化事件派发器.监听器等 8.initApplicationEventMulticaster();初始化事件派发器: 获取BeanFactory 从BeanFa ...

  5. SQL Server全文检索

    SQL Server 全文索引的硬伤 http://www.cnblogs.com/gaizai/archive/2010/05/13/1733857.html SQLSERVER全文搜索 http: ...

  6. 利用webuploader实现超大文件分片上传、断点续传

    之前仿造uploadify写了一个HTML5版的文件上传插件,没看过的朋友可以点此先看一下~得到了不少朋友的好评,我自己也用在了项目中,不论是用户头像上传,还是各种媒体文件的上传,以及各种个性的业务需 ...

  7. decodeURI 与 decodeURIComponent 区别

    1. 关于URL.encodeURI 及 encodeURIComponent: URI: Uniform Resource Identifiers,通用资源标识符 Global 对象的 encode ...

  8. docker部署vue前端

    1.下载安装nginx image docker pull nginx:latest 2.准备将编译后的代码上传到主机上 3.编写dockerfile, nginx conf,并创建镜像 Docker ...

  9. madam、Linux LVM的使用

    .RaidRAID(独立冗余磁盘阵列)概念:RAID技术通过把多个硬盘设备组合成一个容量更大.安全性更好的磁盘阵列,并把数据切割成多个区段后分别存放在各个不同的物理硬盘设备上,然后利用分散读写技术来提 ...

  10. 蜜汁头文件&&slow slow read

    slow slow read 板子 inline int read() { ; char last=' ',ch=getchar(); ') last=ch,ch=getchar(); +ch-',c ...