CSS3实现的渐变幻灯片效果

实现效果

代码

ht ML

<div class="css -s lideshow">
	<figure>
		< img  src="http://themarklee .COM /wp-content/uploads/2013/10/class-header-css3. jpg " alt="class-header-css3" width="495" h ei ght="370" class="alignnone size-full wp -i mage-172" /><figcaption>< strong >CSS3:</strong> CSS3 delivers a wide range of stylization and effects, enhancing the web app w IT hout sacrificing your  SEM antic structure or  PE rformance. Additionally Web Open Font Format (WOFF)  PR ovides typographic flexibility and control far beyond anything the web has offe red  before.</figcaption> 
	</figure>
	<figure>
		<img src="http://themarklee测试数据/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 R DF a, microdata, and microformats, are enabling a more useful, data driven web for both progr am s and your users.</figcaption> 
	</figure>
	<figure>
		<img src="http://themarklee测试数据/wp-content/uploads/2013/10/class-header-offline.jpg" alt="class-header-offline" width="495" height="370" class="alignnone size-l arg e wp-image-178" /><figcaption><strong>Offline &am p; amp; 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测试数据/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> Be gin ning with the Geolocation API, Web Applications can present rich, device-aware features and e xp eriences. Incredible device access innovations are being developed and implemented,  From  audio/video input access to microphones and cameras, to local data such as contacts &amp; events, and even tilt  orientation .</figcaption> 
	</figure>
<figure>
		<img src="http://themarklee测试数据/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 -t ime c hat s, 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测试数据/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> ;m ultimedia:</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测试数据/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 &amp; Effects:</strong> Between SVG, Canvas, WebGL, and CSS3 3D features, you're sure to amaze your users with stunning  Visual s natively rendered in the  br owser.</figcaption> 
	</figure>
	<figure>
		<img src="http://themarklee测试数据/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 &amp; Integration:</strong> Make your Web Apps and dyn ami c web content faster with a  VAR iety of techniques and techno LOG ies such as Web Workers and  XM LHttpRequest 2. No user should ever w ai t on your watch.</figcaption> 
	</figure>
  </div>  
<p class="css-slideshow-attr"><a  hr ef="http://HdhCmsTestw3. org /html/logo/" target="_top">Images and captions are f rom  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渐变幻灯片的资料请关注其它相关 文章 ！

总结

以上是 为你收集整理的 CSS3实现的渐变幻灯片效果 全部内容，希望文章能够帮你解决 CSS3实现的渐变幻灯片效果 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于CSS3实现的渐变幻灯片效果的详细内容...