HTML+CSS实现一个淡显淡隐轮播图
目录
效果展示
主要思路及一点说明
代码:
效果展示
淡显淡隐背景轮播图
主要思路及一点说明
这里我定义了一个动画 slowly-show 来完成主要的功能。五张图片轮播,一个周期设置为25秒,则每张图片在一个周期中展现的时间有5秒。
主要的思想是:各个图片依次显现,下一张图片开始显现时,当前的图片开始淡出。淡出时需要细心处理 opacity 和 z-index 。第一张图片默认一开始就要展示了,层级自然是最高的,这里给他 z-index = 5,再从 opacity = 0 开始, 在一个比较短的时间内(尽可能多地小于 5s,这里为0%~5%,即0.05 * 25 = 1.25s)到达 opacity = 1。因为每一张的图片在一个周期内展示的时间为5s,下一个图片的动画需要延迟 5s ,即要等本周期内 排在前面的所有图片都展示完了,再开始。第三张图片的动画则需要延迟10s,以此类推。等一段时间过后,当前的图片开始淡出,先是要降低 opacity 的值,此时 z-index 还不能这么快改变,因为下一张图片在开始时的层次为 5 ,opacity 从 0 到 1 淡显,确保下一张即将要展示的图片的层级和当前已完成展示即将退出的图片的层级相同,这样根据两张图片的透明度的变化,一个变透明,一个变清晰,如此两张图片在切换的时候才有一个交汇的过程,这样的 ‘过渡’ 效果才不会这么突兀。往后的切换大致也是如此了。
在该动画中,0%~5% 是图片显现期,5%~20% 是图片的完全展示期,20%~25% 是当前图片淡出,下一张图片显现的交汇期,25%~100% 是该图片等待下一个轮播周期的时间。
没有添加事件之类的来手动控制切换,不过可以用作页面的全屏轮播背景。
代码:
html:
<body><div class="outest"> <img class="img-1" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg31.51tietu.net%2Fpic%2F2016-121012%2F20161210124512g03ealme4ja1402.jpg&refer=http%3A%2F%2Fimg31.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670064258&t=1e9907edc0e865d925c65c3e70459375"><img class="img-2" src="https://img2.baidu.com/it/u=477419428,1990338264&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800"><img class="img-3" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fuploadfile.bizhizu.cn%2Fup%2Fae%2F13%2F1d%2Fae131dddc61533a0116bd3b411226190.jpg.source.jpg&refer=http%3A%2F%2Fuploadfile.bizhizu.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670064258&t=606abdf4fb3259de5056d1b02a62105d"><img class="img-4" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.51tietu.net%2Fpic%2F2019-090922%2Fozgtdpuqr1iozgtdpuqr1i.jpg&refer=http%3A%2F%2Fimg9.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670064258&t=a873a24385bad6ca2b7b96cbdd4d2fe6"><img class="img-5" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2%2F533e6929e5014.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670064258&t=0b5cd61eae2c76104de6b085540ff3d3"></div>
</body>
css:
<style type="text/css">body,html{width: 100vw;height: 100vh;box-sizing: border-box;padding: 0;margin: 0;overflow: hidden;}.outest{width: 100vw;height: 100vh;position: relation;}img{position: absolute;top: 0;left: 0;width: 100vw;height: 100vh;object-fit: cover;}.img-1{animation: slowly-show 25s linear 0s infinite both;}.img-2{animation: slowly-show 25s linear 5s infinite both;}.img-3{animation: slowly-show 25s linear 10s infinite both;}.img-4{animation: slowly-show 25s linear 15s infinite both;}.img-5{animation: slowly-show 25s linear 20s infinite both;}@keyframes slowly-show {0%{opacity: 0;z-index: 5;}5%,20%{opacity: 1;z-index: 5;}25%{opacity: 0;z-index: 5;}100%{opacity: 0;z-index: 1;}}</style>
HTML+CSS实现一个淡显淡隐轮播图相关推荐
- 一个功能较全的轮播图插件(含详细介绍)
今天给大家分享一个功能较全的轮播图插件,废话不多说,直接上插件 ;(function($){"use strict";$.fn.extend({banner:function(op ...
- 使用CSS实现简单的图片切换(轮播图)
使用CSS实现简单的图片切换(轮播图) 预览图如下: 目录 使用CSS实现简单的图片切换(轮播图) 一:首先创建基本布局 1:创建一个div容器 ,里面的ul与ol标签分别对应轮播图片和下方圆点: 二 ...
- 电商html轮播动效,制作一个电商网站的轮播图效果
各位亲爱的伙伴们 大家周末愉快 上次给大家写了 给猫猫制作简单的轮播图 收到了,小伙伴们一致吐槽,娜娜制作出来的这个轮播图不能动呀~.好吧说实话,那个本来就动不了.但是伙伴们的建议,我都收到了,那么今 ...
- 做一个前端网页送给女朋友~轮播图+纪念日
文章目录 1. 轮播图框架 2. 轮播图大盒子实现 1. 盒子及图片的可视化 2. 将图片重叠起来并放入轮播图盒子中 ...相对定位与绝对定位 3. 添加左右按钮 4. 点击按钮跳转图片 5. 鼠标离 ...
- 利用CSS 3 的动画相关属性制作轮播图特效
本示例给出了只利用CSS3的动画属性制作下图所示的轮播图特效的步骤. Step 1:定义用来展示效果的容器div (1)设置其背景色 (2)让其大小与浏览器的比例合适,并且让其水平.垂直居中: 例如: ...
- php图片左右滚动代码怎么写,css图片滚动代码怎么写?轮播图横向滚动展示
在日常工作中网页上的轮播图展示必不可少,那么对于刚入门的小白而言本篇文章关于css图片滚动代码的介绍更是浅显易懂.希望本篇文章对大家有所帮助. css图片滚动代码示例具体如下: css图片滚动代码示例 ...
- echarts formatter_牛X!用 Echarts 打造一个轮播图!
最近,在B站上学习了一些Echarts的使用,分享给大家. 一个动态的柱状轮播图,本想着使用Pyecharts来实现的,奈何实现不了动态. 看来做酷炫的可视化大屏还是得上Echarts和D3. Ech ...
- 原生js+css 实现轮播图 完整代码
利用原生的js实现轮播图,可以添加到自己的UI库中,在以后的项目中对其进行修改然后添加到已有项目中. 先写出css部分和html部分,直接上代码 <!DOCTYPE html> <h ...
- html、css 实现轮播图的静态样式
最终效果:利用html.css实现轮播图(静态的,我只实现轮播图的基本样式) 一:选取四张图片作为轮播图的素材: html: <div class="banner">& ...
最新文章
- 服务器自动安全审计,用于Linux服务器的自动安全审计工具
- 神经网络不可思议的声誉
- 寄生式创业更容易成功
- OpenCV3学习(11.8) FREAK描述符提取器
- jsp水果商城系统毕业设计网站成品论文
- Spring BeanFactory、ApplicationContext IOC 容器获取与使用
- 坚果云 linux 脚本,深度操作系统Deepin安装坚果云
- 使用Linux快速使用redis集群
- ofo给还在路上垂死挣扎的战友们留下什么启示?
- SPSS、 Mplus下载安装包
- 雅虎十四条性能优化原则
- Android Studio的适配器Adapter以及Adapterview的使用
- java音频下载_java 实现网易云音乐下载和播放
- flash用FlashPlayer将一个swf打包成exe
- matlab ones size,matlab中zeros 和 ones 这两个函数的用法以及size的用法,princomp,pcacov,pcares,barttest四大分析函数用法...
- ESP8266+blinker测温湿度
- 【山大会议】注册页的编写
- 源码分析RocketMQ顺序消息消费实现原理
- Android震动和自定义铃声
- android实现新闻内容显示功能,Android开发实现自定义新闻加载页面功能实例