用CSS3实现一个简单的幻灯片效果页面

用CSS3的animation实现一个简单的幻灯片效果页面。为了兼容浏览器,记得加各浏览器前缀(“chrome和safira:-webkit-”、“firefox:-moz-”、“opera:-o-”)

知识点:

animation各属性。animation-name(动画名字,需用引号包裹)animation-duration(动画持续时间,如:1s)animaiton-iteration-count(循环次数,“infinite”为无线循环)“keyframes(关键帧)”,书写格式为:@keyframes "动画名字"{}“{}”内根据设置内容从“0%”到“100%”依次编写。以下为完整代码:

css:

用CSS3实现一个简单的幻灯片效果页面_第1张图片

html:

 


< div  class = "carousel" > div >

点击阅读原文可以查看效果

你可能感兴趣的:(用CSS3实现一个简单的幻灯片效果页面)