<!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. IO流+数据库课后习题

    1,读取 试题文件 然后做题算分 File file1=new File("D:\\file","test.txt"); try{ FileReader in1 ...

  2. [转]简述volatile

    volatile int i=10; int j = i; ... int k = i; volatile 告诉编译器i是随时可能发生变化的,每次使用它的时候必须从i的地址中读取,因而编译器生成的可执 ...

  3. Javascript的location对象

    JavaScript window.location对象 示例 注意 方法 经常使用window.location,它的结构总是记不住,简单梳理下,方便以后查询. 示例 URL:http://b.a. ...

  4. 利用js得到某个范围内的整数随机数

    Math.random()方法可以返回(0,1)之间的随机数,不包括0和1. 套用公式:Math.floor(Math.random()*可能的值的总数+第一个可能的值) 如得到(3,9]之间的随机数 ...

  5. vsftpd 访问 权限控制

    vsftpd 重启命令 service vsftpd  start|restart|stop vsftpd 关于权限控制,有两个文件分别设置,都会起作用 /etc/vsftpd/user_list / ...

  6. IOS编程教程（八）：在你的应用程序添加启动画面

    IOS编程教程(八):在你的应用程序添加启动画面   虽然你可能认为你需要编写闪屏的代码,苹果已经可以非常轻松地把它做在Xcode中.不需要任何编码.你只需要做的是设置一些配置. 什么是闪屏 对于那些 ...

  7. java入门时的一些基本概念的理解(j2ee,j2se,j2me,jdk,sdk,jre,jvm,跨平台)

    首先声明,这篇文章是从网上粘贴过来的.原文地址是:http://www.cnblogs.com/wangaohui/archive/2012/11/28/2791999.html.感觉写的很好,所以粘 ...

  8. 用TMS的控件就可以了，有bug叫他们改

    [深圳]大宝delphi本身不是太隐定.不建议弄太多自己的东西.还要debug好长时间.为了快.便不去弄控件了够用了.真的.都不用花太多时间去弄这弄那.有bug叫他们改便可以.

  9. cf509E Pretty Song

    E. Pretty Song time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  10. 如何通过ftell和fseek来获取文件大小

    #include <stdio.h> int main () { FILE * pFile=NULL; long size; pFile = fopen ("myfile.txt ...