使用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

28

29

30

31

32

33

/**HTML**/

div.ani

/**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(http://d.hiphotos.baidu.com/image/w%3D400/sign=c01e6adca964034f0fcdc3069fc27980/e824b899a9014c08e5e38ca4087b02087af4f4d3.jpg) no-repeat;

}

25% {

background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=edee1572e9f81a4c2632edc9e72b6029/30adcbef76094b364d72bceba1cc7cd98c109dd0.jpg) no-repeat;

}

50% {

background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=937dace2552c11dfded1be2353266255/d8f9d72a6059252d258e7605369b033b5bb5b912.jpg) no-repeat;

}

75% {

background:url(http://g.hiphotos.baidu.com/image/w%3D400/sign=7d37500b8544ebf86d71653fe9f9d736/0df431adcbef76095d61f0972cdda3cc7cd99e4b.jpg) no-repeat;

}

100% {

background:url(http://c.hiphotos.baidu.com/image/w%3D400/sign=cfb239ceb0fb43161a1f7b7a10a54642/3b87e950352ac65ce2e73f76f9f2b21192138ad1.jpg) no-repeat;

}

}

Css实现一个简单的幻灯片效果页面的更多相关文章

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

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

  2. 简单说 用CSS做一个魔方旋转的效果

    说明 魔方大家应该是不会陌生的,这次我们来一起用CSS实现一个魔方旋转的特效,先来看看效果图! 解释 我们要做这样的效果,重点在于怎么把6张图片,摆放成魔方的样子,而把它们摆放成魔方的样子,重点在于用 ...

  3. HTML5实战教程———开发一个简单漂亮的登录页面

    最近看过几个基于HTML5开发的移动应用,比如臭名昭著的12036移动客户端就是主要使用HTML5来实现的,虽然还是有点反应迟钝,但已经比较流畅了,相信随着智能手机的配置越来越高性能越来越好,会越来越 ...

  4. 【Css】一个简单的选项卡

    这次来做一个简单的选项卡. 选项卡其实就分3个部分:html代码,用于显示的内容:css代码,用于显示的样式:javascript代码,用于点击事件. 老规矩,先写一个html坯子. <!DOC ...

  5. 【Css】一个简单的图片库

    今天做一个简单的图片库! 其实这个在w3school教程里介绍得很好了,不过看到什么,自己动手做一次,记得也深刻不是. 我们分几步来走: 第一步:先写一个坯子. <html> <he ...

  6. IOS中一个简单的粒子效果实现

    1.效果图展示 2.实现思路 1> 首先要实现上面的效果,第一步要处理的就是一个简单的画板,在View上面用鼠标滑动的时候画出线条,这个功能可使用UIBezierPath实现 2> 关于粒 ...

  7. Css打造一个简单的静态七巧板

    偶然在微博上看到用css写一个七巧板,正好也有一些源代码,于是就试着敲了敲. 主要是利用了css3的transform,实现平移,旋转,变形,直接用看到的代码敲出来之后有些问题,因为宽度上下面绿色的三 ...

  8. 用EF DataBase First做一个简单的MVC3报名页面

    使用EF DataBase First做一个简单的MVC3报名网站 ORM(Object Relational Mapping)是面向对象语言中的一种数据访问技术,在ASP.NET中,可以通过ADO. ...

  9. 【CSS】 一个简单的导航条

    今天来做一个导航条! 首先写一个坯子: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &quo ...

随机推荐

  1. 音频特征提取——librosa工具包使用

    作者:桂. 时间:2017-05-06  11:20:47 链接:http://www.cnblogs.com/xingshansi/p/6816308.html 前言 本文主要记录librosa工具 ...

  2. matlab笔记（1） 元胞结构cell2mat和num2cell

    摘自于:https://zhidao.baidu.com/question/1987862234171281467.html https://www.zybang.com/question/dcb09 ...

  3. JSP页面的静态包含和动态包含

    JSP中有两种包含:静态包含:<%@include file="被包含页面"%>和动态包含:<jsp:include page="被包含页面" ...

  4. 【JAVAWEB学习笔记】01_HTML

    案例一:网站信息显示页面1.什么是HTML?(Hyper Text Markup Language:超文本标记语言) 超文本:功能比普通文本更加强大 标记语言:使用一组标签对内容进行描述的一门语言(它 ...

  5. OpenCV探索之路（十一）：轮廓查找和多边形包围轮廓

    Canny一类的边缘检测算法可以根据像素之间的差异,检测出轮廓边界的像素,但它没有将轮廓作为一个整体.所以要将轮廓提起出来,就必须将这些边缘像素组装成轮廓. OpenCV中有一个很强大的函数,它可以从 ...

  6. 项目Contact开发中遇到的，引以为戒

    程序进去就闪退 其中指示错误的地方,函数内容如下: public void loadButtomMenu() { gv_buttom_menu = (GridView) this.findViewBy ...

  7. RFID智能感知摄像机推进智慧城市建设步伐

    随着智慧城市建设步伐的大力推进,各地的智慧城市建设取得了卓有成效的成果.物联网工程正在如火如荼地进行,顺应智慧城市物联网的发展大趋势,建设城市级的视频感知网,涉及治安.交通.教育等多方面综合传感应用, ...

  8. cuda学习2-block与thread数量的选取

    由上一节可知,在main函数中,cuda程序的并行能力是在add<<<N,1>>>( dev_a, dev_b, dev_c )函数中体现的,这里面设置的是由N个b ...

  9. An Introduction to Stock Market Data Analysis with R (Part 1)

    Around September of 2016 I wrote two articles on using Python for accessing, visualizing, and evalua ...

  10. 常用统计分析 SQL 在 AWK 中的实现（转）

    转自:http://my.oschina.net/leejun2005/blog/100710 最近有需求需要本地处理一些临时的数据,用做统计分析.如果单纯的 MYSQL 也能实现, 不过一堆临时数据 ...