html slider图片,纯CSS的Slider
Step1:图片定位
HTML Markup
CSS Style
.slider-container {
position: absolute;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.slider {
position: absolute;
width: 100%;
height: 100%;
background: no-repeat 50% 50%;
background-size: cover;
opacity: 1;
filter: alpha(opacity=100);
z-index: -100;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
**Step 2: 确认轮播效果的时间轴 **
先决定前后两张图片重叠时间,每张图片播放时间,完成一个周期需要多少时间
time-line.JPG
由上图我们我们总共播放6张图片,过场时间为1s,每张图片播放时间为3s,一个完整的周期为24s,因为在@keyframes的时间是以百分比来表示,所以要先把s换算成百分比。
100% / 24秒 = 4.17% ( 每秒)
CSS3 Keyframes Animation
.slider{
-webkit-animation: zoomout 24s linear infinite;
animation: zoomout 24s linear infinite;
}
@keyframes zoomout {
/* 0 - 1秒 淡入*/
0% {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale(1.2);
transform: scale(1.2);
z-index: 100;
}
16.68% {
/* 1-4s是播放时间 */
filter: alpha(opacity=100);
opacity: 1;
}
17.72% {
/* 4-5秒之间淡出4.25s*/
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
z-index: -100;
}
}
@-webkit-keyframes zoomout {
0% {
/* 0 - 1秒 淡入*/
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale(1.2);
transform: scale(1.2);
z-index: 100;
}
16.68% {
/* 1-4s是播放时间 */
filter: alpha(opacity=100);
opacity: 1;
}
17.72% {
/* 4-5秒之间淡出4.25s*/
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
z-index: -100;
}
}
每张图片进场时间间隔4s
.slider:nth-child(1) {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.slider:nth-child(2) {
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
.slider:nth-child(3) {
-webkit-animation-delay: 8s;
animation-delay: 8s;
}
.slider:nth-child(4) {
-webkit-animation-delay: 12s;
animation-delay: 12s;
}
.slider:nth-child(5) {
-webkit-animation-delay: 16s;
animation-delay: 16s;
}
.slider:nth-child(6) {
-webkit-animation-delay: 20s;
animation-delay: 20s;
}
如果新增图片,请修改 animation-duration=每张时间X张数(4s*6张)
并重新换算1s的百分比值 100%/24s=4.17%(每秒)
html slider图片,纯CSS的Slider相关推荐
- css 加载图片,纯CSS图片预加载
译自:[Creating a CSS Image Preloader](http://www.devirtuoso.com/2009/07/creating-a-css-image-preloader ...
- 无图片纯css实现中国象棋棋子
纯当锻炼前端编程能力了,效果还不错.纯用css不用图片的好处就是加载迅速.代码如下: <!doctype html> <head> <style> .pieces{ ...
- c语言实现图片轮播,纯css实现轮播图
轮播图的实现原理其实是比较简单的 举个例子 main的宽度是100px div-main的宽度是500px 我们用js控制div-main往左或往右移动,这样就实现了轮播,简单把 好了,先介绍个 cs ...
- html给radio添加图片,使用纯CSS自定义radio(单选框)和checkbox(多选框)的样式
radio和checkbox由于不同的浏览器显示的样式不一致,因此我们需要自定义radio(单选框)和checkbox(多选框)的样式.基本原理就是贱radio和checkbox的自定义样式设置成图片 ...
- 纯CSS图片缩放后显示详细信息
哎~!突然好久没更新博客了,最近总在下雨,晚上也经常没有时间来管理博客(目前在敲自己的一个平台,晢时还在写逻辑层的代码),好吧!废话不多说了,言归正传. 现在很多图片缩放的特效大多数都是用javasc ...
- CSS3实战开发: 纯CSS实现图片过滤分类显示特效
CSS3实战开发: 纯CSS实现图片过滤分类显示特效 原文:CSS3实战开发: 纯CSS实现图片过滤分类显示特效 各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大 ...
- 纯CSS将图片转换成黑白
纯CSS将图片转换成黑白 几行代码就可以实现!效果非常好! 1. 正常效果截图 鼠标悬停前后,分别示下: 2. 非正常效果截图:代码设置的不同,显示的效果不同! 比如:下面的设置导致图片效果不好! 参 ...
- 纯css实现给图片加标签
纯css实现给图片加标签 原理:通过border.before.after.content.position定位,等等属性实现给图片添加标签样式. 效果截图如下: 代码实例: <!DOCTYPE ...
- 纯CSS实现非常好看的图片轮播演示
简介: 这是一款使用纯 CSS 实现的非常好看的图片轮播/幻灯片,切换方式为淡入淡出 网盘下载地址: http://kekewangLuo.cc/5ZtqYb6bqd60 图片:
最新文章
- 第 4 章 Hypertable
- 《spring揭秘》读书笔记三
- 迅雷的user-agent
- SAP中创建分部机构凭证号码并且按年度编号
- sublime-text-3设置输入中文方法
- 内存中发堆和栈,栈是运行时的单位,而堆是存储的单位
- 学习Spring-Cloud –基础结构和配置
- python源码笔记_python源码学习笔记(二)
- mysql不能存字母,使用不常見的字母/符號時,MySql數據庫不能正確存儲數據
- 打开Android Studio报错required plugin “Android Support” is disabled
- lua定时器与定时任务的接口设计
- IntelliJ IDEA 代码格式化,快捷键
- mysql返回上一层_mysql常用命令大全
- 博客迁移说明 : )
- IBM服务器raid5崩溃数据恢复方法
- SQL窗口函数OVER用法整理
- 程序人生——苏嵌第六天
- QT打印打印excel
- Java的Socket网络编程
- 小说文学行业之“盛大文学”