C3打开红包特效

因为没有办法上传视频，放个静态图

参考代码：样式用的rem，写了rem的js代码，引了一个animate.min.css，图片什么的要自己加

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>由远到近显示div</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<link rel="stylesheet" href="https://m.taopaitang.com/taopaitang/application/view/default/css/animate.min.css">
<script>
! function() {
function a() {
var clientWidth = document.documentElement.clientWidth > 640 ? 640 : document.documentElement.clientWidth;
document.documentElement.style.fontSize = clientWidth / 7.5 + "px";
var div = document.createElement("div");
div.style.width = "7.5rem";
document.body.appendChild(div);
document.documentElement.style.fontSize = document.documentElement.style.fontSize.replace("px", "") * clientWidth / div.clientWidth + "px";
document.body.removeChild(div);
}
var b = null;
window.addEventListener("resize", function() {
clearTimeout(b), b = setTimeout(a, 300)
}, !1), a()
}(window);
</script>
</head>
<style>
.wrap--2LdMg{position:fixed;left:0;top:0;width:100%;height:100%;pointer-events:none}
.layer--2ZLAb{width:100%;height:100%;cursor:pointer;-webkit-transition:opacity .3s;-o-transition:opacity .3s;transition:opacity .3s;background-color:rgba(0,0,0,.6);opacity:1;pointer-events:all}
.new-user-gift-modal[data-type=tips]{background-image:url(envelopeFly.png);background-size:3.2rem auto;background-position:center .43rem}
.new-user-gift-modal{background:#fff;border-radius:.14rem;width:5.4rem;padding:3.64rem .3rem .4rem;position:relative;overflow:hidden;background-repeat:no-repeat}
.new-user-gift-modal .close{position:absolute;top:0;left:0;padding:.45rem;background-image:url(flyClose.png);background-size:33.33% auto;background-repeat:no-repeat;background-position:center;cursor:pointer}
.new-user-gift-modal .title{font-size:.34rem;color:#333;line-height:1;text-align:center}
.new-user-gift-modal button{margin-top:.4rem;display:block;background:#e01f0b;height:.85rem;font-size:.36rem;color:#fff;padding:0;border:none;border-radius:.1rem;width:100%}
.content--1MSCG{position:absolute;max-width:7.5rem;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;-o-transition:transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;-webkit-transition-property:opacity,-webkit-transform;transition-property:opacity,-webkit-transform;-o-transition-property:transform,opacity;transition-property:transform,opacity;transition-property:transform,opacity,-webkit-transform;pointer-events:all}
.noAnimation--2BtrZ .content--1MSCG,.noAnimation--2BtrZ .layer--2ZLAb{-webkit-transition:none;-o-transition:none;transition:none}
.center--2bL0N .content--1MSCG{left:50%;top:50%;-webkit-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}
</style>

<body>
<div class="showimg" id="showimg">
<div id="modal">
<div class="center--2bL0N">
<div class="layer--2ZLAb"></div>
<div class="content--1MSCG">
<div class="new-user-gift-modal" data-type="tips">
<div class="close"></div>
<div>
<p class="title">
您已获得 <span class="money">888元</span>新手专享礼包
</p>
<button>点击领取</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('#modal').addClass('animated zoomIn')
});
$('.close').click(function() {
$('#modal').hide();
});
$('.layer--2ZLAb').click(function() {
$('#modal').hide();
});
$('.new-user-gift-modal button').click(function() {
$('#modal').addClass('animated zoomOut')
});

</script>
</body>
</html>

posted @ 2018-01-18 18:13 杜子腾确有其人阅读(280) 评论(0) 收藏举报

刷新页面返回顶部

杜子腾确有其人

C3打开红包特效

公告