<!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. JavaScript 客户端JavaScript之 脚本化文档

    客户端JavaScript的存在把静态HTML转变为交互式的Web应用程序,脚本化Web页面的内容正是JavaScript存在的理由.   一个文档对象模型或者说DOM就是一个API,它定义了如何访问 ...

  2. oracle sql语句中使用if逻辑

    l在 SQL 语句中使用IF-THEN-ELSE 逻辑 l l使用两种方法: •CASE 表达式:SQL99的语法,类似Basic,比较繁琐 •DECODE 函数:Oracle自己的语法,类似Java ...

  3. 武汉科技大学ACM ：1001: 华科版C语言程序设计教程（第二版）课后习题3.12

    Problem Description 输入n,输出对应的边长为n的空心正六边形. 为方便看图,样例中点 '.' 表示空格,打印图形时请打印空格而非小圆点. Input 边长n.(n<=20) ...

  4. 转发——推荐一些国外高质量Java开发者的博客

    学习Java很不错的一篇博客,总结了很详尽的Java开发者博客. http://www.admin10000.com/document/3373.html 这些博客具有以下特点: 文章的可读性和有独创 ...

  5. 关于常用却忘记的css，jQuery

    text-indent:35px;//首行缩进 line-height:12px;//行高,高度和外层高度一样就会居中 box-shadow:inset 0px 0px 2px #ccc; conte ...

  6. 【创建型】Prototype模式

    原型模式主要是用原型实例指定创建原型对象的种类,并且通过拷贝原型创建新对象.最简单的理解就是克隆.就如cocos2d-x中的 class Clonable::clone();该模式的主要目的是可以在运 ...

  7. web登录与授权

    web开发已经流行了很多年,登录与授权也基本有一套通用的流程,下面是我自己常用的登录与授权方式,欢迎大家讨论与吐槽. 概念: 登录是过程,授权是结果.登录只是为了获得页面的访问权限 or 操作权限 o ...

  8. MVC 中集成 AngularJS1

    在 ASP.NET MVC 中集成 AngularJS(1)   介绍 当涉及到计算机软件的开发时,我想运用所有的最新技术.例如,前端使用最新的 JavaScript 技术,服务器端使用最新的基于 R ...

  9. 在线安装maven插件问题：Cannot complete the install because one or more required items could not be found.

    用Eclipse在线安装的方式:Help-->Install  New Software 地址输入:http://m2eclipse.sonatype.org/sites/m2e/,列表中打勾勾 ...

  10. RazorEngine 学习笔记

    refer : https://github.com/Antaris/RazorEngine 微软的模板编辑器. Install-Package RazorEngine using RazorEngi ...