<!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. 使用GridView自带分页的代码

    关于GridView分页页码的讨论 在GridView中实现分页的效果方法非常easy,仅仅须要在"GridView任务"对话框中进行设置就能够了.在"GridView任 ...

  2. http://poj.org/problem?id=2253

    floyd的应用求每条路径两点之间最大距离的最小值 #include <iostream> #include <cstdio> #include <algorithm&g ...

  3. [Ionic] Ionic Quickstart for Windows

    1. Install ionic 2. Create ionic app ionic start myApp tabs //create a app cd myApp ionic serve // o ...

  4. TabHost 两种使用方法 直接让一个Activity 继承TabActivity 和 利用findViwById()方法取得TagHost组件

    第一种,TabActivity 解决方案 下面建立的布局文件,它包含多个标签的显示组件 <?xml version="1.0" encoding="utf-8&qu ...

  5. Java 授权内幕--转载

    在信息安全性领域,授权是世界的的中心,因为它是控制个体(即人.进程和计算机)对系统资源的访问权限的过程.直到最近,在 Java 安全体系结构中相关的问题都是“这段运行中的代码的访问权限是什么?” 随着 ...

  6. Ⅵ.AngularJS的点点滴滴-- 指令

    指令 基本用法 <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angul ...

  7. 指针做MAP的KEY的TEST

    用struct做map的key会需要"operator <"等等,还会出现奇怪的问题可能. 试了下用指针做key,看看效果: #include <iostream> ...

  8. 在DropDownList里显示多级分类

    protected void ddlBind() { DataTable dt = new DataTable(); ddlCategoryId.DataSource = getList(" ...

  9. user.table.column, table.column 或列说明无效

    Oracle统计采用别名出错(user.table.column, table.column 或列说明无效) >>>>>>>>>>>& ...

  10. 利用jquery实现百度新闻导航菜单滑动动画

    前言 前两天,群里有人问百度新闻导航是如何实现的,当时由于忙于工作,没有来得及细看,恰好今天有空闲时间,索性就实现一下这个效果吧: 思路与步骤 1.利用UL创建简单横向导航: <!DOCTYPE ...