最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
CSS3如何实现渐变幻灯片效果 CSS3实现渐变幻灯片效果代码
时间:2020-12-09 编辑:袖梨 来源:一聚教程网
CSS3如何实现渐变幻灯片效果?本篇文章小编给大家分享一下CSS3实现渐变幻灯片效果代码,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。
实现效果
代码
html
css-slideshow">
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- margin: 5em auto .5em auto; } .css-slideshow figure{ margin: 0; max- 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- 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中仿放大镜效果的几种方式原理介绍 10-26
- CSS3切割轮播图的代码展示 10-26
- css3制作背景渐变动画效果教程 10-26
- CSS3呈现的定价表 09-16
- CSS3如何制作彩虹按钮样式 09-16
- CSS3图片悬停的切换按钮介绍 09-16