尝试一下，仅作记录。

<!DOCTYPE html>
<html>
<head>
<style>
    *{transition:all 1s ease 0s;}

#showSlide{width:300px;height:200px;overflow:hidden;    border:20px solid #ccc;box-shadow:1px 1px 3px rgba(0,0,0,1);    }
    #inner{}
    .slide{width:300px;height:200px;display:inline-block;}
    label{border-radius: 5px;display: inline-block;width: 10px;height: 10px;background: #ccc;cursor:pointer;}
    input{display:none}
    #slide1:hover ~ #showSlide #inner{margin-top:0;}
    #slide2:hover ~ #showSlide #inner{margin-top:-200px;}
    #slide3:hover ~ #showSlide #inner{margin-top:-400px;}
    #slide4:hover ~ #showSlide #inner{margin-top:-600px;}
    label:hover{background:#000;}

</style>
</head>
<body>

<input checked="checked" name="slider" id="slide1" type="radio">
        <input name="slider" id="slide2" type="radio">
        <input name="slider" id="slide3" type="radio">
        <input name="slider" id="slide4" type="radio">
        <input name="slider" id="slide5" type="radio">

<div id="showSlide">
    <div id="inner">
    <artical>
    <div class="slide"><img src="data:images/slide1.jpg"></div>
    </artical>
    <artical>
    <div  class="slide"><img src="data:images/slide2.jpg"></div>
    </artical>
    <artical>
    <div class="slide"><img src="data:images/slide3.jpg"></div>
    </artical>
    <artical>
    <div  class="slide"><img src="data:images/slide4.jpg"></div>
    </artical>
    </div>
</div>
<div id="controller">
    <label for="slide1"></label>
    <label for="slide2"></label>
    <label for="slide3"></label>
    <label for="slide4"></label>
</div>
</body>
</html>

纯css实现slide效果的更多相关文章

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

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

  2. 纯 CSS 实现波浪效果！

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

  3. 纯css做幻灯片效果

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

  4. 纯css实现幻灯片效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  5. 纯css实现打字效果

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

  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. Install RHadoop with Hadoop 2.2 – Red Hat Linux

    Prerequisite Hadoop 2.2 has been installed (and the below installation steps should be applied on ea ...

  2. 【手机安全卫士01】项目Splash页面的开发与设计

    首先建立一个安卓的项目,然后修改manifest.xml文件,修改应用程序的logo和显示名称,效果图如下: 对应的代码如下: <?xml version="1.0" enc ...

  3. mysql中lock tables与unlock tables

    官网:https://dev.mysql.com/doc/refman/5.0/en/lock-tables.html LOCK TABLES tbl_name [[AS] alias] lock_t ...

  4. 怎样在WIN7系统下安装IIS

    http://jingyan.baidu.com/article/19192ad853224ce53f570748.html

  5. 在win2003上安装配置win 服务 遇到的问题

    在win2003上安装配置win 服务 win服务安装后启动不起来 .. 没有装.net framework4.0   要装这个版本 mysql-connector-net-6.3.4.zip    ...

  6. DLL入门浅析(3)——从DLL中导出变量

    转载自:http://www.cppblog.com/suiaiguo/archive/2009/07/20/90643.html 前面介绍了怎么从DLL中导出函数,下面我们来看一下如何从DLL中导出 ...

  7. 哈希表的C语言实现

    首先介绍一下什么是哈希表.同线性表.树一样,哈希表也是一种数据结构,理想情况下可以不需要任何比较,一次存取便能得到所查记录.所以它的优点就是查找特定记录的速度快.因为哈希表是基于数组的,所以创建后就难 ...

  8. js的简单模板解析

    在编程中总是会遇见很多动态生成的东西,一般我们都是通过简单的html拼接起来的 function createHtml(name, phone, addr, email, imageSrc){ var ...

  9. Cocoa Touch 层

    Cocoa Touch层包含创建 iOS应用程序所需的关键框架.上至实现应用程序可视界面,下至与高级系统服务交互,都需要该层技术提供底层基础.在开发应用程序的时候,请尽可能不要使用更底层的框架,尽可能 ...

  10. os即时通讯客户端开发之－mac上安装MySQL

    一.安装 到MySQL官网上http://dev.mysql.com/downloads/mysql/,下载mysql可安装dmg版本 比如:Mac OS X ver. 10.7 (x86, 64-b ...