<!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. for循环中使用async/await

    async function printFiles () { const files = await getFilePaths(); await Promise.all(files.map(async ...

  2. 51nod 1577 异或凑数 线性基的妙用

    \(OTZgengyf\)..当场被吊打\(QwQ\) 思路:线性基 提交:\(3\)次 错因:往里面加数时\(tmp.p\)与\(i\)区分不清(还是我太菜了) 题解: 我们对每个位置的线性基如此操 ...

  3. How To Use The Repository Pattern In Laravel

    The Repository Pattern in Laravel is a very useful pattern with a couple of great uses. The first us ...

  4. jQuery相关方法1

    一.设置某个元素的标签内容------.html()方法 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js& ...

  5. 遇到bug如何处理

    issue中查询是否有相似bug assert / try-except / IDE单步调式 框架可以查询源码或者查询官方文档

  6. 1卸载ROS

    sudo apt-get purge ros-*sudo rm -rf /etc/rosgedit ~/.bashrc 参考: https://blog.csdn.net/xmy306538517/a ...

  7. 【实战】Vue全家桶(vue + axios + vue-router + vuex)搭建移动端H5项目

    使用Vue全家桶开发移动端页面. 本博文默认已安装node.js. github链接 一.准备工作 安装vue npm install vue 安装脚手架vue-cli npm install -g ...

  8. Java使用超级工具包Hutool操作数据库

    #=================================================================== # pom.xml中添加引用 # <!-- https: ...

  9. NAT（地址转换技术）学习

    一.什么是NAT,NAT产生的背景 NAT通常部署在一个组织的网络出口位置,通过将内部网络IP地址替换为出口的IP地址提供公网可达性和上层协议的连接能力. NAT产生的背景是为了解决IPv4地址不足的 ...

  10. Spring框架各模块功能介绍

    一. Spring是什么? Spring由Rod johnson开发: 是一个非常活跃的开源框架: 它帮助分离项目组件(对象)之间的依赖关系: 它的主要目的是简化企业开发 二. Spring的核心概念 ...