jquery+css实现全屏图文幻灯片效果代码
代码语言:html
所属分类:幻灯片
代码描述:jquery+css实现全屏图文幻灯片效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}html,body,.container{width:100%;height:100%;max-height:100%;margin:0;padding:0;font-family:'Roboto Slab',serif;font-size:1em;line-height:1.5em;color:#607D8B;letter-spacing:.01em}.container{position:relative}.swipe{position:relative;width:100%;height:100%;background:#eee;overflow-x:hidden}.panel{position:absolute;width:100%;min-height:100%;top:0;left:0;padding:20px}.left{left:-100%}.right{left:100%}.info{position:absolute;width:80%;max-width:500px;bottom:20%;right:10%;pointer-events:none}.inner{position:relative;padding:1.66em 3em;background:#FFF;box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22)}.info:before{content:"";position:absolute;width:65%;height:80%;top:0;left:0;-webkit-transform:translate(-10px,-10px);-ms-transform:translate(-10px,-10px);-o-transform:translate(-10px,-10px);transform:translate(-10p.........完整代码请登录后点击上方下载按钮下载查看
网友评论0