<!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. 20169210《Linux内核原理与分析》第四周作业

    网易云课堂学习: 在实验楼的学习中,这次的实验是利用mykernel实验模拟计算机硬件平台 首先进入linux-3.9.4, $cd LinuxKernel/linux-3.9.4 如下图所示 接下来 ...

  2. FontCombobox 和FontSizeCombobox

    附件:http://files.cnblogs.com/xe2011/WindowsFormsFontCombox.rar 自定义组件字体组合框 自定义组件字体组合框如何使用 自定义组件字体大小组合框 ...

  3. hdu 4651 Partition (利用五边形定理求解切割数)

    下面内容摘自维基百科: 五边形数定理[编辑] 五边形数定理是一个由欧拉发现的数学定理,描写叙述欧拉函数展开式的特性[1] [2].欧拉函数的展开式例如以下: 亦即 欧拉函数展开后,有些次方项被消去,仅 ...

  4. android开发之Toast的多种应用

    Toast最基本的功能就是弹出一个弱提示,这个很简单我就不说了,说说Toast一些其他的作用. 来公司的时候,公司产品的1.0版本已经发布出去了,但是1.0是一个必须联网才能使用的产品,在2.0中想让 ...

  5. Android（java）学习笔记185：xml文件生成

    1.xml文件: 用元素描述数据,跨平台. 2.利用传统的方式创建xml文件,下面是一个案例: 设计思路:建立一个学生管理系统,创建xml文件保存学生信息: (1)首先是布局文件activity_ma ...

  6. Attribute 特性

    转载   不错   摘要:纠结地说,这应该算是一篇关于Attribute 的笔记,其中的一些思路和代码借鉴了他人的文笔(见本文底部链接).但是,由于此文对Attribute 的讲解实在是叫好(自夸一下 ...

  7. Windows环境下使用Cmake ndk编译fdk-aac

     一.废话 最近学习,第一步就是编译.我们需要编译FFmpag,x264,fdk_aac,下面是x264,网上说的很多都是几百年前的,我亲测完美可用 还是那句话 我能力有限,但是我希望我写的东西能够让 ...

  8. A题笔记（1）

    #include <stdlib.h> exit(); #include <stdlib.h> 是 exit(0) 必须的头文件 否则会出现 exit was not decl ...

  9. js文件缓存之版本管理

    以前也做过不少项目,但从来就没有把关注的目光投向过js文件缓存.最近终于在毫无意识的情况下跳进了这个大坑. 近几个月来的工作是一个交易系统持续改进项目,迭代发布周期大约为2~3周.最近一次迭代是V16 ...

  10. iOS-UI控件精讲之UILabel

    UILabel(标签)应该是iOS中最基本的一个控件了,也是使用频率最高的,经常用来展示一段不可编辑的文本. UILabel继承于UIView,下面是一些常用的属性,包含继承于UIView的属性. 1 ...