<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head>
    <title>纯CSS实现图片幻灯片效果(www.newxing.com)</title>
    <meta http-equiv="content-type" content="text/html;charset=gb2312" />
    <style type="text/css">
        dl { position:absolute;width:240px;height:170px;border:10px solid #eee;  }
        dd { margin:0;width:240px;height:170px;overflow:hidden;  }
        img{ border:1px solid black   }
        dt { position:absolute;right:3px;top:50px;   }
        a { display:block;margin:1px;width:20px;height:20px;text-align:center;font:700 12px/20px "宋体",sans-serif;color:#fff;text-decoration:none;background:#666;border:1px solid #fff;filter:alpha(opacity=40);opacity:.4;   }
        a:hover {background:#000}
    </style>
</head>
<body>
<dl>
    <dt><a href="#a" title="">1</a>
    <a href="#b" title="">2</a>
    <a href="#c" title="">3</a>
    </dt>
    <dd><img src="http://www.newxing.com/img/450/1.jpg" width="240" height="170" alt="" id="a" />
        <img src="http://www.newxing.com/img/450/2.jpg" width="240" height="170" alt="" id="b" />
        <img src="http://www.newxing.com/img/450/3.jpg" width="240" height="170" alt="" id="c" />
    </dd>
</dl>
</body>
</html>

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

  1. 纯css做幻灯片效果

    css3里面有一个@keyframes动画功能. w3c上面的例子: 可以使用它来做一个幻灯片效果. <!DOCTYPE html> <html lang="en" ...

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

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

  3. 纯 CSS 实现波浪效果！

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

  4. 纯css实现打字效果

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

  5. 纯 CSS 实现幻灯片播放

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

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

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

  7. HTML5 CSS3专题 纯CSS打造相册效果

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/30993277 今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时 ...

  8. 纯CSS实现JS效果研究

    利用CSS3:checked选择器和~配合实现tab切换 效果: 代码: <style> body,div,input,label{ margin:0; padding:0; } #tab ...

  9. 使用纯css实现波浪效果

    有时候我们需要实现水晃动的效果,其实我们可以通过css旋转动画和圆角来实现. 首先来2个div,外层div相对定位,内层div绝对定位,内层div大致位于外层div上半部分.外层div设置一个颜色较深 ...

随机推荐

  1. java 使用正则表达式对文件名非法字符处理

    1.文件名在操作系统中不允许出现  / \ " : | * ? < > 故将其以空替代       Pattern pattern = Pattern.compile(" ...

  2. 检查DOM能力的函数

    var a=document.implementation.hasFeature("Core","2.0"); var b=document.implement ...

  3. STL删除vector或list的方法及注意的问题

    删除vector中的元素 1.删除指定的所有对象 STL中remove()只是将待删除元素之后的元素移动到vector的前端,而不是删除.若要真正移除,需要搭配使用erase().例子: vector ...

  4. 修改浏览器的User-Agent来伪装你的浏览器和操作系统

    近期很多文章都提到了User-Agent (UA) 字符串,但大部分网友都不知道这个东西有什么用处.其实简单的说User-Agent就是客户端浏览器等应用程序使用的一种特殊的网络协议,在每次浏览器(邮 ...

  5. 性能测试工具--SIEGE安装及使用简介

    官方网站http://www.joedog.org/ 概述 Siege是一个多线程http负载测试和基准测试工具.它有3种操作模式: 1) Regression (when invoked by bo ...

  6. css的!important规则对性能有影响吗

    最近在做项目中发现很多CSS代码里面都使用!important去覆盖原有高优先级的样式.按照常理来说,越是灵活的东西,需要做的工作就会更多.所以想当然的认为像!important这样灵活.方便的规则如 ...

  7. 解决安装 Visual Studio 2012 后无法连接VPN的问题

    1. 单击“开始”,单击“运行”,键入“regedit”,然后单击“确定” 2. 找到下面的注册表子项,然后单击它: HKEY_LOCAL_MACHINE\System\CurrentControlS ...

  8. Android 中HttpURLConnection与HttpClient的简单使用

    1:HttpHelper.java public class HttpHelper { //1:标准的Java接口 public static String getStringFromNet1(Str ...

  9. angularjs directive and component 指令与组件 ( 1.5.0 以后 )

    之前写过一篇了 http://www.cnblogs.com/keatkeat/p/3903673.html 但某些部分写的不太清楚,甚至有点错误,所以今天特地在这里再来谈谈. 这篇主要是说指令的隔离 ...

  10. 检测鼠标键盘多久没有活动（使用GetLastInputInfo API函数检测）

    DELPHI代码 unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Contro ...