用CSS实现一个简单的幻灯片效果页面
2017-03-02 17:30
851 查看
又是一个常见面试题,不搜不知道,一搜吓一跳,有很多很有意思的写法。
第一反应是利用CSS3的animation。不过为了兼容浏览器,记得加各浏览器前缀(“chrome和safira:-webkit-”、“firefox:-moz-”、“opera:-o-”)
下面说说用到的animation各属性。
animation-name(动画名字,需用引号包裹)
animation-duration(动画持续时间,如:20s)
animaiton-iteration-count(循环次数,“infinite”为无线循环)
还有一个很重要的“keyframes(关键帧)”,书写格式为:@keyframes “动画名字”{}
“{}”内根据设置内容从“0%”到“100%”依次编写,注意“0%”一定不能把百分号省略
下面这个写法也很有意思。这个是改变背景的透明度
还有两种写法,利用了label和a的特性。不完全算是幻灯片,先贴上来看看.
第一反应是利用CSS3的animation。不过为了兼容浏览器,记得加各浏览器前缀(“chrome和safira:-webkit-”、“firefox:-moz-”、“opera:-o-”)
下面说说用到的animation各属性。
animation-name(动画名字,需用引号包裹)
animation-duration(动画持续时间,如:20s)
animaiton-iteration-count(循环次数,“infinite”为无线循环)
还有一个很重要的“keyframes(关键帧)”,书写格式为:@keyframes “动画名字”{}
“{}”内根据设置内容从“0%”到“100%”依次编写,注意“0%”一定不能把百分号省略
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .myDiv { width:300px; height: 300px; margin: 20px auto; -webkit-animation-name: 'loop'; -webkit-animation-duration: 10s; -webkit-animation-iteration-count: infinite; } @-webkit-keyframes "loop"{ 0% { background: url("images/m15.jpg") no-repeat;} 25% { background: url("images/m10.jpg") no-repeat;} 50% { background: url("images/m11.jpg") no-repeat;} 75% { background: url("images/m12.jpg") no-repeat;} 100% {background: url("images/m15.jpg") no-repeat;} } </style> </head> <body> <div class="myDiv"></div> </body> </html>
下面这个写法也很有意思。这个是改变背景的透明度
<!DOCTYPE html> <head> <meta charset="utf-8" /> <title>css3实现幻灯片效果</title> <meta content="" name="description" /> <meta content="" name="author" /> <style type="text/css"> .cb-slideshow{ width:400px; height:400px; margin:0 auto; z-index:0; } .cb-slideshow li{ position:absolute; width:400px; height:400px; background-size:cover; background-repeat: none; opacity:0; z-index:0; -webkit-animation: loops 36s linear infinite 0s; } .cb-slideshow li:nth-child(1){ background-image: url(images/m10.jpg); } .cb-slideshow li:nth-child(2){ background-image: url(images/m11.jpg); -webkit-animation-delay: 6s; } .cb-slideshow li:nth-child(3){ background-image: url(images/m12.jpg); -webkit-animation-delay: 12s; } .cb-slideshow li:nth-child(4){ background-image: url(images/m15.jpg); -webkit-animation-delay: 18s; } .cb-slideshow li:nth-child(5){ background-image: url(images/m16.jpg); -webkit-animation-delay: 24s; } .cb-slideshow li:nth-child(6){ background-image: url(images/m17.jpg); -webkit-animation-delay: 30s; } @-webkit-keyframes "loops" { 0% { opacity: 0; } 8% { opacity:1; } 17% { opacity:1; } 25% { opacity:0.5; } 100% { opacity: 0; } } </style> </head> <body> <ul class="cb-slideshow"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body>
还有两种写法,利用了label和a的特性。不完全算是幻灯片,先贴上来看看.
<!doctype html> <html> <head> <style> img { display: none; width: 100px; height: 100px; } input:checked + img { display: block; } input { position: absolute; left: -9999px; } label { cursor: pointer; } </style> </head> <body> <div id="cont"> <input id="img1" name="img" type="radio" checked="checked"> <img src="a.png"> <input id="img2" name="img" type="radio"> <img src="b.png"> </div> <div id="nav"> <label for="img1">第一张</label> <label for="img2">第二张</label> </div> </body> </html>
<!DOCTYPE HTML> <html> <head> <style> #cont { position: relative; height: 100px; } img { position: absolute; width: 100px; height: 100px; z-index: 1; } img:first-child, img:target { z-index: 2; } </style> </head> <body> <div id="cont"> <img id="img1" src="a.jpg"> <img id="img2" src="b.jpg"> </div> <div> <a href="#img1">one</a> <a href="#img2">two</a> </div> </body> </html>
相关文章推荐
- 用CSS写一个简单的幻灯片效果页面
- 实现一个简单的 页面划入效果
- 一个小型的网站,比如个人网站,可以使用最简单的html静态页面就实现了,配合一些图片达到美化效果,所有的页面均存放在一个目录下,这样的网站对系统架构、性能的要求都很简单,随着互联网业务的不断丰富,网站
- 关于贴友的一个书本页面简单布局(html+css)的实现
- 问题:关于贴友的一个书本页面简单布局(html+css)的实现
- 一个简单的Css实现的Tab页面
- 用框架的一个右面页面去刷新框架的左面页面,实现像outlook打开信件后信件数减一的效果
- AjaxPanel自定义控件实现页面无刷新数据交互(做了个示例程序, 效果确实比较Cool, 用法非常简单! )(示例代码下载)
- 一个简单的用javascript实现的页面内容过滤显示小程序源码
- CSS简单滤镜样式达到页面全灰效果
- [导入]AjaxPanel自定义控件实现页面无刷新数据交互(做了个示例程序, 效果确实比较Cool, 用法非常简单! )(示例代码下载)
- 帖一个简单css效果
- AjaxPanel自定义控件实现页面无刷新数据交互(做了个示例程序, 效果确实比较Cool, 用法非常简单! )(示例代码下载)
- CSS+JS实现的静态页面翻页效果
- CSS简单实现网页悬浮效果(对联广告)
- 用框架的一个右面页面去刷新框架的左面页面,实现像outlook打开信件后信件数减一的效果
- AjaxPanel自定义控件实现页面无刷新数据交互(做了个示例程序, 效果确实比较Cool, 用法非常简单! )(示例代码下载)
- AjaxPanel自定义控件实现页面无刷新数据交互(做了个示例程序, 效果确实比较Cool, 用法非常简单! )(示例代码下载)
- AjaxPanel自定义控件实现页面无刷新数据交互(做了个示例程序, 效果确实比较Cool, 用法非常简单! )(示例代码下载)
- AjaxPanel自定义控件实现页面无刷新数据交互(做了个示例程序, 效果确实比较Cool, 用法非常简单! )(示例代码下载)