<!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8" />

     <title>使用CSS3实现百叶窗</title>

     <meta name="keywords" content="" />

     <meta name="description" content="" />

     <style>

         *{margin:0;padding:0;}

         body{}

         ul,li{list-style:none;}

         #banner{width:800px;height:500px;margin:60px auto;border:3px solid #082323;position:relative; }

         #banner .pic li{width:200px;height:500px;float:left;position:relative;overflow:hidden;}

         #banner .pic li div{width:200px;height:500px;position:absolute;left:-200px;}

         #banner .pic li div:nth-child(1){background-image:url("images/1.jpg");}

         #banner .pic li div:nth-child(2){background-image:url("images/2.jpg");}

         #banner .pic li div:nth-child(3){background-image:url("images/3.jpg");}

         #banner .pic li div:nth-child(4){background-image:url("images/4.jpg");}

         #banner .pic li:nth-child(1) div{background-position:0;}

         #banner .pic li:nth-child(2) div{background-position:-200px;}

         #banner .pic li:nth-child(3) div{background-position:-400px;}

         #banner .pic li:nth-child(4) div{background-position:-600px;}

         input{display:none;}  /*隐藏radio按钮*/

         label{display:block;width:20px;height:20px;background:#999;z-index:2;

             border-radius:100%;color:#fff;position:absolute;bottom:15px;

             text-align:center;line-height:20px;

         }

         label:nth-child(2) {right:100px;}

         label:nth-child(4) {right:70px;}

         label:nth-child(6) {right:40px;}

         label:nth-child(8) {right:10px;}

         input:checked + label{background:#0A7979;}  /*+获取紧邻兄弟元素加上背景*/

         /*~获取相邻兄弟改变div的位置*/

         input#ra1:checked ~ .pic li div:nth-child(1){left:0;transition:0.6s;}

         input#ra2:checked ~ .pic li div:nth-child(2){left:0;transition:0.6s;}

         input#ra3:checked ~ .pic li div:nth-child(3){left:0;transition:0.6s;}

         input#ra4:checked ~ .pic li div:nth-child(4){left:0;transition:0.6s;}

     </style>

 </head>

 <body>

     <div id="banner">

         <input type="radio" id="ra1" name="choose" checked><label for="ra1">1</label>

         <input type="radio" id="ra2" name="choose"><label for="ra2">2</label>

         <input type="radio" id="ra3" name="choose"><label for="ra3">3</label>

         <input type="radio" id="ra4" name="choose"><label for="ra4">4</label>

         <ul class="pic">

             <li><div></div><div></div><div></div><div></div></li>

             <li><div></div><div></div><div></div><div></div></li>

             <li><div></div><div></div><div></div><div></div></li>

             <li><div></div><div></div><div></div><div></div></li>

         </ul>

     </div>

 </body>

 </html>

使用CSS3实现百叶窗的更多相关文章

  1. 基于CSS3 3D百叶窗图像过渡特效

    你可能已经在网上看到过不少使用jQuery制作的百叶窗效果,我们可不可以使用纯CSS来完成这项工作呢?答案是肯定的.我们不仅可以制作出这种百叶窗效果,还可以使它具有响应性. 在线预览   源码下载 要 ...

  2. css3百叶窗轮播图效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 20+功能强大的jQuery/CSS3图片特效插件

    以下是分享的20几个不错的图片特效插件,基于jQuery和CSS3. 1.jQuery图片下滑切换播放效果 这是一款基于jQuery的焦点图插件,这款焦点图的特点是有向下滑动的动画效果,滑到底部时,有 ...

  4. Css3 - 全面学习

    css3实验.生成.学习网站 http://www.css3maker.com/ http://www.css3.me/ 查询前缀和兼容性 http://caniuse.com/ 1.文本阴影 < ...

  5. CSS3笔记

    CSS/CSS3在线手册:http://www.css119.com/book/css/   CSS3实现水平垂直居中:http://bbs.html5cn.org/thread-87300-1-1. ...

  6. 10款web前端基于html5/CSS3应用特效

    1.jQuery百叶窗效果焦点图 多种百叶窗动画方式 对于百叶窗动画效果,我们介绍的不是很多,目前就介绍过一款CSS3百叶窗图片切换.这次要给大家带来一个基于jQuery的多种百叶窗动画效果焦点图,焦 ...

  7. 分享10款功能强大的HTML5/CSS3应用插件

    1.纯CSS3美化Checkbox和Radiobox按钮 外观很时尚 利用CSS3我们可以打造非常具有个性化的用户表单,今天我们就利用CSS3美化Checkbox复选框和Radiobox单选框.CSS ...

  8. 分享8款最新HTML5/CSS3功能插件及源码下载

    1.HTML5/CSS3鬼脸表情下拉菜单 超级可爱 这款HTML5/CSS3鬼脸表情下拉菜单真的很特别,虽然菜单的实现并没有利用复杂的HTML5/CSS3技术,但是创意的确不错. 在线演示 源码下载 ...

  9. 纯CSS3实现的一些酷炫效果

    之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...

随机推荐

  1. PHP实现 bitmap 位图排序 求交集

    2014年12月16日 17:15:09 初始化一串全为0的二进制; 现有一串无序的整数数组; 如果整数x在这个整数数组当中,就将二进制串的第x位置为1; 然后顺序读取这个二进制串,并将为1的位转换成 ...

  2. codeforces 467C.George and Job 解题报告

    题目链接:http://codeforces.com/problemset/problem/467/C 题目意思:给出一条含有 n 个数的序列,需要从中找出 k 对,每对长度为 m 的子序列,使得 找 ...

  3. Jpush推送模块

      此文章已于 14:17:10 2015/3/24 重新发布到 鲸歌 Jpush推送模块     或以上版本的手机系统. SDK集成步骤 .导入 SDK 开发包到你自己的应用程序项目 •    解压 ...

  4. Android仿微信界面

    效果图 原理介绍 1.先绘制一个颜色(例如:粉红) 2.设置Mode=DST_IN 3.绘制我们这个可爱的小机器人 回答我,显示什么,是不是显示交集,交集是什么?交集是我们的小机器人的非透明区域,也就 ...

  5. context switches per second 上下文切换

    上下文切换对系统来说意味着消耗大量的CPU时间.上下文切换只发生在内核态中.内核态是CPU的一种有特权的模式,在这种模式下只有内核运行并且可以访问所有内存和其它系统资源.

  6. java基础知识回顾之java Thread类学习（十二）-- 线程中断

    官方文档翻译: 如果本线程是处于阻塞状态:调用线程的wait(), wait(long)或wait(long, int)会让它进入等待(阻塞)状态,或者调用线程的join(), join(long), ...

  7. hdu 4833 离散化+dp ****

    先离散化,然后逆着dp,求出每个点能取到的最大利益,然后看有没有钱,有钱就投 想法好复杂 #include <stdio.h> #include <string.h> #inc ...

  8. 【POI xlsx】使用POI对xlsx的单元格样式进行设置 / 使用POI对xlsx的字体进行设置

    涉及到的样式都在代码中有说明: package com.it.poiTest; import java.io.FileNotFoundException; import java.io.FileOut ...

  9. WPF MVVM模式下的无阻塞刷新探讨

    很多时候我们需要做一个工作,在一个方法体里面,读取大数据绑定到UI界面,由于长时间的读取,读取独占了线程域,导致界面一直处于假死状态.例如,当应用程序开始读取Web资源时,读取的时效是由网络链路的速度 ...

  10. stack+DFS ZOJ 1004 Anagrams by Stack

    题目传送门 /* stack 容器的应用: 要求字典序升序输出,所以先搜索入栈的 然后逐个判断是否满足答案,若不满足,回溯继续搜索,输出所有符合的结果 */ #include <cstdio&g ...