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的@media来编写响应式的页面
Nov 01 HTML / CSS
css3绘制百度的小度熊
Oct 29 HTML / CSS
使用 css3 transform 属性来变换背景图的方法
May 07 HTML / CSS
深入理解css中vertical-align属性
Apr 18 HTML / CSS
CSS3实现全景图特效示例代码
Mar 26 HTML / CSS
详解CSS3弹性伸缩盒
Sep 21 HTML / CSS
使用HTML5 IndexDB存储图像和文件的示例
Nov 05 HTML / CSS
html5-websocket基于远程方法调用的数据交互实现
Dec 04 HTML / CSS
HTML5仿微信聊天界面、微信朋友圈实例代码
Jan 29 HTML / CSS
Canvas制作的下雨动画的示例
Mar 06 HTML / CSS
Bootstrap File Input文件上传组件
Dec 01 HTML / CSS
html粘性页脚的具体使用
Jan 18 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中使用Oracle数据库(4)
2006/10/09 PHP
深入理解PHP原理之Session Gc的一个小概率Notice
2011/04/12 PHP
浅析Mysql 数据回滚错误的解决方法
2013/08/05 PHP
PHP实现的登录,注册及密码修改功能分析
2016/11/25 PHP
PHP编程获取各个时间段具体时间的方法
2017/05/26 PHP
php curl操作API接口类完整示例
2019/05/21 PHP
PHP实现Markdown文章上传到七牛图床的实例内容
2020/02/11 PHP
document.compatMode介绍
2009/05/21 Javascript
JavaScript与Div对层定位和移动获得坐标的实现代码
2010/09/08 Javascript
JS实现同时搜索百度和必应的方法
2015/01/27 Javascript
Javascript中拼接大量字符串的方法
2015/02/05 Javascript
JavaScript的Backbone.js框架环境搭建及Hellow world示例
2016/05/07 Javascript
微信小程序 表单Form实例详解(附源码)
2016/12/22 Javascript
jQuery实现获取h1-h6标题元素值的方法
2017/03/06 Javascript
AngularJS之自定义服务详解(factory、service、provider)
2017/04/14 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
2019/06/10 jQuery
监控微信小程序中的慢HTTP请求过程详解
2019/07/05 Javascript
详解js location.href和window.open的几种用法和区别
2019/12/02 Javascript
Jquery如何使用animation动画效果改变背景色的代码
2020/07/20 jQuery
DWR内存兼容及无法调用问题解决方案
2020/10/16 Javascript
[03:04]DOTA2英雄基础教程 影魔
2013/12/11 DOTA
[37:35]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第二局
2016/02/25 DOTA
python中使用smtplib和email模块发送邮件实例
2014/04/22 Python
python中的字典使用分享
2016/07/31 Python
python批量修改文件编码格式的方法
2018/05/31 Python
详解从Django Rest Framework响应中删除空字段
2019/01/11 Python
python解析xml简单示例
2019/06/21 Python
10分钟教你用python动画演示深度优先算法搜寻逃出迷宫的路径
2019/08/12 Python
Python如何读取文件中图片格式
2020/01/13 Python
使用python+poco+夜神模拟器进行自动化测试实例
2020/04/23 Python
Python3爬虫RedisDump的安装步骤
2021/02/20 Python
How TDD works
2012/09/30 面试题
销售简历自我评价怎么写
2014/09/26 职场文书
英文升职感谢信
2015/01/23 职场文书
律师函格式范本
2015/05/27 职场文书
CSS3 制作的图片滚动效果
2021/04/14 HTML / CSS