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进度条模拟了真实的图片加载场景,插件会默认去从服务器下载几张比较大的图片,然后让该进度条展现当前读取图片的进度 ...
随机推荐
- Java面试基础知识(2)
1.一个".java"源文件中是否可以包括多个类(不是内部类)?有什么限制? 可以有多个类,但只能有一个public的类,并且public的类名必须与文件名相一致. 2.说说& ...
- check-versions.js和dev-client.js
// 用于在控制台输出带颜色字体的插件var chalk = require('chalk') // 语义化版本检查插件(The semantic version parser used by npm ...
- select into tb_temp2 from tb_temp1 创建临时表实现上一个、下一个功能，使用完毕就删除临时表
好久没有写过Sql了,今天遇到一个问题,业务逻辑是: 一个商品可以属于多个分类,在显示商品详情的时候,要求可以点击“上一个”,“下一个” 查看和该商品在同一个分类下的其他商品,商品具有排序号. 这样我 ...
- 当前上下文中不存在viewbag
参考链接:http://www.cnblogs.com/chas/p/5076297.html view文件夹下的web.config中的appsetting节点中缺少了 <add key=&q ...
- python 之 基础
变量 变量的作用: 标识符的命名规范: 掌握常量与变n量的区别: 变量定义规范: 声明变量: name='Alex Li' 三部分:变量名 赋值运算符 变量值 变量定义规则:1.变量名只能是字母.数字 ...
- 10.22JS日记
1.js数据类型分析 (1)基础类型:string.number.boolean.null.undefined (2)引用类型:object-->json.array... 2.点运算 xxx ...
- LibreOJ #6000. 「网络流 24 题」搭配飞行员 最大匹配
#6000. 「网络流 24 题」搭配飞行员 内存限制:256 MiB时间限制:1000 ms标准输入输出 题目类型:传统评测方式:文本比较 上传者: 匿名 提交提交记录统计讨论测试数据 题目描述 ...
- kafka配置简要描述
配置文件在config/server.properties 下面的一些配置可能是你需要进行修改的. 这里为官方提供配置文件解释:https://kafka.apache.org/08/configur ...
- Eclipse设置jre版本 或者 jdk
设置Eclipse默认的 JRE 版本 Eclipse 配置 JDK 的方法和配置 JRE 相同 windows --> Preferences --> Java --> 完成后查看 ...
- windows一键配置 php mysql apache 记录
记录下 方便查找(最近机器老重装 资料丢失严重) wamp http://www.wampserver.com/en/#download-wrapper https://sourceforge.net ...