您现在的位置是:网站首页> 编程资料编程资料

CSS3实现的渐变幻灯片效果css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果

2021-09-03 737人已围观

简介 这篇文章主要介绍了CSS3实现的渐变幻灯片效果的示例代码,帮助大家更好的理解和使用CSS3,感兴趣的朋友可以了解下

实现效果

代码

html

class-header-css3
CSS3: 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.
class-header-semantics
Semantics: 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.
class-header-offline
Offline & Storage: 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.
class-header-device
Device Access: 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.
class-header-connectivity
Connectivity: 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.
class-header-multimedia
Multimedia: Audio and video are first class citizens in the HTML5 web, living in harmony with your apps and sites. Lights, camera, action!
class-header-3d
3D, Graphics & Effects: Between SVG, Canvas, WebGL, and CSS3 3D features, you're sure to amaze your users with stunning visuals natively rendered in the browser.
class-header-performance
Performance & Integration: 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.

Images and captions are from the W3C

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渐变幻灯片的资料请关注其它相关文章!

相关内容

-六神源码网