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 相关文章推荐
html5+css3之动画在webapp中的应用
Nov 21 HTML / CSS
详解CSS3的opacity属性设置透明效果的用法
May 09 HTML / CSS
用React加CSS3实现微信拆红包动画效果
Mar 13 HTML / CSS
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
Oct 29 HTML / CSS
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
Jan 31 HTML / CSS
HTML5 预加载让页面得以快速呈现
Aug 13 HTML / CSS
如何用canvas实现在线签名的示例代码
Jul 10 HTML / CSS
HTML5 3D书本翻页动画的实现示例
Aug 28 HTML / CSS
HTML文本属性&amp;颜色控制属性的实现
Dec 17 HTML / CSS
HTML5 body设置全屏背景图片的示例代码
Dec 08 HTML / CSS
详解CSS开发过程中的20个快速提升技巧
May 21 HTML / CSS
html解决浏览器记住密码输入框的问题
May 07 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
星际争霸 Starcraft 游戏介绍
2020/03/14 星际争霸
适用于php-5.2 的 php.ini 中文版[金步国翻译]
2011/04/17 PHP
ThinkPHP采用模块和操作分析
2011/04/18 PHP
PHP register_shutdown_function函数的深入解析
2013/06/03 PHP
php pthreads多线程的安装与使用
2016/01/19 PHP
php支付宝在线支付接口开发教程
2016/09/19 PHP
php file_get_contents取文件中数组元素的方法
2017/04/01 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
js判断浏览器的比较全的代码
2007/02/13 Javascript
写了10年的Javascript也未必全了解的连续赋值运算
2011/03/25 Javascript
js 调用本地exe的例子(支持IE内核的浏览器)
2012/12/26 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
2015/03/30 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
2015/08/14 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
2016/05/12 Javascript
终于实现了!精彩的jquery弹幕效果
2016/07/18 Javascript
AngularJS ng-bind-html 指令详解及实例代码
2016/07/30 Javascript
JS实现禁止鼠标右键的功能
2016/10/15 Javascript
Node.js使用gm拼装sprite图片
2017/07/04 Javascript
js实现购物车功能
2018/06/12 Javascript
vue安装遇到的5个报错及解决方法
2019/06/12 Javascript
layui 弹出层回调获取弹出层数据的例子
2019/09/02 Javascript
javascript网页随机点名实现过程解析
2019/10/15 Javascript
js验证账户名是否重复
2020/05/26 Javascript
[53:52]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[47:35]VP vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
Python装饰器入门学习教程(九步学习)
2016/01/28 Python
详解Python 实现元胞自动机中的生命游戏(Game of life)
2018/01/27 Python
flask 实现上传图片并缩放作为头像的例子
2020/01/09 Python
CSS3哪些新特性值得称赞
2016/03/02 HTML / CSS
详解如何在css中引入自定义字体(font-face)
2018/05/17 HTML / CSS
软件工程专业推荐信
2013/10/28 职场文书
职业技术学校毕业生推荐信
2013/12/03 职场文书
公司合作协议书范本
2014/04/18 职场文书
小学家长通知书评语
2014/12/31 职场文书
北大自主招生自荐信
2015/03/04 职场文书
2015年度酒店客房部工作总结
2015/05/25 职场文书