以下是 HTML5仿微信朋友圈样式特效 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML5仿微信朋友圈样式特效</title>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<link rel="stylesheet" href="css/app.css">
<script src="js/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
* {cursor: pointer;}
.weui_mask_transition {
display: none;
position: fixed;
z-index: 1;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0);
-webkit-transition: background .3s;
transition: background .3s;
}
.weui_fade_toggle {
background: rgba(0, 0, 0, 0.6);
}
.weui_actionsheet {
position: fixed;
left: 0;
bottom: 0;
-webkit-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
transform: translate(0, 100%);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 2;
width: 100%;
background-color: #EFEFF4;
-webkit-transition: -webkit-transform .3s;
transition: transform .3s;
}
.weui_actionsheet_toggle {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
.weui_actionsheet_menu {
background-color: #FFFFFF;
}
.weui_actionsheet_cell:before {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 1px;
border-top: 1px solid #D9D9D9;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
-ms-transform: scaleY(0.5);
transform: scaleY(0.5);
}
.weui_actionsheet_cell:first-child:before {
display: none;
}
.weui_actionsheet_cell {
position: relative;
padding: 10px 0;
text-align: center;
font-size: 18px;
}
.weui_actionsheet_cell.title {
color: #999;
}
.weui_actionsheet_action {
margin-top: 6px;
background-color: #FFFFFF;
}
</style>
</head>
<body>
<div id="actionSheet_wrap">
<div class="weui_mask_transition" id="mask" style="display: none;"></div>
<div class="weui_actionsheet" id="weui_actionsheet">
<div class="weui_actionsheet_menu">
<div class="weui_actionsheet_cell title">选择下面👇进入你的朋友圈</div>
<div class="weui_actionsheet_cell play_pyq" data-scene="1">男版朋友圈</div>
<div class="weui_actionsheet_cell play_pyq" data-scene="2">女版朋友圈</div>
</div>
<div class="weui_actionsheet_action">
<div class="weui_actionsheet_cell" id="actionsheet_cancel">取消</div>
</div>
</div>
</div>
<div style="margin:0 auto;display:none;">
<img class="data-avt" src="images/0.jpg">
</div>
<header>
<img id="bg" src="images/bg.jpg">
<p id="user-name" class="data-name">某某科技~贾素杰</p>
<img id="avt" class="data-avt" src="images/0.jpg">
</header>
<div id="main">
<div id="list">
<ul>
<li>
<div class="po-avt-wrap">
<img class="po-avt data-avt" src="images/0.jpg">
</div>
<div class="po-cmt">
<div class="po-hd">
<p class="po-name"><span class="data-name">某某科技~贾素杰</span></p>
<div class="post">
<p>大家好，听说国内冻成狗🐶？我这边还挺热～</p>
<p>
<img class="list-img" src="images/jt1.jpg" style="height: 80px;">
<img class="list-img" src="images/yt3.jpg" style="height: 80px;">
<img class="list-img data-avt" src="images/0.jpg" style="height: 80px;">
</p>
</div>
<p class="time">刚刚</p><img class="c-icon" src="images/c.png">
</div>
<div class="r"></div>
<div class="cmt-wrap">
<div class="like"><img src="images/l.png">苍井空，陈冠希，杨幂，王思聪，陈赫，刘德华，马云...</div>
<div class="cmt-list">
<p><span>wu世勋-EXO：</span>나는 서명～</p>
<p><span>鹿晗：</span>我们在国内冻成狗，我也想跟哥您去热热～</p>
<p><span>权志龙：</span>나는 서명～</p>
<p><span>王思聪：</span>去哪玩啊？那么爽</p>
<p>
<span class="data-name">某某科技~贾素杰</span>
回复
<span>
王思聪
</span>
<span>
：
</span>
澳洲大堡礁，这边刚好是夏季，挺适合避寒的。
</p>
<p><span>杨幂：</span>😘私人飞机出行，求带上我～</p>
</div>
</div>
</div>
</li>
<li>
<div class="po-avt-wrap">
<img class="po-avt" src="images/n5.jpg">
</div>
<div class="po-cmt">
<div class="po-hd">
<p class="po-name">
王思聪
</p>
<div class="post">
<p>
那一年这兄弟三人发誓一定要出人头地
<br>
以后有福同享有难同当
<br>
如今：
<br>
大哥只手遮天万人之上
<br>
二哥黄金万两富甲一方
<br>
三弟淡泊名利为人低调
</p>
<img class="list-img" src="images/xa1.jpg" style="height: 80px;">
<img class="list-img" src="images/ma1.jpg" style="height: 80px;">
<img class="data-avt list-img" src="images/0.jpg" style="height: 80px;">
</div>
<p class="time">
1分钟前
</p>
<img class="c-icon" src="images/c.png">
</div>
<div class="r">
</div>
<div class="cmt-wrap">
<div class="like">
<img src="images/l.png">
鹿晗，林更新，杨幂，angelababy，范冰冰...
</div>
<div class="cmt-list">
<p>
<span>
鹿晗：
</span>
赞！
</p>
<p>
<span class="data-name">某某科技~贾素杰</span>
<span>
：
</span>
低调低调。。
</p>
<p>
<span>
王思聪
</span>
回复
<span class="data-name">某某科技~贾素杰</span>
<span>
：
</span>
哥您就是太低调了
</p>
<p>
<span>
习
</span>
回复
<span class="data-name">某某科技~贾素杰</span>
<span>
：
</span>
好几天没见，我们该聚聚了
</p>
<p>
<span>
马云
</span>
回复
<span class="data-name">某某科技~贾素杰</span>
<span>
：
</span>
有笔大生意找你聊聊
</p>
</div>
</div>
</div>
</li>
<li>
<div class="po-avt-wrap">
<img class="po-avt" src="images/a1.jpg">
</div>
<div class="po-cmt">
<div class="po-hd">
<p class="po-name">
苍井空
</p>
<p class="post">
还是好困~
<img src="images/c1.jpg">
</p>
<p class="time">
2分钟前
</p>
<img class="c-icon" src="images/c.png" <="" div="">
<div class="r">
</div>
<div class="cmt-wrap">
<div class="like">
<img src="images/l.png">
陈赫，叫兽易小星，王思聪，陈冠希，余文乐...
</div>
<div class="cmt-list">
<p>
<span>
陈赫：
</span>
怪我咯~
</p>
<p>
<span>
陈冠希：
</span>
怪我咯~
</p>
<p>
<span class="data-name">某某科技~贾素杰</span>
<span>
：
</span>
怪我咯~
</p>
<p>
<span>
苍井空
</span>
回复
<span class="data-name">某某科技~贾素杰</span>
<span>
：
</span>
知道就好！
</p>
</div>
</div>
</div>
</div></li>
<li>
<div class="po-avt-wrap">
<img class="po-avt" src="images/a2.jpg">
</div>
<div class="po-cmt">
<div class="po-hd">
<p class="po-name">
周杰伦
</p>
<div class="post">
<p>
<b class="data-name">某某科技~贾素杰</b>
，决战夜你要加油！我们哎哟不错战队是最屌的！
</p>
<img class="list-img" src="images/c2.jpg" style="height: 80px;">
<img class="data-avt list-img" src="images/0.jpg" style="height: 80px;">
</div>
<p class="time">
2分钟前
</p>
<img class="c-icon" src="images/c.png">
</div>
<div class="r">
</div>
<div class="cmt-wrap">
<div class="like">
<img src="images/l.png">
汪峰，那英，庾澄庆
</div>
<div class="cmt-list">
<p>
<span class="data-name">某某科技~贾素杰</span>
<span>
：
</span>
杰伦老师，决战夜小公举会来吗。~
</p>
<p>
<span>
周杰伦
</span>
回复
<span class="data-name">某某科技~贾素杰</span>
<span>
：
</span>
你拿冠军了，我让你当小公举的小王纸。
</p>
</div>
</div>
</div>
</li>
<li>
<div class="po-avt-wrap">
<img class="po-avt" src="images/a5.jpg">
</div>
<div class="po-cmt">
<div class="po-hd">
<p class="ads">推广<img src="images/ads.png"></p>
<p class="po-name">金猫银猫CSmall官方</p>
<div class="post">金猫银猫CSmall情人节买珠宝赠永生花专场
<p><a class="ad-link" href="http://m.csmall.com/activity/3914.html">查看详情 <img src="images/link.png"></a></p>
<a href="http://m.csmall.com/activity/3914.html"><img class="noplayimg" src="images/asd888.jpg"></a></div>
<p class="time">45分钟前</p><img class="c-icon" src="images/c.png">
</div>
<div class="r"></div>
<div class="cmt-wrap">
<div class="like"><img src="images/l.png">范冰冰，李晨，王思聪，王健林，...</div>
<div class="cmt-list">
<p><span>范冰冰：</span>珠宝再加上永生花，花永生，爱永恒，想想都觉得好浪漫哦~<img class="bq" src="images/bq1.png"></p>
<p><span>李晨</span>回复<span>范冰冰 ：</span>小肥羊~初七情人节见！定格我们的爱情吧❤</p>
<p><span>王思聪：</span>我女朋友多，团购才能搞定啊！</p>
</div>
</div>
</div></li>
<li>
<div class="po-avt-wrap">
<img class="po-avt" src="images/a3.jpg">
</div>
<div class="po-cmt">
<div class="po-hd">
<p class="po-name">
邓超
</p>
<div class="post">
<p>
we are伐木累！欢迎加入跑男第三季！
</p>
<p>
<img class="list-img" src="images/c3.jpg" style="height: 80px;">
<img class="list-img" src="images/c4.jpg" style="height: 80px;">
<img class="data-avt list-img" src="images/0.jpg" style="height: 80px;">
</p>
</div>
<p class="time">
50分钟前
</p>
<img class="c-icon" src="images/c.png">
</div>
<div class="r">
</div>
<div class="cmt-wrap">
<div class="like">
<img src="images/l.png">
<b class="data-name">某某科技~贾素杰</b>
</div>
<div class="cmt-list">
<p>
<span class="data-name">某某科技~贾素杰</span>
<span>
：
</span>
超哥，当初为什么要选我。
</p>
<p>
<span>
邓超
</span>
回复
<span class="data-name">某某科技~贾素杰</span>
<span>
：
</span>
你是我认识的人当中，最快的！
</p>
</div>
</div>
</div>
</li>
<li>
<div class="po-avt-wrap">
<img class="po-avt" src="images/a4.jpg">
</div>
<div class="po-cmt">
<div class="po-hd">
<p class="po-name">
范冰冰
</p>
<p class="post">
我的生日趴，你为什么不来
<img class="data-avt" src="images/0.jpg">
</p>
<p class="time">
52分钟前
</p>
<img class="c-icon" src="images/c.png">
</div>
<div class="r">
</div>
<div class="cmt-wrap">
<div class="like">
<img src="images/l.png">
<b class="data-name">某某科技~贾素杰</b>
，李晨，李治廷，黎明...
</div>
<div class="cmt-list">
<p>
<span>
李晨：
</span>
呵呵。
</p>
<p>
<span class="data-name">某某科技~贾素杰</span>
<span>
：
</span>
最近忙，就酱。
</p>
</div>
</div>
</div>
</li>
<li>
<div class="po-avt-wrap">
<img class="po-avt" src="images/a7.jpg">
</div>
<div class="po-cmt">
<div class="po-hd">
<p class="po-name">
金星
</p>
<p class="post">
完美！
<img src="images/c8.jpg">
</p>
<p class="time">
55分钟前
</p>
<img class="c-icon" src="images/c.png">
</div>
<div class="r">
</div>
<div class="cmt-wrap">
<div class="cmt-list">
<p>
<span class="data-name">某某科技~贾素杰</span>
<span>
：
</span>
星姐，求虐！
</p>
<p>
<span>
金星
</span>
回复
<span class="data-name">某某科技~贾素杰</span>
<span>
：
</span>
你呢，人长的挺好看，就是偏偏要靠才华。
</p>
</div>
</div>
</div>
</li>
</ul>
</div>
<div id="share">
<div style="padding:15px;padding-bottom:20px">
<button id="gotoplay" onClick="showActionSheet();" class="btn btn-success btn-lg btn-block">我也要玩</button>
<br>
</div>
</div>
</div>
<script>
</script>
<script>
function gotoplay(scene) {
var gourl = "/act/pengYouQuan/my.php?sv=" + scene;
location.href = gourl;
}
function safetostring(str) {
return String(str).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"').replace(/'/g, "'");
}
//$("#list").html($("#scene").html());
setTimeout(function () {
// $(".data-name").text(safetostring(nickname));
//$(".data-avt").attr("src", headimgurl);
var cw = $('.list-img').width();
$('.list-img').css({'height': cw + 'px'});
}, 0);
$(window).resize(function () {
var cw = $('.list-img').width();
$('.list-img').css({'height': cw + 'px'});
});
$(document.body).show();
function hideActionSheet(weuiActionsheet, mask) {
weuiActionsheet.removeClass('weui_actionsheet_toggle');
mask.removeClass('weui_fade_toggle');
weuiActionsheet.on('transitionend', function () {
mask.hide();
}).on('webkitTransitionEnd', function () {
mask.hide();
})
}
function showActionSheet() {
var mask = $('#mask');
var weuiActionsheet = $('#weui_actionsheet');
weuiActionsheet.addClass('weui_actionsheet_toggle');
mask.show().addClass('weui_fade_toggle').click(function () {
hideActionSheet(weuiActionsheet, mask);
});
$('#actionsheet_cancel').click(function () {
hideActionSheet(weuiActionsheet, mask);
});
weuiActionsheet.unbind('transitionend').unbind('webkitTransitionEnd');
}
$('#list').not(".noplayimg").on('click', function () {
showActionSheet();
});
$('img').not(".noplayimg").on('click', function (e) {
showActionSheet();
});
$('.play_pyq').on('click', function () {
var scene = $(this).data("scene");
gotoplay(scene);
});
</script>
</body>
</html>
CSS代码(app.css):
#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:#f8f8f8;font-family:Arial,sans-serif;font-size:13px}
@media screen and (min-width:350px){html{font-size:15px}
.cmt-wrap{font-size:14px}
.time{font-size:13px}
}
.hide{display:none}
header{position:relative}
#avt,#user-name{position:absolute}
#bg{width:100%}
#user-name{text-align:right;right:114px;bottom:15px;color:#fff;font-weight:700;font-size:15px;text-shadow:0 1px .5px #000}
#share a,.btn{font-size:14px}
.btn,b{font-weight:400}
#share a,#share p,.btn{text-align:center}
#avt{width:74px;height:74px;border:1px solid #dbdbdb;right:15px;bottom:-22px;padding:1px;background-color:#fff}
#list li,.po-hd{position:relative}
#list{padding:30px 0 10px}
#list li{line-height:1.5;border-bottom:1px solid #e2e2e2;margin-top:15px;padding-bottom:15px}
#share a:nth-child(2),.ads,.po-avt{position:absolute}
.ads{color:#999;right:5px;top:0}
.ads img{width:10px;padding-left:8px}
.ad-link{color:#3b5384}
.post .ad-link img{width:11px;padding:0;display:inline-block}
.po-avt-wrap{padding-left:10px}
.po-avt{width:40px;height:40px;top:0;left:10px}
.r{border-bottom:8px solid #eee;border-left:8px solid transparent;border-right:8px solid transparent;width:1px;margin-top:5px;margin-left:10px}
.po-cmt{padding-left:60px;padding-right:10px;width:100%;box-sizing:border-box}
.po-name{color:#576b95}
.post{color:#252525;padding-bottom:10px}
.post img{padding:10px 5px 0 0;display:block;max-height:130px;max-width:130px}
#share a,.btn{display:inline-block}
.post .list-img{width:30%;max-height:80px;max-width:80px;padding-right:5px;float:left;object-fit:cover}
.post .list-img:last-child{padding-right:0}
.time{color:#b1b1b1}
.c-icon{width:20px;float:right}
.cmt-wrap{width:100%;background-color:#eee}
.like{color:#576b95;padding:5px 5px 3px 12px}
.like img{width:12px;padding-right:5px}
.cmt-list{padding:5px 12px;color:#454545}
.cmt-list p{padding-top:3px}
.cmt-list span{color:#3b5384}
#share a{border-radius:5px;background-color:#26337e;color:#fff;line-height:2.5;width:138px;margin:0 10px}
#share a:nth-child(1){position:absolute;left:50%;margin-left:-148px}
#share a:nth-child(2){right:50%;margin-right:-148px}
#share p{padding:45px 0 10px;color:#999}
#guide{position:fixed;left:0;top:0;bottom:0;right:0;width:100%;height:100%;z-index:9999;background-image:url(../images/guide2.png);background-repeat:no-repeat;background-position:right top;background-color:#191919;background-size:contain;opacity:.9}
.btn{margin-bottom:0;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;background-image:none;border:1px solid transparent;white-space:nowrap;padding:6px 12px;line-height:1.42857143;border-radius:4px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.btn-success{color:#fff;background-color:#5cb85c;border-color:#4cae4c}
.btn-group-lg>.btn,.btn-lg{padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px}
.btn-block{display:block;width:100%}
.bq{width:13px;padding-left:2px}
.hidenone{display:none}
分享到QQ
分享到微博
微信扫一扫
