经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » CSS3 » 查看文章
CSS3实现的渐变幻灯片效果_css3_CSS
来源:jb51  时间:2020/12/8 9:19:40  对本文有异议

实现效果

代码

html

  1. <div class="css-slideshow">
  2. <figure>
  3. <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>
  4. </figure>
  5. <figure>
  6. <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>
  7. </figure>
  8. <figure>
  9. <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 &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>
  10. </figure>
  11. <figure>
  12. <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 &amp; events, and even tilt orientation.</figcaption>
  13. </figure>
  14. <figure>
  15. <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>
  16. </figure>
  17. <figure>
  18. <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>
  19. </figure>
  20. <figure>
  21. <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 &amp; 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>
  22. </figure>
  23. <figure>
  24. <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 &amp; 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>
  25. </figure>
  26. </div>
  27. <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

  1. body{
  2. font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  3. font-weight: 300;
  4. }
  5. .css-slideshow{
  6. position: relative;
  7. max-width: 495px;
  8. height: 370px;
  9. margin: 5em auto .5em auto;
  10. }
  11. .css-slideshow figure{
  12. margin: 0;
  13. max-width: 495px;
  14. height: 370px;
  15. background: #000;
  16. position: absolute;
  17. }
  18. .css-slideshow img{
  19. box-shadow: 0 0 2px #666;
  20. }
  21. .css-slideshow figcaption{
  22. position: absolute;
  23. top: 0;
  24. color: #fff;
  25. background: rgba(0,0,0, .3);
  26. font-size: .8em;
  27. padding: 8px 12px;
  28. opacity: 0;
  29. transition: opacity .5s;
  30. }
  31. .css-slideshow:hover figure figcaption{
  32. transition: opacity .5s;
  33. opacity: 1;
  34. }
  35. .css-slideshow-attr{
  36. max-width: 495px;
  37. text-align: right;
  38. font-size: .7em;
  39. font-style: italic;
  40. margin:0 auto;
  41. }
  42. .css-slideshow-attr a{
  43. color: #666;
  44. }
  45. .css-slideshow figure{
  46. opacity:0;
  47. }
  48. figure:nth-child(1) {
  49. animation: xfade 48s 42s infinite;
  50. }
  51. figure:nth-child(2) {
  52. animation: xfade 48s 36s infinite;
  53. }
  54. figure:nth-child(3) {
  55. animation: xfade 48s 30s infinite;
  56. }
  57. figure:nth-child(4) {
  58. animation: xfade 48s 24s infinite;
  59. }
  60. figure:nth-child(5) {
  61. animation: xfade 48s 18s infinite;
  62. }
  63. figure:nth-child(6) {
  64. animation: xfade 48s 12s infinite;
  65. }
  66. figure:nth-child(7) {
  67. animation: xfade 48s 6s infinite;
  68. }
  69. figure:nth-child(8) {
  70. animation: xfade 48s 0s infinite;
  71. }
  72.  
  73. @keyframes xfade{
  74. 0%{
  75. opacity: 1;
  76. }
  77. 10.5% {
  78. opacity: 1;
  79. }
  80. 12.5%{
  81. opacity: 0;
  82. }
  83. 98% {
  84. opacity: 0;
  85. }
  86. 100% {
  87. opacity: 1;
  88. }
  89. }

以上就是CSS3实现的渐变幻灯片效果的详细内容,更多关于CSS3渐变幻灯片的资料请关注w3xue其它相关文章!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号