html轮播台袋效果,css3百叶窗轮播图效果

标题

#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;/*隐藏*/}

1

2

3

4

效果图：

CSS3实现轮播图效果

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

CSS3实现轮播图效果2

先前用CSS3做了一个一张图片实现的轮播,但是这样的图片很难找,于是又改进了一下. HTML:

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

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

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

  1.js实现轮播图效果

  纯CSS3实现轮播图

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

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

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

  css3实现轮播图

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

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

  html 页面

  JavaScript实现轮播图效果

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

  随机推荐

  (iOS)Storyboard/xib小技巧

  1.选择被view覆盖住的view 当你想直接在view中选择自己想要的元素时,但是又碍于一个view上叠加的元素太多很难直接选中,那么在这时,你同时按住键盘上的shift和 control键,然后在 ...

  django的models模型类的常用数据类型和选项

  django框架的models模块ORM框架,能够让我们通过编写类的方式,帮助我们自动生成数据库表. 生成的数据库表名为 应用模块名称_类名 数据库表中字段名 如果我们没有在参数中指定,就是我们写的类 ...

  Centos常用命令之：搜索

  在linux中,所有的文件都是以目录树的形式存在的.而每个发行版的文件存放之间又会有些差别. 这时候,如果我们想看某个命令或者文档的时候就必须先通过某种方式找到改文档的所在位置. 在linux中提供了 ...

  activeMQ 持久化配置

  Mac 中安装activeMQ brew install activemq 启动 activemq start 控制台:在浏览器中输入url: http://localhost:8161/ A:持久化 ...

  网络配置br0 brtcl

  1.brctl addbr br0        如果根据第3步,那这里不用写 2.brctl addif br0 eth0    如果第3步写了,这里也不用 这时候用ssh应该会断网... 3.设置 ...

  CodeForces 632E Thief in a Shop

  题意:给你n种物品,每种无限个,问恰好取k个物品能组成哪些重量.n<=1000,k<=1000,每种物品的重量<=1000. 我们搞出选取一种物品时的生成函数,那么只要对这个生成函数 ...

  centos6&period;9下php7安装zip扩展

  cd /usr/local/src wget http://pecl.php.net/get/zip-1.13.5.tgz tar -zxvf zip-1.13.5.tgz cd zip-1.13.5 ...

  HTML 5新元素和CSS

  Html5 新元素 多媒体元素 video/audio: 格式例子: 属性: canvas元素 Canvas标签定义图形,用于图形的绘制,使用    js来绘图 拖放drag和drop 拖放是一种常见 ...