<!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. springboot2.0整合shiro遇到的问题

    1.重启服务器,访问登陆页面,登陆成功后跳转的不是index,而是favicon.ico

  2. region特征

    一: 查看阈值之后的region特征,可以通过特征检测来看,在工具栏上 region特征分三部分: 1.基础特征: region面积,中心,宽高,左上角及右下角坐标,长半轴短半轴椭圆方向,洞数及其面积 ...

  3. LightOJ-1010-Knights in Chessboard（数学）

    链接: https://vjudge.net/problem/LightOJ-1010 题意: Given an m x n chessboard where you want to place ch ...

  4. svn优点跟缺点？

    优点: 1.svn优点:集中式管理,管理方式在服务端配置好,客户端只需要同步提交即可,使用方便,操作简单,很容易就可以上手 2.在服务端统一控制好访问权限,利用代码的安全管理. 3.所有的代码以服务端 ...

  5. js 实现多文件批量下载

    关于兼容性问题: <a href="xxx.docx" target='_blank'></a> 下载文件时,这种写法是没有兼容性问题:但是下载图片时,IE ...

  6. javascript权威指南第13章 事件示例代码

    html 部分 <!DOCTYPE html> <html> <head> <title>Event Bubling Example</title ...

  7. jsp中submit的连接属性是什么?

    把注册的按钮改成button:<form action="dologin.jsp" method="post">用户<input type=& ...

  8. QT项目之创建.pri文件

    做大项目的时候,有很多.h和.cpp文件,会很繁琐.就需要.pri文件夹,将大项目分解成一个个的子项目,方便理清思绪和后期维护. 废话不多说,直接上过程! 第一步:新建一个项目.如图,选择choose ...

  9. 数据结构实验之二叉树一：树的同构 （SDUT 3340）

    题解:把原本结构体的左右子树的类型定义成 int 型,用来存放这个结点的左右子树的编号,分别建造两棵二叉树,按个比较,如果在第二棵树中没有找到,那么就不用在判断了. #include <bits ...

  10. (2)打造简单OS-开机BIOS初始化与MBR操作系统引导详解

    ================大概了解即可=============== 1.BIOS的工作: 我们的计算机在开机之前,它是一个纯硬件的机器,但是从按下开机按钮的那一刻起,ROM上的固化程序就开始为 ...