手机
当前位置:查字典教程网 >网页设计 >HTML5教程 >用html5实现的简单幻灯片实例
用html5实现的简单幻灯片实例
摘要:用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实现语音搜索框的方法

用HTML5实现手机摇一摇的功能的教程

html5使用canvas实现跟随光标跳动的火焰效果

html5 Canvas绘制线条 closePath()实例代码

html5拖曳操作 HTML5实现网页元素的拖放操作

用HTML5.0制作网页的教程

html5定位并在百度地图上显示的示例

Html5+JS实现手机摇一摇功能

使用html5制作loading图的示例

在HTML5中使用MathML数学公式的简单讲解

精品推荐
分类导航