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. Python-字典与json的转换

    #json是字符串,只不过长得像字典 import json user_info='''{"niuhy":1234,"shanbl":44566}''' #js ...

  2. 在上线项目中，用Vue写一个星级评价

    先看一下效果: html: <div class="big-star-box"> <img :src="imgNum>0 ? srcStar : ...

  3. 基本类型数据转换（int，char，byte）

    public class DataUtil { public static void main(String[] args) { int a = 8; int value = charToInt(by ...

  4. [Swift]LeetCode391. 完美矩形 | Perfect Rectangle

    Given N axis-aligned rectangles where N > 0, determine if they all together form an exact cover o ...

  5. mysql+postgresql备份与恢复

    mysql备份一个库, mysqldump  -u用户名 -p密码 [选项] [数据库名] > /备份路径/备份文件名 mysqldump -uuser -p123123 auth > / ...

  6. 利用Visual Studio 2017的扩展开发(VSIX、ItemTemplate) 快速实现项目的半自动化搭建

    目录 0.引言 1.什么是Visual Studio项目模板 2.IWizad接口 3.通过Visual Studio扩展开发实现领域驱动开发 3.1 使用VSIX+ProjectTemplate创建 ...

  7. 1K star+ 的项目是如何炼成的？

    前言 首先标题党一下,其实这篇文章主要是记录我的第二个过 1K star 的项目 Java-Interview,顺便分享下其中的过程及经验. 需求选择 Java-Interview 之所以要做这个项目 ...

  8. 源码安装zabbix_agent4.0.3

    1.源码包下载地址:https://www.zabbix.com/download_sources 2.下载完后上传在任意目录用root用户创建以下脚本server_ip为服务端ip然后执行. gro ...

  9. RabbitMQ学习笔记（三） 发布与订阅

    发布与订阅 在我们使用手机发送消息的时候,即可以选择给单个手机号码发送消息,也可以选择多个手机号码,群发消息. 前面学习工作队列的时候,我们使用的场景是一个消息只能被一个消费者程序实例接收并处理,但是 ...

  10. redis 系列8 数据结构之整数集合

    一.概述 整数集合(intset)是集合键的底层实现之一, 当一个集合只包含整数值元素,并且这个集合元素数量不多时, Redis就会使用整数集合作为集合键的底层实现.下面创建一个只包含5个元素的集合键 ...