<!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. 读书笔记「Python编程：从入门到实践」_4.操作列表

    4.1 遍历整个列表   4.1.1 深入地研究循环   4.1.2 在for循环中执行更多的操作   4.1.3 在for循环结束后执行一些操作  例 magicians = ['alice', ' ...

  2. Dll中的方法向外返回dynamic类型可能会失败

    如果Dll中有某个类的方法返回dynamic实例,并且dynamic对象实际实例为匿名类类型,则Dll的外部使用者可能最终无法正常使用此dynamic对象.当使用此dynamic对象时,可能会遇到x属 ...

  3. BZOJ 4195: [Noi2015]程序自动分析 并查集 + 离散化 + 水题

    TM 读错题了...... 我还以为是要动态询问呢,结果是统一处理完了再询问...... 幼儿园题,不解释. Code: #include<bits/stdc++.h> #define m ...

  4. 【剑指Offer】60、把二叉树打印成多行

      题目描述:   从上到下按层打印二叉树,同一层结点从左至右输出.每一层输出一行.   解题思路:   本题可类比第22题:从上往下打印二叉树,这两道题实际上是一回事,只不过这里我们多了一个分行打印 ...

  5. [luogu1090 SCOI2003] 字符串折叠（区间DP+hash）

    传送门 Solution 区间DP,枚举断点,对于一个区间,枚举折叠长度,用hash暴力判断是否能折叠即可 Code #include <cstdio> #include <cstr ...

  6. [POJ2404]Jogging Trails

    我太弱了. 我们可以知道一个结论就是对于一个图的话假如所有点的度数都是偶数,那么只需要走一波欧拉回路. 所以我们就把奇点补成偶点. 将两个奇点补充到偶点的最佳方法是选择任意两个奇点连最短路径为权的边 ...

  7. 2019-04-18 Python Base 1

    C:\Users\Jeffery1u>python Python 3.7.3 (default, Mar 27 2019, 17:13:21) [MSC v.1915 64 bit (AMD64 ...

  8. NET 爬虫

    最近经常听说或者接触关于网络爬虫的问题,只是一直看到被人写的代码.而没有真正的做过实践, 昨天做了一下尝试,其中采用网络流行的扩展类库 http://html-agility-pack.net/?z= ...

  9. 洛谷 P2813 母舰

    题目描述 在小A的星际大战游戏中,一艘强力的母舰往往决定了一场战争的胜负.一艘母舰的攻击力是普通的MA(Mobile Armor)无法比较的. 对于一艘母舰而言,它是由若干个攻击系统和若干个防御系统组 ...

  10. POJ 1678

    博弈题,使用DP来完成.开始时,我以为可以用极大极小加剪枝可以过,但,TLE... 看过一些题解,没看懂,但也由此有了启发: 我们只记录差(初始为0),那为1选的数即为在原差值上加上该数,2选即是减去 ...