CSS3实现的渐变幻灯片效果


Posted in HTML / CSS onDecember 07, 2020

实现效果

CSS3实现的渐变幻灯片效果

代码

html

<div class="css-slideshow">
	<figure>
		<img src="http://themarklee.com/wp-content/uploads/2013/10/class-header-css3.jpg" alt="class-header-css3" width="495" height="370" class="alignnone size-full wp-image-172" /><figcaption><strong>CSS3:</strong> CSS3 delivers a wide range of stylization and effects, enhancing the web app without sacrificing your semantic structure or performance. Additionally Web Open Font Format (WOFF) provides typographic flexibility and control far beyond anything the web has offered before.</figcaption> 
	</figure>
	<figure>
		<img src="http://themarklee.com/wp-content/uploads/2013/10/class-header-semantics.jpg" alt="class-header-semantics" width="495" height="370" class="alignnone size-full wp-image-179" /><figcaption><strong>Semantics:</strong> Giving meaning to structure, semantics are front and center with HTML5. A richer set of tags, along with RDFa, microdata, and microformats, are enabling a more useful, data driven web for both programs and your users.</figcaption> 
	</figure>
	<figure>
		<img src="http://themarklee.com/wp-content/uploads/2013/10/class-header-offline.jpg" alt="class-header-offline" width="495" height="370" class="alignnone size-large wp-image-178" /><figcaption><strong>Offline & Storage:</strong> Web Apps can start faster and work even if there is no internet connection, thanks to the HTML5 App Cache, as well as the Local Storage, Indexed DB, and the File API specifications.</figcaption> 
	</figure>
	<figure>
		<img src="http://themarklee.com/wp-content/uploads/2013/10/class-header-device.jpg" alt="class-header-device" width="495" height="370" class="alignnone size-full wp-image-177" /><figcaption><strong>Device Access:</strong> Beginning with the Geolocation API, Web Applications can present rich, device-aware features and experiences. Incredible device access innovations are being developed and implemented, from audio/video input access to microphones and cameras, to local data such as contacts & events, and even tilt orientation.</figcaption> 
	</figure>
<figure>
		<img src="http://themarklee.com/wp-content/uploads/2013/10/class-header-connectivity.jpg" alt="class-header-connectivity" width="495" height="370" class="alignnone size-large wp-image-176" /><figcaption><strong>Connectivity:</strong> More efficient connectivity means more real-time chats, faster games, and better communication. Web Sockets and Server-Sent Events are pushing (pun intended) data between client and server more efficiently than ever before.</figcaption> 
	</figure>
	<figure>
		<img src="http://themarklee.com/wp-content/uploads/2013/10/class-header-multimedia.jpg" alt="class-header-multimedia" width="495" height="370" class="alignnone size-large wp-image-175" /><figcaption><strong>Multimedia:</strong> Audio and video are first class citizens in the HTML5 web, living in harmony with your apps and sites. Lights, camera, action!</figcaption> 
	</figure>
	<figure>
		<img src="http://themarklee.com/wp-content/uploads/2013/10/class-header-3d.jpg" alt="class-header-3d" width="495" height="370" class="alignnone size-large wp-image-174" /><figcaption><strong>3D, Graphics & Effects:</strong> Between SVG, Canvas, WebGL, and CSS3 3D features, you're sure to amaze your users with stunning visuals natively rendered in the browser.</figcaption> 
	</figure>
	<figure>
		<img src="http://themarklee.com/wp-content/uploads/2013/10/class-header-performance.jpg" alt="class-header-performance" width="495" height="370" class="alignnone size-large wp-image-173" /><figcaption><strong>Performance & Integration:</strong> Make your Web Apps and dynamic web content faster with a variety of techniques and technologies such as Web Workers and XMLHttpRequest 2. No user should ever wait on your watch.</figcaption> 
	</figure>
  </div>  
<p class="css-slideshow-attr"><a href="http://www.w3.org/html/logo/" target="_top">Images and captions are from the W3C</a></p>

css

body{
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
  font-weight: 300;
}
.css-slideshow{
  position: relative;
  max-width: 495px;
  height: 370px;
  margin: 5em auto .5em auto;
}
.css-slideshow figure{
  margin: 0;
  max-width: 495px;
  height: 370px;
  background: #000;
  position: absolute;
}
.css-slideshow img{
  box-shadow: 0 0 2px #666;
}
.css-slideshow figcaption{
  position: absolute;
  top: 0;
  color: #fff;
  background: rgba(0,0,0, .3);
  font-size: .8em;
  padding: 8px 12px;
  opacity: 0;
  transition: opacity .5s;
}
.css-slideshow:hover figure figcaption{
  transition: opacity .5s;
  opacity: 1;
}
.css-slideshow-attr{
  max-width: 495px;
  text-align: right;
  font-size: .7em;
  font-style: italic;
  margin:0 auto;
}
.css-slideshow-attr a{
  color: #666;
}
.css-slideshow figure{
  opacity:0;
}
figure:nth-child(1) {
  animation: xfade 48s 42s infinite;
}
figure:nth-child(2) {
  animation: xfade 48s 36s infinite;
}
figure:nth-child(3) {
  animation: xfade 48s 30s infinite;
}
figure:nth-child(4) {
  animation: xfade 48s 24s infinite;
}
figure:nth-child(5) {
  animation: xfade 48s 18s infinite;
}
figure:nth-child(6) {
  animation: xfade 48s 12s infinite;
}
figure:nth-child(7) {
  animation: xfade 48s 6s infinite;
}
figure:nth-child(8) {
  animation: xfade 48s 0s infinite;
}

