CSS3实现的渐变幻灯片效果
建站知识 2021-07-02 23:04www.168986.cn长沙网站建设
实现效果
代码
html
<div class="css-slideshow"> <figure> <img src="http://themarklee./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./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./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 inter 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 Aess:</strong> Beginning with the Geolocation API, Web Applications can present rich, device-aware features and experiences. Incredible device aess innovations are being developed and implemented, from audio/video input aess to microphones and cameras, to local data such as contacts & 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-time chats, faster games, and better munication. 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>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./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./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://.w3./html/logo/" target="_">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; : 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渐变幻灯片的资料请关注狼蚁SEO其它相关文章!
上一篇:CSS实现小图下拉查看大图和信息的方法
下一篇:纯CSS实现的下拉菜单
长沙网站设计
- 如何自己建一个网站 自己想建个网站,怎么建
- 如何制作网站免费建站 创建网站免费注册
- html简单网页代码 html简单网页代码超链接
- dreamweaver网页制作 dreamweaver网页制作模板
- 上海网站建设 上海网站建设制作微信
- 如何制作网站和网页 如何制作一个网页
- html网页制作代码大全 端午节html网页制作代码大
- app开发公司 app开发公司前十名
- html网页制作 html网页制作文字居中
- app制作一个需要多少钱 请人制作一个app多少钱
- 成都网站制作 成都网站制作维护
- 百度建一个网站多少钱 百度做个公司网站要多少
- html+css网页制作成品 web网页制作成品css+javascrip
- html网页制作案例 html网页设计案例
- html+css网页制作成品 web网页制作成品css+javascrip
- 个人网站模板 个人网站模板HTML