用html5实现的简单幻灯片实例

2024-04-27 14:59:01

字体：大中小

来源：转载

供稿：网友

用html5、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 input元素类型：email及url介绍

下一篇：HTML5 canvas画带箭头的虚线