<!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. Mysql存储过程查询数据插入别的表里。

    DELIMITER// CREATE PROCEDURE setRoomManger2() BEGIN ); ; DECLARE cur CURSOR FOR SELECT roomid FROM n ...

  2. Elasticsearch 调优之 shrink

    对于索引分片数量,我们一般在模板中统一定义,在数据规模比较大的集群中,索引分片数一般也大一些,在我的集群中设置为 24.但是,并不是所有的索引数据量都很大,这些小数据量的索引也同样有较大的分片数.在 ...

  3. antd 表格隔行变色

    rowClassName={(record, index) => { let className = 'light-row'; if (index % 2 === 1) className = ...

  4. html5文件夹上传源码

    前段时间做视频上传业务,通过网页上传视频到服务器. 视频大小 小则几十M,大则 1G+,以一般的HTTP请求发送数据的方式的话,会遇到的问题:1,文件过大,超出服务端的请求大小限制:2,请求时间过长, ...

  5. express中的中间件(middleware)、自定义中间件、静态文件中间件、路由中间件

    express文档地址 什么是中间件呢(middleware)?它是谁的中间件呢? 首先我们需要了解到请求和响应, 请求就是客户端发送请求给服务器, 响应就是,服务器根据客户端的请求返回给客户端的数据 ...

  6. Python里面如何拷贝一个对象？（赋值，浅拷贝，深拷贝的区别）

    答:赋值(=),就是创建了对象的一个新的引用,修改其中任意一个变量都会影响到另一个. 浅拷贝:创建一个新的对象,但它包含的是对原始对象中包含项的引用(如果用引用的方式修改其中一个对象,另外一个也会修改 ...

  7. rabbitmq 删除所有队列及服务重启脚本

    #!/bin/bash # 删除元数据 rm -rf /var/lib/rabbitmq/mnesia # 重启rabbitmq rabbitmqctl stop systemctl restart ...

  8. 线程池(2)-Executors提供4个线程池

    1.为什么不使用Executors提供4个线程池创建线程池 阿里巴巴开放手册这样写: . [强制]线程池不允许使用 Executors 去创建,而是通过 ThreadPoolExecutor 的方式, ...

  9. PHP + CI框架 + AdminLITE权限管理系统

    源码地址:https://github.com/yangsphp/rbac-master

  10. 怎么看部分元素的js代码?