css3实现切片动画

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纯CSS3实现图文切换特效 - 何问起</title>
<base target="_blank" />
<link rel="stylesheet" href="http://hovertree.com/texiao/css3/39/themes/csslider.default.css" />
<style>
* {
margin: 0;
padding: 0;
}

::-webkit-scrollbar {
width: 2px;
background: rgba(255, 255, 255, 0.1);
}

::-webkit-scrollbar-track {
background: none;
}

::-webkit-scrollbar-thumb {
background: rgba(74, 168, 0, 0.6);
}

ul,
ol {
padding-left: 40px;
}

html,
body {
height: 100%;
text-align: center;
font: 400 100% 'Raleway', 'Lato';
background-color: #282828;
color: #CCC;
}

h1 {
font-weight: 700;
font-size: 310%;
}

h2 {
font-weight: 400;
font-size: 120%;
color: #71AD37;
}

#hewenqislider {
margin: 20px;
font-family: 'Lato';
}

#hewenqislider> ul> li:nth-of-type(3) {
background: url(http://hovertree.com/texiao/css3/39/themes/fruit.jpg);
}

#hewenqislider> input:nth-of-type(3):checked~ ul #hovertreebg {
width: 80%;
padding: 22px;
-moz-transition: .5s .5s;
-o-transition: .5s .5s;
-webkit-transition: .5s .5s;
transition: .5s .5s;
}

#hewenqislider> input:nth-of-type(3):checked~ ul #hovertreebg div {
-moz-transform: translate(0);
-ms-transform: translate(0);
-o-transform: translate(0);
-webkit-transform: translate(0);
transform: translate(0);
-moz-transition: .5s .9s;
-o-transition: .5s .9s;
-webkit-transition: .5s .9s;
transition: .5s .9s;
}

#hovertreebg {
color: #000;
padding: 22px 0;
position: absolute;
left: 0;
top: 16%;
height: 20%;
width: 0;
z-index: 10;
overflow: hidden;
}

#hovertreebg:before {
content: '';
position: absolute;
left: -1px;
top: 1px;
height: 100%;
width: 100%;
z-index: -1;
background: url(http://hovertree.com/texiao/css3/39/themes/fruit.jpg) 1px 23%;
-webkit-filter: blur(7px);
}

#hovertreebg:after {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: 20;
background: rgba(0, 0, 0, 0.35);
pointer-events: none;
}

#hovertreebg div {
-moz-transform: translate(120%);
-ms-transform: translate(120%);
-o-transform: translate(120%);
-webkit-transform: translate(120%);
transform: translate(120%);
}

.scrollable p {
padding: 30px;
text-align: justify;
line-height: 140%;
font-size: 120%;
}

#hewenqislider a {
color: greenyellow
}

.csslider>ul {
width: 500px;
/*在这里改变宽度何问起*/
}
</style>
</head>

<body>

<div style="padding: 1em 0;">
<div id="hewenqislider" class="csslider">
<input type="radio" name="slides" id="slides_1" />
<input type="radio" name="slides" id="slides_2" />
<input type="radio" name="slides" id="slides_3" checked />
<input type="radio" name="slides" id="slides_4" />
<ul>
<li>
<h1>欢迎光临何问起</h1>
<p>CSSlider is lightweight & easy to use slider. No JS - pure CSS.
<br />这是一个使用纯CSS3实现的图文切换效果，没使用js脚本。点击左右箭头或者索圆点引按钮可以切换内容。
<br /> by
<a href="http://hovertree.com">何问起</a>
<a href="http://hovertree.com/h/bjaf/3ciuqvoq.htm">说明</a>
</p>
</li>
<li>
<a href="http://hovertree.com/texiao/"><img src="http://hovertree.com/texiao/css3/39/themes/stones.jpg" /></a>
</li>
<li>
<div id="hovertreebg">
<div>
<h1>CSS Events</h1>
<p>When slide 3 is reached - play CSS animation! 纯CSS3的图文切换 hovertree.com </p>
</div>
</div>
</li>
<li class="scrollable">
<h1>Lots of text</h1>
<h2>Scrollable one</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada mi, semper id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus. 还可以有长文本，会显示滚动条。这是一个使用纯CSS3实现的图文切换效果，没使用js脚本。点击左右箭头或者索圆点引按钮可以切换内容。by 何问起。还可以有长文本，会显示滚动条。这是一个使用纯CSS3实现的图文切换效果，没使用js脚本。点击左右箭头或者索圆点引按钮可以切换内容。by 何问起。还可以有长文本，会显示滚动条。这是一个使用纯CSS3实现的图文切换效果，没使用js脚本。点击左右箭头或者索圆点引按钮可以切换内容。by 何问起。还可以有长文本，会显示滚动条。这是一个使用纯CSS3实现的图文切换效果，没使用js脚本。点击左右箭头或者索圆点引按钮可以切换内容。by 何问起。

