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. ps入门学习

    快捷键 打开 ctrl+O 切换显示窗口 ctrl+tab 隐藏工具栏和面板  tab 只隐藏面板不隐藏工具栏  shift+tab 切换屏幕模式  F 文件的新建与格式 1.新建文档Ctrl+N,存 ...

  2. return和throw某些特性相似

    拷贝构造函数的调用拷贝构造函数会在以下三中情况下被调用(1)当类的一个对象去初始化该类的另一个对象时 int main(){ Point a(1,2); Point b(a);//用对象a初始化对象b ...

  3. 深港澳大湾区(深圳).NET技术交流会圆满成功

    2018年7月7日一场以.NET Core微服务和机器学习为主题的交流会成功在深圳职业技术学院落下帷幕.这次活动在短短的一周时间内,报名人数超过了170人,除了一些同学临时有事,基本都到现场了,特别感 ...

  4. 流媒体协议（一）：HLS 协议

    一.HLS 概述 HLS 全称是 HTTP Live Streaming,是一个由 Apple 公司提出的基于 HTTP 的媒体流传输协议,用于实时音视频流的传输.目前HLS协议被广泛的应用于视频点播 ...

  5. #Java学习之路——第一部分总结

    今天主要是Java的入门以及idea的安装说实话,没有什么有技术含量的东西,发的也全是皮毛,但是在数组部分有很多细节需要注意,在JDK环境变量配置的地方不光光只有windows 的环境配置,还要掌握补 ...

  6. Maven项目执行java入口main方法

    在Maven项目中配置pom.xml文件加载maven-surefire-plugin插件来执行testng.xml,相信大家对此种用法已经非常熟悉了.但是有些场景可能需要我们去加载执行java的ma ...

  7. [Reversing.kr] Easy ELF Writeup

    IDA打开,看到main()函数,当sub_8048451() 返回1 是flag正确. 跟踪函数. 脚本: #!usr/bin/env python #!coding=utf-8 __author_ ...

  8. node开发备注

    设置环境变量 // 命令行启动: "scripts": { "start": "export NODE_ENV=dev && node ...

  9. Java基础7：关于Java类和包的那些事

    更多内容请关注微信公众号[Java技术江湖] 这是一位阿里 Java 工程师的技术小站,作者黄小斜,专注 Java 相关技术:SSM.SpringBoot.MySQL.分布式.中间件.集群.Linux ...

  10. 初探Java设计模式2：结构型模式（代理模式，适配器模式等）

    行为型模式 行为型模式关注的是各个类之间的相互作用,将职责划分清楚,使得我们的代码更加地清晰. 策略模式 策略模式太常用了,所以把它放到最前面进行介绍.它比较简单,我就不废话,直接用代码说事吧. 下面 ...