用css实现幻灯片播放是最基础的,闲下来没事就试着写了一下,如果有不够完善或者方法不好的地方还请指点。下面我就用两种方法实现css花灯片效果。

方法1:定位。通过position属性改变left值

html代码:

<section id=box>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</section>

css代码:

<style>
* {
margin: ;
padding: ;
font-family: 微软雅黑;
list-style: none;
}
#box{
width:400px;
height:200px;
border: 1px solid #;
margin: 50px auto;
position:relative;
overflow: hidden;
}
ul{
width: 2000px;
position: absolute;
top:;
left:;
animation: dh 10s infinite ease;
}
ul li{
width:400px;
height:200px;
float: left; }
ul li:nth-child(){
background:#4b86db;
}
ul li:nth-child(){
background:#ff9999;
}
ul li:nth-child(){
background:olivedrab;
}
ul li:nth-child(){
background:skyblue;
}
ul li:nth-child(){
background:#4b86db;
}
@keyframes dh {
%{
left:0px;
}
%{
left:-400px;
}
%{
left:-800px;
}
%{
left:-1200px;
}
%{
left:-1600px;
}
}
</style>

方法2:2D转换。通过transfrom属性

html代码:

<section id=box>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</section>

css代码:

<style>
* {
margin: ;
padding: ;
font-family: 微软雅黑;
list-style: none;
}
#box{
width:400px;
height:200px;
border: 1px solid #;
margin: 50px auto;
overflow: hidden;
}
ul{
width: 2000px;
animation: dh 10s infinite ease;
}
ul li{
width:400px;
height:200px;
float: left; }
ul li:nth-child(){
background:#4b86db;
}
ul li:nth-child(){
background:#ff9999;
}
ul li:nth-child(){
background:olivedrab;
}
ul li:nth-child(){
background:skyblue;
}
ul li:nth-child(){
background:#4b86db;
} @keyframes dh {
%{transform: translateX()}
%{transform: translateX(-400px)}
%{transform: translateX(-800px)}
%{transform: translateX(-1200px)}
%{transform: translateX(-1600px)}
}
</style>

以上两种方法是我想到最简单的方法,如果有更好的方法还请朋友们留言指教。

css实现幻灯片播放效果的更多相关文章

  1. Android App中使用Gallery制作幻灯片播放效果

    http://www.jb51.net/article/83313.htm 我们有时候在iPhone手机上或者Windows上面看到动态的图片,可以通过鼠标或者手指触摸来移动它,产生动态的图片滚动效果 ...

  2. 纯 CSS 实现幻灯片播放

    介绍:   今日看到一道面试题,关于 使用纯CSS,不利用js, 写一个简单的幻灯效果页面.于是做了一个小demo,建议使用chrome,IE11查看~~ 主要思想: 利用 CSS3的 伪类选择器 : ...

  3. 自动播放——幻灯片缓冲效果&&带Loading效果的图片切换&&移动效果(按轨迹移动)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 纯css做幻灯片效果

    css3里面有一个@keyframes动画功能. w3c上面的例子: 可以使用它来做一个幻灯片效果. <!DOCTYPE html> <html lang="en" ...

  5. marquee标签跑马灯连续无空白播放效果 纯CSS(chrome opera有效)

    marquee似乎没有设置首尾相连播放的属性,内容滚动时总会留出一段marquee本身长度的空隙,某些情况下很不方便: 捣鼓了一会,得出一种解决办法,关键有两点: 1.将需要滚动的内容复制一份于同一行 ...

  6. jQ效果:jQuery和css自定义video播放控件

    下面介绍一下通过jquery和css自定义video播放控件. Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的 ...

  7. 一款炫酷的幻灯片播放框架介绍(附demo及使用方法)

    废话不多说,先上demo(建议在chrome下打开 F键全屏 esc退出全屏): 我的demo-博客园简介 官网demo 更多demo 今天为大家介绍一款基于css3和JavaScript的幻灯片播放 ...

  8. Camera 幻灯片播放

    Camera 幻灯片播放与轮播有些类似,不同的是在camera 幻灯片播放时有很多很炫很酷的播放效果 : 简单的介绍Camera 插件的使用方式: 1.引入js: <script src=&qu ...

  9. 非常优秀的swiper插件————幻灯片播放、图片轮播

    http://www.idangero.us/ http://www.swiper.com.cn/ Swiper中文网 2015-10-15 SuperSlide2: (这是个PC用的滚屏插件,看着不 ...

随机推荐

  1. js 获取当前日期或者前、后N天yyyy-MM-dd的方法

    //js获取当前日期.当前日期前.后N天的标准年月日 //day=0为当前天,day=7为前7天,day=-7为当前日期的后7天 function getstartdate(day) {        ...

  2. mysql 原理 ~ 二阶段提交协议通说

    一 简介: 今天是第二篇,讲解的是mysql的事务日志 二 具体 1 WAL技术(先写日志,再写磁盘) 2 binlog redolog 二阶段提交协议     目的 保持 redo log和binl ...

  3. emmc基础技术8:操作模式3-interrupt mode

    1. 前言 eMMC总线操作包含: boot mode, device identification mode interrupt mode data transfer mode 本文主要描述inte ...

  4. Oracle数据库修改LISTENER的监听端口

    背景 这又是个不作不会死的事情,自己不懂,硬搞,端口换了,后来竟然捣鼓好了.尽量少搞这些事情. 注意点 http://wallimn.iteye.com/blog/1163614 修改配置文件后,需修 ...

  5. 阿里云配置ssl证书服务遇到的几个问题和解决方法

    系统环境: 系统:阿里云ECS CentOS6.5+Apache2.4.10 前提:公司需要将站点升级到使用SSL证书服务(https) 实践执行:在阿里云的证书服务--选择了一个免费的证书服务,毕竟 ...

  6. ubuntu系统初始化网络及mysql配置

    安装系统时需要安装open-ssh服务软件,否则无法远程连接 1.修改root密码 # sudo passwd 输入密码即可 切换到root用户,需要输入刚才的root密码 # su - 2.配置网络 ...

  7. Gitlab的SSH配置(linux和windows双版本)

    1. 步骤 1.首先现在电脑端安装好git,windows端请安装Git for Windows,Linux端请自行网上查询(Ubuntu: sudo apt-get install git)   2 ...

  8. 【功能】返回数据类型、字节长度和在内部的存储位置.DUMP(w[,x[,y[,z]]])

    DUMP(w[,x[,y[,z]]]) [功能]返回数据类型.字节长度和在内部的存储位置. [参数] w为各种类型的字符串(如字符型.数值型.日期型--) x为返回位置用什么方式表达,可为:8,10, ...

  9. Object Detection

    这篇博客对目标检测做了总结:https://handong1587.github.io/deep_learning/2015/10/09/object-detection.html

  10. LeetCode(54):螺旋矩阵

    Medium! 题目描述: 给定一个包含 m x n 个元素的矩阵(m 行, n 列),请按照顺时针螺旋顺序,返回矩阵中的所有元素. 示例 1: 输入: [ [ 1, 2, 3 ], [ 4, 5, ...