<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>css3 幻灯片</title>

<style type="text/css">

.ani {

width: 480px;

height: 320px;

margin: 50px auto;

overflow: hidden;

box-shadow: 0 0 5px rgba(0, 0, 0, 1);

background-size: cover;

background-position: center;

-webkit-animation-name: "loops";

-webkit-animation-duration:20s;

-webkit-animation-iteration-count: infinite;

}

@-webkit-keyframes "loops" {

0% {

background: url('img/1.jpg') no-repeat;

}

25% {

background: url('img/2.jpg') no-repeat;

}

50% {

background: url('img/3.jpg') no-repeat;

}

75% {

background: url('img/4.jpg') no-repeat;

}

100% {

background: url('img/5.jpg') no-repeat;

}

}

</style>

</head>

<body>

<div class="ani">

</div>

</body>

</html>

CSS3实现简单的幻灯片的更多相关文章

  1. 使用CSS实现一个简单的幻灯片效果

    方法一: 简单的CSS代码实现幻灯片效果 方法二: 使用CSS3 Animation来制作幻灯片 方法一: 简单的CSS代码实现幻灯片效果 话不多说,直接上代码 <!DOCTYPE html&g ...

  2. Css实现一个简单的幻灯片效果页面

    使用animation动画实现一个简单的幻灯片效果. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 2 ...

  3. 一款基于css3的简单的鼠标悬停按钮

    今天给大家分享一款基于css3的简单的鼠标悬停按钮.这款悬停按钮鼠标经过前边框是间断的.当鼠标经过的时候边框间隔消失.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  4. CSS3 波浪简单模拟--我是波浪，我有起伏，有大波与小波（坏笑中...）

    我是波浪,我有起伏,我有大波与小波(坏笑中...) 最近改版网站,一般也不会去写动画,但是有些网站还是需要的,故拿出一个较简单的动画出来分享,很简单很简单. 原理简单阐述 其实很简单,使用一张美工做好 ...

  5. css3元素简单的闪烁效果(html5 jquery)

    css3 Animation: @-webkit-keyframes twinkling{ /*透明度由0到1*/ 0%{ opacity:0; /*透明度为0*/ } 100%{ opacity:1 ...

  6. CSS3 实现简单轮播图

    用css3动画实现图片切换效果,原理还是改变left值.只有最简单的自动播放功能,切换后短时间静止,通过最后的位置克隆第一张图片,实现无缝切换. html结构 <div id="con ...

  7. 基于MVC4+EF5.0+Ajax+Json+CSS3的简单注册页面（get&post）

    使用mvc4可以很快速的创建页面,但封装的过多,难免会有些性能上的问题.所以基于此,通过使用简单的手写html,加ajax,json来创建一个注册页面,会比较干净,简洁. 本项目的环境是MVC4+EF ...

  8. css3动画简单应用

    CSS3添加了几个动画效果的属性,通过设置这些属性,可以做出一些简单的动画效果而不需要再去借助JavaScript.CSS3动画的属性主要分为三类:transform.transition以及anim ...

  9. css3动画简单案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. java 发送http请求

    参考别人的 package test; import java.io.BufferedReader; import java.io.IOException; import java.io.InputS ...

  2. Ubuntu 更换阿里源

    查看新版本信息 lsb_release -c Ubuntu 12.04 (LTS)代号为precise. Ubuntu 14.04 (LTS)代号为trusty. Ubuntu 15.04 代号为vi ...

  3. hadoop fs 常用命令（1）

    Hadoop: https://blog.csdn.net/mulangren1988/article/details/54860924 Hadoop:1. Hadoop fs –fs [local ...

  4. 学习EXTJS6（2）“Hello Usegear”

    由于零基础,extjs6的资料不够多,所以直接动手困难不少.<Extjs Web应用程序开发指南>机械出版社虽然有点老,但是用于学习一步一步动手实践还是相当不错的.用的是extjs4.0. ...

  5. PHP5.5下安装配置EcShop

    建议用较旧的PHP版本与EcShop搭配,比如PHP5.3,新版的PHP有很多奇奇怪怪的问题... 错误描述: Deprecated: preg_replace(): The /e modifier ...

  6. kafka内置的zookeeper

    kafka 很多说不需要安装zk的是因为他们都使用了kafka自带的zk 至于kafka为什么使用zk,你首先要知道zk的作用, 作为去中心化的集群模式. 需要要消费者知道现在那些生产者(对于消费者而 ...

  7. Java中Void占位符的測试及个人理解

    Java对Void类的说明是:Void 类是一个不可实例化的占位符类,它保持一个对代表 Java keyword void 的 Class 对象的引用. 代表的是: 代表主要的 Java 类型 voi ...

  8. 关于SharePoint讨论板的一些知识（2）--视图中的栏目

    关于SharePoint讨论板的一些知识(2)--视图中的栏目         新建讨论后,默认显示四个栏目:主题.创建者.答复和上次更新时间.         从功能区的当前视图能够看出这是默认的主 ...

  9. SEAndroid安全机制框架分析

    我们知道,Android系统基于Linux实现. 针对传统Linux系统,NSA开发了一套安全机制SELinux,用来加强安全性. 然而.因为Android系统有着独特的用户空间执行时.因此SELin ...

  10. 多人即时战斗游戏服务端系列[2]--90坦克Online游戏对象介绍以及渲染机制

    先上类图,略大,点击此处放大: 1.先说下方接口 1.1 场景物品接口 ISceneObject : OpLog.IOpItem, IStackPoolObject 全部场景对象的基本接口,包含类型定 ...