css3百叶窗轮播图效果
<!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百叶窗轮播图效果的更多相关文章
- CSS3实现轮播图效果
CSS3实现轮播图主要是由css:background-position和css3:animation实现.且实现此轮播需要一张四个图横着相连的图片. 注(Internet Explorer 10.F ...
- CSS3实现轮播图效果2
先前用CSS3做了一个一张图片实现的轮播,但是这样的图片很难找,于是又改进了一下. HTML: <div class="box"> <ul> <li& ...
- 纯CSS实现轮播图效果,你不知道的CSS3黑科技
前言 轮播图已经是一个很常见的东西,尤其是在各大App的首页顶部栏,经常会轮番显示不同的图片. 一提到轮播图如何实现时,很多人的第一反应就是使用Javascript的定时器,当然这种方法是可以实现的. ...
- js实现轮播图效果(附源码)--原生js的应用
1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
- 纯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 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...
- JavaScript实现轮播图效果
我又来了,同志们.老想你们了 捕获小可爱一枚. 下面进入正题:用JavaScript原生代码写轮播图效果. 具体效果就不多说了,网站上面的轮播效果我们都知晓.下面是展示代码 html代码: <d ...
随机推荐
- 【转】G40-70、G50-70联想小新笔记本SR1000随机Linux改Windows 7系统操作指导
http://support1.lenovo.com.cn/lenovo/wsi/htmls/detail_20140505150749705.html 适用范围:G40-70,G50-70联想小新笔 ...
- c# 请问如何将四个RadioButton分成两组?
WinForm 只要放在同一个容器中的RadioButton 就自动互斥 创建两个panel容器,分别放两个RadioButton 就是两组了
- Android的配置界面PreferenceActivity
我想大家对于android的系统配置界面应该不会陌生吧,即便陌生,那么下面的界面应该似曾相识吧,假若还是不认识,那么也没有关系,我们这一节主要就是介绍并讲解android 中系统配置界面的使用,相信大 ...
- 深入理解iframe
本文并不是一篇iframe API文档讲解,因此想了解iframe API的同学请移步 MDN, 我将在现在浏览器的角度与大家取探讨iframe, 因此,本文中虽然会提及一些iframe在旧浏览器中的 ...
- WPF仿微软事件和属性窗体,效果更炫!
先看效果图:包含系统颜色.系统字体.支持自定义编辑窗体.集合绑定.提供多类型支持. 这是国外网站上无意中看到的,修改了下 感觉还不错!接下来大概介绍下 经过修修改改只留下了有用的主要部分: 前两项 ...
- Response乱码的解决方法
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletExcept ...
- Android开发之使用意图
意图的用途一般是连接活动,传递数据,从意图返回数据等,下面的例子就是利用意图来交互MainActivity和SecondActivity这两个活动. 效果图如下: 实现代码如下: MainActivi ...
- Ubuntu 13.10 Rhythmbox 播放器不能播放MP3。安装插件
Ctrl+Alt+T > sudo apt-get install ubuntu-restricted-extras 因为版权和专利的问题,MP3等一些non-free的格式文件支持没有出现在免 ...
- C#实现动态网站伪静态,使seo更友好
本教程将使用Visual Studio 2013手把手教你实现webform动态页面的伪静态.本教程配套的C#源码工程可通过我的github下载.地址:https://github.com/shell ...
- IIS配置不正确可能导致“远程服务器返回错误: (404) 未找到"错误一例。
今天上传附件出现了下图所示的问题: 查找百度发现http://www.cnblogs.com/chuncn/archive/2009/09/08/1562759.html 文中提的比较靠谱. 但是,设 ...