<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <!--声明当前页面的编码集charset=gbk中文编码gb2312,charset=utf-8 国际编码-->
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <!--当前页面的三要素-->
        <title>标题</title>
        <meta name="Keywords" content="关键词,关键词">
        <meta name="description" content="描述">    
        <!--css , js-->
<style type="text/css">
#Con{width:900px; /*宽度*/ height:500px;/*高度*/ background:#9933FF;/*背景颜色*/
        position:relative;}
#content{width:900px; height:500px; background:#669999;}
#content div{width:225px; height:500px; background:#3366FF;
                float:left;/*在水平方向显示*/ position:relative;/*相对定位*/
                overflow:hidden;}
#content div span{width:225px; height:500px;  display:block; position:absolute; top:0px; left:225px;}
input#but1:checked ~ #content div span:nth-child(1){background-image:url("images/1.jpg");}

input#but2:checked ~ #content div span:nth-child(2){background-image:url("images/2.jpg");}
input#but3:checked ~ #content div span:nth-child(3){background-image:url("images/3.jpg");}
input#but4:checked ~ #content div span:nth-child(4){background-image:url("images/4.jpg");}*/

#content div:nth-child(1) span{background-position:0px 0px;}
#content div:nth-child(2) span{background-position:-225px 0px;}
#content div:nth-child(3) span{background-position:-450px 0px;}
#content div:nth-child(4) span{background-position:-675px 0px;}

input#but1:checked ~ #content div span:nth-child(1),
input#but2:checked ~ #content div span:nth-child(2),
input#but3:checked ~ #content div span:nth-child(3),
input#but4:checked ~ #content div span:nth-child(4)
{left:0px;-webkit-transition:left 0.5s ease;}

label{width:30px; height:30px; background:#33FFFF; display:block; border-radius:15px;
            text-align:center;/*水平方向显示*/line-height:30px;/*在竖直方向距中*/
            position:absolute;z-index:333;top:450px;}

input#but1 + label{left:700px;}
input#but2 + label{left:750px;}
input#but3 + label{left:800px;}
input#but4 + label{left:850px;}

input:checked + label{background:#fff;border:5px solid #33FFFF;border-radius:20px;}
input{display:none;/*隐藏*/}
</style>

</head>
<body>
<!--Div 盒子模型，高度，宽度，放置内容-->    
<div id="Con">
        <!--按扭开始-->
        <input type="radio" name="but" id="but1" checked/>
        <label for="but1">1</label>

<input type="radio" name="but" id="but2"/>
        <label for="but2">2</label>

<input type="radio" name="but" id="but3"/>
        <label for="but3">3</label>

<input type="radio" name="but" id="but4"/>
        <label for="but4">4</label>

<div id="content">
        <div>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>

<div>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>

<div>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>

<div>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>

</div>

</div>

</body>
</html>

效果图：

css3百叶窗轮播图效果的更多相关文章

  1. CSS3实现轮播图效果

    CSS3实现轮播图主要是由css:background-position和css3:animation实现.且实现此轮播需要一张四个图横着相连的图片. 注(Internet Explorer 10.F ...

  2. CSS3实现轮播图效果2

    先前用CSS3做了一个一张图片实现的轮播,但是这样的图片很难找,于是又改进了一下. HTML: <div class="box"> <ul> <li& ...

  3. 纯CSS实现轮播图效果，你不知道的CSS3黑科技

    前言 轮播图已经是一个很常见的东西,尤其是在各大App的首页顶部栏,经常会轮番显示不同的图片. 一提到轮播图如何实现时,很多人的第一反应就是使用Javascript的定时器,当然这种方法是可以实现的. ...

  4. js实现轮播图效果(附源码)--原生js的应用

    1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  5. 纯CSS3实现轮播图

    前言 纯css3实现的轮播图效果,和JavaScript控制的相比,简单高效了很多,但是功能也更加单一,只有轮播不能手动切换. 用什么实现的呢?页面布局 + animation动画 HTML部分 &l ...

  6. 高仿阴阳师官网轮播图效果的jQuery插件

    代码地址如下:http://www.demodashi.com/demo/12302.html 插件介绍 这是一个根据阴阳师官网的轮播效果所扒下来的轮播插件,主要应用于定制个性化场景,目前源码完全公开 ...

  7. css3实现轮播图

    css3动画属性简写: animation: name  duration  timing-function  delay  iteration-count  direction  fill-mode ...

  8. 用html +js+css 实现页面轮播图效果

    html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...

  9. JavaScript实现轮播图效果

    我又来了,同志们.老想你们了 捕获小可爱一枚. 下面进入正题:用JavaScript原生代码写轮播图效果. 具体效果就不多说了,网站上面的轮播效果我们都知晓.下面是展示代码 html代码: <d ...

随机推荐

  1. (转)解决png图片在IE6下不透明的方法

    来源于:http://xzl52199.blog.163.com/blog/static/95206446201142174540220/ 一.传统的JavaScript方法 思路: 1.一个专门解决 ...

  2. Windows环境下tomcat配置日志输出

    在Linux系统中,可以通过tail  -f  catalina.out 来跟踪Tomcat 和相关应用运行的情况. 在windows下,catalina日志与Linux记录的内容有很大区别,大多信息 ...

  3. PMP考试的过与只是

    我在一年多时间里參加了三次PMP考试,前两次都失败,直到第三次才成功.怎样对待失败?这是每个人都会遇到的挑战.假设我们能用正确的态度对待临时的失败,那么终于的成功也就不远了.我希望通过本文与大家分享一 ...

  4. PHP文件头部(header)解释

    1. Accept:告诉WEB服务器自己接受什么介质类型,*/* 表示任何类型,type/* 表示该类型下的所有子类型,type/sub-type. 2. Accept-Charset:   浏览器申 ...

  5. android开发必备日志打印工具类

    今天给大家献上一款好用的日志打印工具.大家在平时的开发中用的最多的可能就是Log.i("",""),Log.e("","" ...

  6. Android 自定义View修炼-自定义HorizontalScrollView视图实现仿ViewPager效果

    开发过程中,需要达到 HorizontalScrollView和ViewPager的效果,于是直接重写了HorizontalScrollView来达到实现ViewPager的效果. 实际效果图如下: ...

  7. Android开发之设定Dialog的位置

    今天自定义了一个对话框,但是弹出时默认是显示在屏幕中间.主要代码:menuDialog = new AlertDialog.Builder(this).create();                ...

  8. mybatis缓存清除方法

    String cacheName = IWenshiduDao.class.getName(); Ehcache cache = CacheManager.create().getEhcache(ca ...

  9. JS实现图片宽高的等比缩放

    关于图片宽高的等比缩放,其实需求就是让图片自适应父容器的宽高,并且是等比缩放图片,使图片不变形. 例如,需要实现如下的效果: 要实现上面的效果,需要知道图片的宽高,父容器的宽高,然后计算缩放后的宽高. ...

  10. android检查自动升级

    好像大半年没发点啥了,也不知道自己瞎忙啥,闲下来发给最近的东东<安卓在线升级> 类已经封装好了,简单的调用就OK了.这里的数据交互,我是用.NET写的一个webservice来交互.废话也 ...