尝试一下，仅作记录。

<!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. SlidingMenu和ActionBarSherlock结合滑动式菜单都

    https://github.com/jfeinstein10/SlidingMenu http://actionbarsherlock.com/ SlidingMenu 的demo工程引用了Acti ...

  2. 【HDOJ】1329 Hanoi Tower Troubles Again!

    水题,搞清楚hanoi的定义就好做了. /* 1329 */ #include <cstdio> #include <cstring> #include <cstdlib ...

  3. HDU 4421 Bit Magic(奇葩式解法)

    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=4421 题目大意: 给了你一段代码, 用一个数组的数 对其进行那段代码的处理,是可以得到一个矩阵 让你判 ...

  4. SQL中游标的使用

    一般情况下,我们用SELECT这些查询语句时,都是针对的一行记录而言,如果要在查询分析器中对多行记录(即记录集)进行读取操作时,则需要使用到游标或WHILE等循环 游标的类型:  1.静态游标(不检测 ...

  5. nova-network创建初始化网络

    nova-network创建初始化网络

  6. Matchers and assertthat

    assertThat的一般句型为: assertThat([value],[matcher statement]); 这种断言的优点有: 1.更具有可读性:该语法允许我们以“主谓宾”的方式来思考(as ...

  7. weblogic Connection has already been closed解决方法

    今天正式环境下的有一个功能报错,看了下weblogic日志,报连接已经关闭. com.ibatis.common.jdbc.exception.NestedSQLException: --- The ...

  8. 针对苹果最新审核要求：应用兼容IPv6

    在WWDC2015上苹果宣布iOS9将支持纯IPv6的网络服务.2016年初开始所有提交到App Store的应用必须支持IPv6.为确保现有的应用是兼容的,我们需要注意下面几点. 不建议使用底层的网 ...

  9. python常用的一些东西——sys、os等

    1.常用内置函数:(不用import就可以直接使用)      help(obj) 在线帮助, obj可是任何类型     callable(obj) 查看一个obj是不是可以像函数一样调用     ...

  10. Bloom Filter概念和原理

    Bloom Filter是一种空间效率很高的随机数据结构,它利用位数组很简洁地表示一个集合,并能判断一个元素是否属于这个集合.Bloom Filter的这种高效是有一定代价的:在判断一个元素是否属于某 ...