<!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. 远程jupyter+pycharm配置

    前言 作为一个数据工程师,最喜欢的事情就是不停的在现实的服务端环境调试代码的参数.我们在本地的环境与生产的状况决然不同,我们一开始在本地写代码测试再部署到服务端的三板斧就不适用了. 最好的方式可以直接 ...

  2. 2019牛客暑期多校训练营（第十场）Han Xin and His Troops——扩展中国剩余定理

    题意 求解 $n$ 个模方程 $x \equiv a (mod \ b)$,不保证模数互素($1 \leq n \leq 100$,$0 \leq b < a< 10^5$). 分析 套扩 ...

  3. [Angular] Show a Loading Indicator for Lazy Routes in Angular

    We can easily code split and lazy load a route in Angular. However when the user then clicks that la ...

  4. Helm:kubernetes应用包管理工具

    概要 Helm:kubernetes应用包管理工具 K8s部署应用的时候,应用会通过yaml描述信息调用K8s-api:Helm即是管理这些Yaml的应用包管理工具 组成 Helm包含5个部分 Hel ...

  5. 007——转载——C#将字符串转换为整型的三种方法的总结

    (一)转载——C#将字符串转换为整型的三种方法的总结 在C#中,要将一个字符串或浮点数转换为整数,基本上有三种方法: (1)使用强制类型转换:(int)浮点数 (2)使用Convert.ToInt32 ...

  6. MongoDB 分片管理（四）数据均衡 -- 特大快

    1.1 特大快形成 如果用date字段作为片键,集合中date是一个日期字符串,如:year/month/day,也就是说,mongoDB一天创建一个块.因块内所有文档的片键一样,因此这些块是不可拆分 ...

  7. 怎么联系$zcy$呢?

    \(QQ:2939533969\) \(luogu:\)little_sun 窝经常以little_sun,little_sun0331,zcy05331的昵称混迹于各大网站 窝的CSDN blog ...

  8. P2831 愤怒的小鸟——状压

    P2831 愤怒的小鸟 抛物线过原点,只要再找两个就能确定抛物线: 处理出两两之间的抛物线能过哪些点,状态压缩: 但是直接枚举每一条抛物线常数太大会T,所以我们需要预处理一个low_bit表示当前状态 ...

  9. 【02NOIP提高组】均分纸牌

    #include<bits/stdc++.h> using namespace std; ; int n,sum,a[maxn]; int main() { ; cin>>n; ...

  10. Tkinter 之Scale滑块标签

    一.参数说明 语法 作用 Scale(window, label="滑块") 滑块标题 Scale(window, label="滑块", from_=0) 滑 ...