css3里面有一个@keyframes动画功能。

w3c上面的例子：

可以使用它来做一个幻灯片效果。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>纯CSS做幻灯片</title>

</head>

<style>

    @keyframes slide {

        0% {

            background: url('https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4229874093,2188481433&fm=26&gp=0.jpg') 0px 0px

        }

        25% {

            background: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1548875514394&di=62dd50a1da7183efb48c88980269b64c&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D3037014303%2C3112421008%26fm%3D214%26gp%3D0.jpg') 0px 0px;

        }

        50% {

            background: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1548875548425&di=1bc4e9b80d56d1f10c0e4d326dfa505a&imgtype=jpg&src=http%3A%2F%2Fimg1.imgtn.bdimg.com%2Fit%2Fu%3D1161267701%2C3620139336%26fm%3D214%26gp%3D0.jpg') 0px 0px;

        }

        100% {

            background: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1548875490599&di=8c072d8773a04366464cac34db72f50e&imgtype=0&src=http%3A%2F%2Fp1.so.qhmsg.com%2Ft015663aba355e338c6.png') 0px 0px;

        }

    }

    div {

        width: 400px;

        height: 400px;

        animation: slide 14s infinite;

    }

</style>

<body>

    <div>

    </div>

</body>

</html>

　　

纯css做幻灯片效果的更多相关文章

  1. 纯css实现幻灯片效果

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

  2. css 做幻灯片效果

     设置一个div 盒子 <div class="ani"></div> 设置css 样式 .ani{ width:480px; height:320px; ...

  3. 利用target的特性，可以实现纯css的tab效果切换

    基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...

  4. 纯 CSS 实现波浪效果！

    一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...

  5. 纯css实现打字效果

    概述 很早以前就在别人的博客上面看到打字动画了,觉得非常炫酷,以为是用js做的,找了半天也没找到js在哪里.今天看<css揭秘>,碰巧看到书上打字动画的实现了,而且是纯css实现的!我参考 ...

  6. 纯 CSS 实现幻灯片播放

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

  7. 纯css做的安卓开机动画

    随着css3的发展,越来越多的负责绚丽的效果可以由纯css来完成了.用css3实现的动画效果丝毫不必js实现的逊色,而且浏览器对css渲染的速度远比js快,大多数时候css的体积也不js小.其中css ...

  8. 纯CSS做3D旋转魔方

    昨天偶然看见网友(简单说 用CSS做一个魔方旋转的效果)做的一个3D旋转魔方  效果就是本博客右侧公告栏所示 在这里把做法展现出来 感兴趣的可以试试  做成自己特有的魔方 <!DOCTYPE h ...

  9. IE7,8纯css实现圆角效果

    众所周知,IE7,8不支持border-radius效果.但我们同样有办法用css实现这个效果,方法就是用border来模拟. <!DOCTYPE html> <html lang= ...

随机推荐

  1. [Swift]LeetCode436. 寻找右区间 | Find Right Interval

    Given a set of intervals, for each of the interval i, check if there exists an interval j whose star ...

  2. 【dotNet Core】Swagger下简单的给WebApi分组

    Startup.cs下ConfigureServices代码 这里主要在DocInclusionPredicate控制输出那些api. Startup.cs下Configure代码 给Controll ...

  3. Docker for windows : 安装linux

    一.Linux 1.拉取镜像 docker pull hub.c..com/library/oraclelinux:latest 2.创建linux容器 C:\Users\K-Jso>docke ...

  4. 设置radio选中

    选中: $('.viewradio:input[name="istop"][value="' + getSelected().istop + '"]').pro ...

  5. spark计算两个DataFrame的差集、交集、合集

    spark 计算两个dataframe 的差集.交集.合集,只选择某一列来对比比较好.新建两个 dataframe : import org.apache.spark.{SparkConf, Spar ...

  6. Python爬虫入门教程 30-100 高考派大学数据抓取 scrapy

    1. 高考派大学数据----写在前面 终于写到了scrapy爬虫框架了,这个框架可以说是python爬虫框架里面出镜率最高的一个了,我们接下来重点研究一下它的使用规则. 安装过程自己百度一下,就能找到 ...

  7. shell实战之tomcat看门狗

    1.脚本简介 tomcat看门狗,在tomcat进程异常退出时会自动拉起tomcat进程并记录tomcat运行的日志. 函数说明: log_info:打印日志的函数,入参为需要在日志中打印的msg s ...

  8. Typora - Markdown 语法说明

    Typora 是 Windows 下最好的 Markdown 编辑器!不接受反驳~ 导图 快捷键标题:Ctrl + 数字 Ctrl + 123456 代表 H1-H6 级标题Ctrl + 0 恢复普通 ...

  9. 客户端缓存机制 - Cookie详解

    Cookie 作者:Stanley 罗昊 [转载请注明出处和署名,谢谢!] Cookie不是内置对象,所以用的时候需要new出来,Cookie是由服务端产生的,再发送给客户端保存,它不是内置对象,却是 ...

  10. 【Java基础】【26网络编程】

    26.01_网络编程(网络编程概述)(了解) A:计算机网络 是指将地理位置不同的具有独立功能的多台计算机及其外部设备,通过通信线路连接起来,在网络操作系统,网络管理软件及网络通信协议的管理和协调下, ...