尝试一下，仅作记录。

<!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. cocos2d-x lua脚本开发 1

    自从开始关注OpenResty之后,逐渐关注Lua语言,发现这个语言真真是容易让人喜爱的语言.偶然间发现了cocos2d-x,还支持lua,所以果断尝试一下. 这里是在cocos2d-x官方网站下载了 ...

  2. INKDIE

    ink die是指分割出来的芯片未能达到原装芯片要求的那些U盘芯片,也就是俗称的黑片. 一整块圆硅分割制成芯片之后需要对其质量进行筛选,根据筛选的要求不同分为三个等级:原装的(Original).白片 ...

  3. Visual Studio创建跨平台移动应用_03.AppBuilder Extension

    1 背景 本章节是关于Telerik AppBuilder for Visual Studio的. 目前(2014.12)为Telerik公司Telerik Platform的一部分,Telerik ...

  4. 《算法问题实战策略》-chaper13-数值分析

    这一章节主要介绍我们在进行数值分析常用的二分.三分和一个近似求解区间积分的辛普森法. 首先介绍二分. 其实二分的思想很好理解并且笔者在之前的一些文章中也有所渗透,对于二次函数甚至单元高次函数的零点求解 ...

  5. selenium webdriver python 等待

    AJAX,即“Asynchronous Javascript And  XML”.可以实现网页的异步更新.也就是在不重新加载整个网页的情况下,对网页的某部分进行更新. 现在大多数网站都使用AJAX技术 ...

  6. GMU

    NEXT | 不错过任何一个新产品 百度开源 Mobile UI 组件库,提供 Web app.Pad 端简单易用的 UI 组件 发表评论

  7. java 中流的使用

    Java中的流,可以从不同的角度进行分类. 一.按照数:输入流和输出流. 输出流: 输入流: 因此输入和输出都是从程序的角度来说的. 二.按照处理数据单位不同可以分为:字节流和字符流. 字节流和字符流 ...

  8. XML (DOM解析) 看看就行

    000000000000000000000000000000000000000 ------------------------------------------------------------ ...

  9. hduTHE MATRIX PROBLEM(差分约束)

    题目请戳这里 题目大意:给一个n*m的矩阵,求是否存在这样两个序列:a1,a2...an,b1,b2,...,bm,使得矩阵的第i行乘以ai,第j列除以bj后,矩阵的每一个数都在L和U之间. 题目分析 ...

  10. Sublime Text 常用快捷键

    /* 之前用过的好多的编辑器,从IT大牛们的博客里知道了他们所谓的Vim,Vi,Emacs等,也都挨个装上试了,不尽人意,但自从遇到了Sublime Text,甚是喜欢,有道是“情不知何而起,一往而深 ...