css布局模仿朋友圈图片点击放大轮换效果代码-html代码-BFW代码库

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;
    .........完整代码请登录后点击上方下载按钮下载查看