用html5实现的简单幻灯片实例_HTML5教程-查字典教程网
用html5实现的简单幻灯片实例
用html5实现的简单幻灯片实例
发布时间:2015-05-12 来源:查字典编辑
摘要:用html5、css3实现的超简单幻灯片,用鼠标滚轮滚动进行换页。#slides{position:absolute;left:0px;to...

用html

5、css3实现的超简单幻灯片,用鼠标滚轮滚动进行换页。

<!doctype html> <html> <head> <title></title> <style> #slides{ position:absolute; left:0px; top:0px; height:100%; width:100%; overflow:hidden; } .slide{ position:absolute; height:600px; width:800px; opacity:0.7; background-color:rgba(0, 128, 196, 0.5) !important; background-color:#ccc; border-radius:10px; left:50%; top:50%; margin-top:-300px; box-shadow:5px 5px 5px rgba(0, 0, 0, 0.5); transition:all 0.25s ease-in-out 0s; } .current{ opacity:1; margin-left:-400px; } .future{ margin-left:450px; transform: skew(-3deg) scale(0.8); -webkit-transform: skew(-3deg) scale(0.8); } .post{ margin-left:-1250px; transform: skew(3deg) scale(0.8); -webkit-transform: skew(3deg) scale(0.8); } .far-future{ margin-left:1200px; transition:none; }

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新HTML5教程学习
    热门HTML5教程学习
    网页设计子分类