@keyframes xfade{
  0%{
    opacity: 1;
  }
  10.5% {
    opacity: 1;
  }
  12.5%{
    opacity: 0;
  }
  98% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

以上就是CSS3实现的渐变幻灯片效果的详细内容,更多关于CSS3渐变幻灯片的资料请关注三水点靠木其它相关文章!

HTML / CSS 相关文章推荐
利用CSS3的定位页面元素
Aug 29 HTML / CSS
IE浏览器单独写CSS样式的几种方法
Oct 14 HTML / CSS
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
Sep 15 HTML / CSS
CSS3 不定高宽垂直水平居中的几种方式
Mar 26 HTML / CSS
程序设计HTML5 Canvas API
Apr 08 HTML / CSS
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
Mar 27 HTML / CSS
H5新属性audio音频和video视频的控制详解(推荐)
Dec 09 HTML / CSS
canvas裁剪clip()函数的具体使用
Mar 01 HTML / CSS
Html5 webview元素定位工具的实现
Aug 07 HTML / CSS
清除canvas画布内容(点擦除+线擦除)
Aug 12 HTML / CSS
浅谈CSS不规则边框的生成方案
May 25 HTML / CSS
HTML5 新增内容和 API详解
Nov 17 HTML / CSS
详解CSS3+JS完美实现放大镜模式
Dec 03 #HTML / CSS
css3中仿放大镜效果的几种方式原理解析
Dec 03 #HTML / CSS
CSS3 实现飘动的云朵动画
Dec 01 #HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
Nov 30 #HTML / CSS
CSS3 实现时间轴动画
Nov 25 #HTML / CSS
纯CSS3实现的井字棋游戏
Nov 25 #HTML / CSS
HTML+CSS3+JS 实现的下拉菜单
Nov 25 #HTML / CSS
You might like
php中显示数组与对象的实现代码
2011/04/18 PHP
基于win2003虚拟机中apache服务器的访问
2017/08/01 PHP
PHP实现十进制数字与二十六进制字母串相互转换操作示例
2018/08/10 PHP
JSON.parse 解析字符串出错的解决方法
2010/07/08 Javascript
jquery利用event.which方法获取键盘输入值的代码
2011/10/09 Javascript
JS+JSP checkBox 全选具体实现
2014/01/02 Javascript
浅析js中的浮点型运算问题
2014/01/06 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
2015/11/11 Javascript
js实现正则匹配中文标点符号的方法
2015/12/23 Javascript
javascript匀速运动实现方法分析
2016/01/08 Javascript
JS模拟的Map类实现方法
2016/06/17 Javascript
简述Angular 5 快速入门
2017/11/04 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
2018/02/04 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
2018/12/13 Javascript
js获取form表单中name属性的值
2019/02/27 Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
2020/09/21 Javascript
解决vuex刷新数据消失问题
2020/11/12 Javascript
vue实现图片裁剪后上传
2020/12/16 Vue.js
python写入并获取剪切板内容的实例
2018/05/31 Python
pyspark 读取csv文件创建DataFrame的两种方法
2018/06/07 Python
numpy向空的二维数组中添加元素的方法
2018/11/01 Python
使用Python控制摄像头拍照并发邮件
2019/04/23 Python
python如何爬取网站数据并进行数据可视化
2019/07/08 Python
python 求某条线上特定x值或y值的点坐标方法
2019/07/09 Python
python3的print()函数的用法图文讲解
2019/07/16 Python
Python面向对象封装操作案例详解 II
2020/01/02 Python
使用python库xlsxwriter库来输出各种xlsx文件的示例
2020/09/01 Python
KIKO MILANO俄罗斯官网:意大利领先的化妆品和护肤品品牌
2021/01/09 全球购物
大学生的四年学习自我评价
2013/12/13 职场文书
实习自我鉴定
2013/12/15 职场文书
艺术设计专业个人求职信
2014/04/10 职场文书
2014年计生协会工作总结
2014/11/21 职场文书
简单介绍Python的第三方库yaml
2021/06/18 Python
python的netCDF4批量处理NC格式文件的操作方法
2022/03/21 Python
如何使用python包中的sched事件调度器
2022/04/30 Python
Java实现带图形界面的聊天程序
2022/06/10 Java/Android