<!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. Peterson算法与Dekker算法解析

    进来Bear正在学习巩固并行的基础知识,所以写下这篇基础的有关并行算法的文章. 在讲述两个算法之前,需要明确一些概念性的问题, Race Condition(竞争条件),Situations  lik ...

  2. CONTROLS: <> TYPE TABLEVIEW USING SCREEN<>.在 ABAP/4 中声明表格 控制

    在 ABAP/4 中声明表格 控制 在屏幕中使 用表格控制 时,必须在 ABAP/4 程序中同时 声明表格控 制结构和表 格控制字段 . 例如: TABLES:   SFLIGHT. CONTROLS ...

  3. 从零开始学C++之数据封装与抽象：分别用C和C++来实现一个链栈

    下面通过分别用C和C++来实现一个链栈(链表实现),从中体会数据封装抽象的思想: C语言实现:  C++ Code  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 ...

  4. UVA 297 Quadtrees（四叉树建树、合并与遍历）

    <span style="font-size: 18pt; font-family: Arial, Helvetica, sans-serif; background-color: r ...

  5. richTextBoxBulletClass

    设置和获取选中的样式为 1. 2. 3. #region 数字序列 1. 2. 3. 4. 5. ... private bool bOrder = false; public bool Select ...

  6. O(1)调度器的时间计算公式与CFS调度器

    http://blog.csdn.net/dog250/article/details/48750809 O(1): 优先级计算: 进程优先级公式:prio=MAX_RT_PRIO+nice+20其中 ...

  7. Linux文件/目录权限整理

  8. C#将DataTable导出Execl、Word、Xml

        /// <summary>     /// 将DT转换为Execl的方法     /// </summary>     /// <param name=" ...

  9. Spring声明式事务（xml配置事务方式）

    Spring声明式事务(xml配置事务方式) >>>>>>>>>>>>>>>>>>>& ...

  10. 借用网上大神的一些知识，html5 video 视频播放都兼容（Android，iOS，电脑）

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    < ...