</p>
</li>
</ul>
<div class="arrows">
<label for="slides_1"></label>
<label for="slides_2"></label>
<label for="slides_3"></label>
<label for="slides_4"></label>
</div>
<div class="navigation">
<div>
<label for="slides_1"></label>
<label for="slides_2"></label>
<label for="slides_3"></label>
<label for="slides_4"></label>
</div>
</div>
</div>
</div>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：
<a href="http://hovertree.com/" target="_blank">何问起</a>
</p>
</div>
</body>

</html>

css3实现切片动画的更多相关文章

css3制作旋转动画
现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片思路:1.制作之前呢,我们先来 ...
CSS3中的动画效果记录
今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...
CSS3的自定义动画帧
CSS3新增的动画帧非常绚丽,可以简单实现一些动画效果,目前除IE外各大主流浏览器都支持本文演示三个:transform: scale3d(x, y, z)-缩放;.transform: trans ...
CSS3中的动画功能（一）
css3中的动画功能分为transitions功能和animations功能,这两种功能都可以通过改变css属性值来产生动画效果.今天带大家一起来看看css3动画功能中的transitions的用法. ...
3D Grid Effect – 使用 CSS3 制作网格动画效果
今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...
25个CSS3 渐变和动画效果教程
随着最新版CSS3渐变和动画功能发布,Web开发者在开发的过程中有了更多的选择.实际上,已经有了一些替代的技术,目的都是使网站的建设变得简易,高效和快速.不过CSS3所提供的渐变功能有着显著的优点,特 ...
纯css3实现的动画加载条
之前大大家分享了很多款加载条.今天给大家带来一款纯css3实现的动画加载条. 这款加载条适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8 ...
纯css3实现的动画加载特效
之前给大家带了很多款进度加载条,今天再给大家分享一款纯css3实现的动画加载特效.效果图如下: 在线预览源码下载实现的代码. html代码: <div class="wrap& ...
分享9款极具创意的HTML5/CSS3进度条动画
1.HTML5/CSS3图片加载进度条可切换多主题今天要分享的这款HTML5/CSS3进度条模拟了真实的图片加载场景,插件会默认去从服务器下载几张比较大的图片,然后让该进度条展现当前读取图片的进度 ...

随机推荐

SQL Server 通过TSQL(存储过程)用MSXML去调用Webservice
本文为转载:原文地址在SQL SERVER 2008 R2 上亲测可用, 这个存储过程配合SoapUI使用效果更好:参考地址前提设置:http://www.cnblogs.com/chenxizh ...
Windows服务安装、卸载、启动和关闭的管理器
最近在重构公司的系统,把一些需要独立执行.并不需要人为关注的组件转换为Windows服务,Windows服务在使用的过程中有很多好处,相信这一点,就不用我多说了.但是每次都要建立Windows服务项目 ...
（转）Eclipse导入EPF配置文件
为了美化Eclipse大家可以从 http://www.eclipsecolorthemes.org/ 下载EPF配置文件,使用方法如下 (1)从File菜单选择Import (2) 选择Gen ...
iOS.C
iOS开发中C语言的应用: 1. NS_ENUM & NS_OPTIONS http://nshipster.com/ns_enum-ns_options/
mysql使用存储过程,自动生成新的表单
use mydb; delimiter // CREATE procedure create_table(In imax int) BEGIN DECLARE `@i` int(11); D ...
Luogu 4234 最小差值生成树 - LCT 维护链信息
Solution 将边从小到大排序, 添新边$(u, v)$时若$u,v$不连通则直接添, 若连通则把链上最小的边去掉再添边. 若已经加入了 $N - 1$条边则更新答案. Code #incl ...
关于发件人地址会自动增加BATV及prvs的问题处理方法
问题描述: 发现Exchange 2010往外发邮件时,有些用户的发件人地址会自动增加BATV= 及 prvs=绪如,这些的特定字符,变成型如prvs=123456=example@example.c ...
python基础之Day4
流程判断一.if 1.语法一各条件都执行 if条件1: if条件2: if条件3: 2.语法二 if多分支,自上而下执行,一旦满足条件,后面代码即使满足条件也不会执行 if条件1: elif条件2 ...
Delphi,C语言互通脚本引擎研究
基于大神akuma的脚本引擎. 下面是demo
安装php_sqlsrv扩展
https://www.cnblogs.com/wtcl/p/7727636.html

css3实现切片动画

css3实现切片动画的更多相关文章

随机推荐

热门专题