图片轮播html实现原理,纯CSS实现图片轮播
原文:http://www.aichengxu.com/view/4182590
关键点:利用keyframes 原理:infinite
注意点:在处理关键帧动画的时候,注意处理好 总共花费的 animation-duration:time 与每帧延延迟的时间的交错;要让动画显得层次感,处理好 每帧的延迟时间;
多注意时间的穿插 ;效果更很好;下面只是我的小插图;画的不一定对;
以下是我的代码;有兴趣拷贝来看看,仅作为我的练习记录;关键帧要兼容其他浏览器,自行补充前缀即可;
纯css轮播图
*{ margin:0 ; padding:0}
ul,li{ list-style:none; margin:0; padding:0;}
.box,
.box:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.box:after {
content: '';
background: transparent url(../images/pattern.png) repeat top left;
}
.box li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background-size: cover;
background-position: 50% 50%;
background-repeat: none; background-color:#333;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 18s linear infinite 0s;
-moz-animation: imageAnimation 18s linear infinite 0s;
-o-animation: imageAnimation 18s linear infinite 0s;
-ms-animation: imageAnimation 18s linear infinite 0s;
animation: imageAnimation 18s linear infinite 0s;
}
.box li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: center;
opacity: 0;
-webkit-animation: titleAnimation 18s linear infinite 0s;
-moz-animation: titleAnimation 18s linear infinite 0s;
-o-animation: titleAnimation 18s linear infinite 0s;
-ms-animation: titleAnimation 18s linear infinite 0s;
animation: titleAnimation 18s linear infinite 0s;
}
.box li div h3 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 160px;
padding: 0 30px;
line-height: 120px;
color: rgba(255,255,255,0.8);
}
.box li:nth-child(1) span { background-image: url(../images/love5.jpg) }
.box li:nth-child(2) span {
background-image: url(../images/love3.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.box li:nth-child(3) span {
background-image: url(../images/love1.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.box li:nth-child(2) div {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.box li:nth-child(3) div {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
@-webkit-keyframes imageAnimation {
0% {
opacity: 0;
-webkit-animation-timing-function: ease-in;
}
11% {
opacity: 1;
-webkit-transform: scale(1.05);
-webkit-animation-timing-function: ease-out;
}
30% {
opacity: 1;
-webkit-transform: scale(1.1);
}
35% {
opacity: 0;
-webkit-transform: scale(1.1) translateY(-20%);
}
49% {
opacity: 0;
-webkit-transform: scale(1.1) translateY(-60%);
}
100% { opacity: 0 ; -webkit-transform: scale(1.1) translateY(-100%);}
}
@-moz-keyframes imageAnimation {
0% {
opacity: 0;
-moz-animation-timing-function: ease-in;
}
11% {
opacity: 1;
-moz-transform: scale(1.05);
-moz-animation-timing-function: ease-out;
}
30% {
opacity: 1;
-moz-transform: scale(1.1);
}
35% {
opacity: 0;
-moz-transform: scale(1.1) translateY(-20%);
}
49% {
opacity: 0;
-moz-transform: scale(1.1) translateY(-60%);
}
100% { opacity: 0 ; -moz-transform: scale(1.1) translateY(-100%);}
}
@keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
11% {
opacity: 1;
transform: scale(1.05);
animation-timing-function: ease-out;
}
30% {
opacity: 1;
transform: scale(1.1);
}
35% {
opacity: 0;
transform: scale(1.1) translateY(-20%);
}
49% {
opacity: 0;
transform: scale(1.1) translateY(-60%);
}
100% { opacity: 0 ; transform: scale(1.1) translateY(-100%);}
}
@-webkit-keyframes titleAnimation {
0% {
opacity: 0;
-webkit-transform: translateY(-300%);
}
8% {
opacity: 1;
-webkit-transform: translateY(0%);
}
22% {
opacity: 1;
-webkit-transform: translateY(0%);
}
28% {
opacity: 0;
-webkit-transform: translateY(100%);
}
35% { opacity: 0 }
100% { opacity: 0 }
}
@-moz-keyframes titleAnimation {
0% {
opacity: 0;
-moz-transform: translateY(-300%);
}
8% {
opacity: 1;
-moz-transform: translateY(0%);
}
22% {
opacity: 1;
-moz-transform: translateY(0%);
}
28% {
opacity: 0;
-moz-transform: translateY(100%);
}
35% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes titleAnimation {
0% {
opacity: 0;
transform: translateY(-300%);
}
8% {
opacity: 1;
transform: translateY(0%);
}
22% {
opacity: 1;
transform: translateY(0%);
}
28% {
opacity: 0;
transform: translateY(100%);
}
35% { opacity: 0 }
100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .box li span{
opacity: 1;
}
- Image 01
第1张
- Image 02
第2张
- Image 03
第3张
其他:
1,相同参数的可以写在一起;
2,可以只有to, 也可以只有类似50% 省略0%和100%;因为后面的会重置前面的样式;
图片轮播html实现原理,纯CSS实现图片轮播相关推荐
- android 缩进轮播图,如何利用纯css实现图片轮播
实现思路: (推荐学习:css快速入门) 准备相同大小的多个图片 将要展示图片横排放在一个图片容器里面 在图片容器外再加一个展示容器,展示容器大小为图片大小 给图片容器添加自定义动画,在动画不同阶段设 ...
- CSS3实战开发: 纯CSS实现图片过滤分类显示特效
CSS3实战开发: 纯CSS实现图片过滤分类显示特效 原文:CSS3实战开发: 纯CSS实现图片过滤分类显示特效 各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大 ...
- 纯CSS将图片转换成黑白
纯CSS将图片转换成黑白 几行代码就可以实现!效果非常好! 1. 正常效果截图 鼠标悬停前后,分别示下: 2. 非正常效果截图:代码设置的不同,显示的效果不同! 比如:下面的设置导致图片效果不好! 参 ...
- 纯CSS实现图片动画
纯CSS实现图片动画 1.先网上下载一张sprites动画图片,直接百度搜sprites图片就可. 2.用css设置一个关键帧,确定好起始位置和终止位置, 通过background-position调 ...
- 如何用纯CSS将图片填满div,自适应容器大小
如何用纯CSS将图片填满div,自适应容器大小 2016-10-11 13:33 网页设计 标签:css 代码 5987 3 我有一个模板,想按常规做一个div里面放置一个img图 ...
- 纯css实现图片自动闪光划过效果
纯css实现图片自动闪光划过效果 <!DOCTYPE html> <html> <head> <meta name="viewport" ...
- 纯CSS翻牌图片特效
使用图片 <!doctype html> <html> <head> <meta charset="utf-8"> <titl ...
- html中轮播图跳转,纯 CSS 实现轮播图
大家好,我是 Steven. 今集我们会尝试只用 HTML 和 CSS,实现基础的轮播图效果,当然会有一些功能的缺失,例如不能自动跳转,但我们来看看用 CSS 可以实现到多少. HTML 的部分 打开 ...
- 纯CSS实现图片百叶窗展示效果
纯CSS图片百叶窗 首先给大家看一下完成效果 主要思路:其实这个百叶窗还是利用了一种障眼法,我们看上去是鼠标移动上去之后,图片展开了,其实这些图片在原地根本没有动,只不过是我们把这些图片放在了一个列表 ...
最新文章
- Caffe: LMDB 及其数据转换
- CSS中Float概念相关文章
- 【错误记录】VMware 虚拟机报错 ( 向 VMWare 虚拟机中的 Ubuntu 系统拷贝文件时磁盘空间不足 )
- 【概率论】1-4:事件的的并集(Union of Events and Statical Swindles)
- auto-sklearn手册
- 8.3 直接插入排序
- linux ora 01092,ORA-01173的模拟与故障处理
- pipeline python,Python-什么是sklearn.pipeline.Pipeline?
- ROS 学习笔记(一):工作空间+功能包创建
- 华为手机如何升级鸿蒙系统_再见了安卓!华为鸿蒙系统正式上线:这几款手机可先升级...
- 解码(一):AVCodecContext解码上下文初始化讲解
- 位于 mscorlib.dll 中_带电粒子在匀强磁场中运动问题的四种类型
- 用博文中的方法-r -d \t试了下conlleval测试crf++的输出
- Android开发笔记(一百三十九)可定制可滑动的标签栏
- 为什么要使用git pull --rebase?
- 对还剩20天的FPGA大赛规划
- 【转】查看linux服务器的系统信息
- easyui ---- jEasyUI-定制提示信息面板组件
- Gradle基础介绍
- Viewflipper
热门文章
- Day01 你如何保持健康
- 微信在诺基亚手机登录服务器繁忙,马化腾正式宣布:禁止在该手机上登录QQ和微信?网友:诺基亚再见...
- jdbc获取mysql 列信息_JDBC获取数据库信息:获取表中各列的信息
- awd的批量脚本 pwn_AWD攻防之web入门篇
- php smtp 超时,SMTP错误:无法连接到服务器:连接超时(110)与PHPMailer和Outlook SMTP
- SpringBoot中在普通类里面加载Spring容器中的类
- antdesign的input增加自定义校验规则
- matlab字符衔接,matlab字符串连接(多个字符串)的经验,matlab字符串
- 刨根问底:C++中宽字符类型(wchar_t)的编码一定是Unicode?长度一定是16位?
- matlab运行容量小,可变大小(运行时)输入Simulink Matlab