尝试一下，仅作记录。

<!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. 转：聊聊并发（八）——Fork/Join框架介绍

    1. 什么是Fork/Join框架 Fork/Join框架是Java7提供了的一个用于并行执行任务的框架, 是一个把大任务分割成若干个小任务,最终汇总每个小任务结果后得到大任务结果的框架. 我们再通过 ...

  2. Resharper 8.0 的最实用的功能

    在 8.0 里面.resharper 加入了 插件nuget方式 以前引用resharper插件.都是从新安装,复制进去,或者其他方式.比如resharper xunit  测试 我用xunit 插件 ...

  3. android环境下两种md5加密方式

    在平时开发过程中,MD5加密是一个比较常用的算法,最常见的使用场景就是在帐号注册时,用户输入的密码经md5加密后,传输至服务器保存起来.虽然md5加密经常用,但是md5的加密原理我还真说不上来,对md ...

  4. POJ1260 Pearls（dp,矩阵链乘法）

    题目链接. 题目大意: 给定一个n,和两个序列a[i], p[i]. a[i] 表示需要购买 i品质 的数量,p[i] i 等级的价格. 1.每个品质都会有不同的价格,价格依据品质上升而上升 2.买一 ...

  5. jstack(Stack Trace for Java)

    功能   用于生成虚拟机当前时刻的线程快照(一般称为threaddump或javacore文件).线程快照就是当前虚拟机内每一条线程正在执行的方法堆栈的集合,生成线程快照的主要目的是定位线程出现长时间 ...

  6. javascript正则表达式(一)——语法

    前言 js中类RegExp类表示正则表达式,具有强大的模式匹配.文本检索和替换功能.正则表达式的模式规则是由一个字符序列组成,包括所有字母和数字在内,大多数的字符都是按照直接量匹配字符,某些特殊字符并 ...

  7. 基于Minifilter框架的文件过滤驱动理解

    概述 Minifilter即File System Minifilter Drivers,是Windows为了简化第三方开发人员开发文件过滤驱动而提供的一套框架,这个框架依赖于一个称之为Filter ...

  8. CSAPP:Binary Bomb

    本篇文章参考了:http://www.cnblogs.com/remlostime/archive/2011/05/21/2052708.html大神的文章,有时候没思路了会来看一下,但是保证本文的每 ...

  9. libvirt API管理hypervisors

    发布一段C代码,用于连接指定的KVM宿主机器,获得该宿主机器的配置信息,以及该主机上所有的虚拟主机列表.状态及配置信息: #include <stdio.h>#include <st ...

  10. 微博广告推荐中有关Hadoop的那些事

    一.背景 微博,一个DAU上亿.每日发博量几千万的社交性产品,拥有庞大的数据集.如何高效得从如此规模的数据集中挖掘出有价值的信息,以增强用户粘性,提高信息传播速度,就成了重中之重.因此,我们引入了ha ...