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 17 HTML / CSS
浅谈css3中calc在less编译时被计算的解决办法
Dec 04 HTML / CSS
10种CSS3实现的loading动画,挑一个走吧?
Nov 16 HTML / CSS
CSS3只让背景图片旋转180度的实现示例
Mar 09 HTML / CSS
HTML5 UTF-8 中文乱码的解决方法
Nov 18 HTML / CSS
推荐WEB开发者最佳HTML5和CSS3代码生成器
Nov 24 HTML / CSS
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
Mar 22 HTML / CSS
使用HTML5 Canvas API控制字体的显示与渲染的方法
Mar 24 HTML / CSS
HTML5拖放API实现拖放排序的实例代码
May 11 HTML / CSS
详解WebSocket跨域问题解决
Aug 06 HTML / CSS
CSS极坐标的实例代码
Jun 03 HTML / CSS
VW、VH适配移动端的解决方案与常见问题
May 21 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中的加密功能
2006/10/09 PHP
php实现的遍历文件夹下所有文件,编辑删除
2010/01/05 PHP
php跨服务器访问方法小结
2015/05/12 PHP
php计算整个mysql数据库大小的方法
2015/06/19 PHP
举例讲解PHP面对对象编程的多态
2015/08/12 PHP
Swoole-1.7.22 版本已发布,修复PHP7相关问题
2015/12/31 PHP
python进程与线程小结实例分析
2018/11/11 PHP
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
2013/12/14 Javascript
jquery实现图片翻页效果
2013/12/23 Javascript
JavaScript基础教程之alert弹出提示框实例
2014/10/16 Javascript
jQuery弹出框代码封装DialogHelper
2015/01/30 Javascript
jquery Deferred 快速解决异步回调的问题
2016/04/05 Javascript
图解prototype、proto和constructor的三角关系
2016/07/31 Javascript
JS出现失效的情况总结
2017/01/20 Javascript
Vue.js学习笔记之修饰符详解
2017/07/25 Javascript
原生javascript实现的全屏滚动功能示例
2017/09/19 Javascript
详解微信小程序审核不通过的解决方法
2018/01/17 Javascript
mpvue写一个CPASS小程序的示例
2018/09/04 Javascript
TypeScript基础入门教程之三重斜线指令详解
2018/10/22 Javascript
微信小程序云开发之新手环境配置
2019/05/16 Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
2020/08/21 Javascript
Python中的类学习笔记
2014/09/23 Python
Python中线程编程之threading模块的使用详解
2015/06/23 Python
简单谈谈python基本数据类型
2018/09/26 Python
详解opencv中画圆circle函数和椭圆ellipse函数
2019/12/27 Python
中国领先的专业演出票务网:永乐票务
2016/08/29 全球购物
C#如何调用Word并打开一个Word文档
2013/05/08 面试题
音乐教学案例
2014/01/30 职场文书
领导失职检讨书
2014/02/24 职场文书
园艺师求职信
2014/03/10 职场文书
土建施工员岗位职责
2014/07/16 职场文书
党员学习群众路线教育实践活动对照检查材料
2014/09/23 职场文书
师德师风自查总结
2014/10/14 职场文书
死亡赔偿协议书
2015/01/28 职场文书
环卫工人慰问信
2015/02/15 职场文书
详解NodeJS模块化
2021/06/15 NodeJs