css布局模仿朋友圈图片点击放大轮换效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局模仿朋友圈图片点击放大轮换效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>仿微信放大图片</title> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <style> body { font-size: 14px; } #list, #list li, .po-hd, .post { overflow: hidden } .po-cmt, .post .list-img:nth-child(1), .time { float: left } #list li, .cmt-wrap, .r, .time { clear: both } .btn, a { cursor: pointer } blockquote, body, code, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, pre, td, textarea, th, ul { margin: 0; padding: 0 } table { border-collapse: collapse; border-spacing: 0 } fieldset, img { border: 0 } address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: 400 } ol, ul { list-style: none none } caption, th { text-align: left } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: 400 } q::after, q::before { content: "" } abbr, acronym { border: 0; font-variant: normal } sup { vertical-align: text-top } sub { vertical-align: text-bottom } input, select, textarea { font-family: inherit; font-size: inherit; font-weight: inherit } legend { color: #000 } a { text-decoration: none } input { -webkit-appearance: none } * { -webkit-tap-highlight-color: transparent } html { background-color: #fff; font-family: Arial, sans-serif; font-size: 13px } .top { width: 100%; position: fixed; left: 0; top: 0; z-index: 3; } .top a { font-size: 14px; line-height: 40px; color: #fff; padding-left: 12px; } .back a { padding-left: 12px; } .back a:before { font-family: "iconfont"; content: "\e613"; font-size: 14px; line-height: 40px; color: #fff; overflow: hidden; zoom: 1; } .back a span { text-indent: -500px; display: inline-block; } .bg1 { width: 100%; height: 40px; background: #000; position: fixed; left: 0; top: 0; z-index: 2; filter: alpha(opacity=60); -moz-opacity: 0.6; -khtml-opacity: 0.6; opacity: 0.6; } .camera { float: right; padding-right: 12px; } .camera a:before { font-family: "iconfont"; content: "\e62a"; font-size: 14px; line-height: 40px; color: #fff; overflow: hidden; zoom: 1; } .camera a span { display: none; } .tc1 { position: relative; } .tc2 { position: absolute; right: -100px; bottom: -23px; width: 100px; height: 30px; background: #000; z-index: 2; transition: 200ms; -moz-transition: 200ms; /* Firefox 4 */ -webkit-transition: 200ms; /* Safari 和 Chrome */ -o-transition: 200ms; /* Opera */ } .po-hd .show { right: 20px; } .zan span, .pinglun span { font-size: 12px; line-height: 30px; color: #fff; vertical-align: top; padding-left: 5px; } .zan:before { font-family: "iconfont"; content: "\e690"; font-size: 12px; line-height: 30px; color: #fff; vertical-align: middle; padding-left: 8px; } .pinglun:before { font-family: "iconfont"; content: "\e690"; font-size: 12px; line-height: 30px; color: #fff; vertical-align: top; } .nav1 { width: 100%; font-size: 12px; height: 1.2rem; position: fixed; left: 0; bottom: 0; z-index: 999999; background: #f5f5f5; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0