<!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. PHP Calendar 函数

    PHP 5 Calendar 函数 函数 描述 cal_days_in_month() 针对指定的年份和历法,返回一个月中的天数. cal_from_jd() 把儒略日计数转换为指定历法的日期. ca ...

  2. mysql数据表如何导入MSSQL中

    本案例演示所用系统是windows server 2012.其它版本windows操作系统类似. 1,首先需要下载mysql odbc安装包. http://dev.mysql.com/downloa ...

  3. SQL Server自定义函数( 转载于51CTO )

    用户自定义函数自定义函数不能执行一系列改变数据库状态的操作,可以像系统函数在查询或存储过程等的程序中使用,也可以像相信过程一样能过 execute 命令来执行.自定义函数中存储了一个 Transact ...

  4. C/C++默认浮点型

    代码: #include <iostream> #include <cstdio> using namespace std; void test(int a){ cout< ...

  5. 转载：CURL常用命令

    转载网址:http://www.cnblogs.com/gbyukg/p/3326825.html 下载单个文件,默认将输出打印到标准输出中(STDOUT)中 curl http://www.cent ...

  6. JQUERY1.9学习笔记 之层级选择器(四)

    下一个邻居选择器(“prev ~ siblings”) 描述:选择所有"prev"后的邻居选择器,他们有相同的父节点. 注意:prev + next 与 prev ~ siblin ...

  7. js console.log 打印 对像 数组 详解

    console.log是什么东西,其实就是一个打印js数组和对像的函数而已,就像是php的print_r,var_dump.console.log这个函数本身没什么好说的,这篇博客告诉大家怎么去用这个 ...

  8. 一个使用CSocket类的网络通信实例

    http://www.cppblog.com/changshoumeng/archive/2010/05/14/115413.html 3.8 一个使用CSocket类的网络通信实例 本例采用CSoc ...

  9. build.prop各种优化代码

    1.首先要准备RE管理器以及root权限.2.在根目录里的system文件夹找到build.prop文件.3.打开build.prop文件后找到代码ro.sf.lcd_density=240(这里的2 ...

  10. AdHoc发布时出现重复Provisioning Profile的解决方案

    当在developer.apple.com更新Provisioning Profile(添加新机器)后,下载到本地,双击载入xcode,运行时没问题.但如果用adhoc发布,可能会发现重复的provi ...