kontext模仿ios全屏轮播图三维切换效果代码
代码语言:html
所属分类:幻灯片
代码描述:kontext模仿ios全屏轮播图三维切换效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/kontext.css"> <style> html, body { width: 100%; height: 100%; padding: 0; margin: 0; overflow: hidden; } body { background-color: #222; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQIW2NkYGD4D8SMQAwGcAY2AbBKDBUAVuYCBQPd34sAAAAASUVORK5CYII=); background-repeat: repeat; font-family: Helvetica, sans-serif; font-size: 16px; color: #fff; } .share { position: absolute; bottom: 20px; left: 24px; margin: 0; z-index: 1; font-size: 0.9em; } .credit { position: absolute; bottom: 24px; right: 24px; margin: 0; z-index: 1; font-size: 0.9em; } .credit a { color: #fff; font-weight: bold; text-decoration: none; } .layer { text-align: center; text-shadow: 1px 1px 0px rgba( 0, 0, 0, 0.1 ); } .layer h2 { position: relative; top: 30%; margin: 0; font-size: 6.25em; } .layer p { position: relative; top: 30%; margin: 0; } .layer.one { background: #dc6c5f; } .layer.two { background: #95dc84; } .layer.three { background: #64b9d2; } .bullets { position: absolute; width: 100%; bottom: 80px; padding: 0; margin: 0; text-align: center; } .bullets li { display: inline-block; width: 20px; height: 20px; border-radius: 50%; margin: 0 3px; background: rgba( 255, 255, 255, 0.5 ); box-shadow: 0px 0px 4px rgba( 0, 0, 0, 0.2 ); cursor: pointer; -webkit-tap-highlight-color: rgba( 0, 0, 0, 0 ); } .bullets li:hover { background: rgba( 255, 255, 255, 0.8 ); } .bullets li.active { cursor: default; background: #fff; } @media screen and (max-width: 400px) { body { font-size: 12px; } .layer h2 { font-size: 5em; } .bullets li { margin: 0 6px; } .credit { bottom: initial; top: 10px; right: 10px; } .share, .........完整代码请登录后点击上方下载按钮下载查看
网友评论0