最初に効果を見てください、ビデオデモアドレス：https：//b23.tv/i8njpo、以下は画像効果です。
ページに入った後、ポップアップウィンドウが表示されます。ユーザーが受信ボタンをクリックすると（またはボタンをクリックしないと、3秒後にページが分離されます）、画像が上下に分離されてスライドします。画面の、そして受信ボタントーマスは360度回転し、その場にとどまります消え、同時にページマスクが消え、ユーザーは後続の操作を実行できます。
上記の効果は実際には比較的単純です。ポップアップウィンドウには3つの画像が含まれています。中央の画像をクリックすると（または3秒間クリックしなかった後）、上下の画像が画面の外側に垂直にスライドします。この効果を達成するために、jsは比較的単純であり、より複雑な点はcssにあります。
ここで注意すべき2つのポイントは次のとおりです。
1：スライディングcss属性は次のとおりです。
transform: translateY(-300%); //负数代表上滑，上滑三个百分单位
//translateY：沿Y轴垂直滑动
//translateX：沿X轴水平滑动
//rotateY(360edg): 沿Y轴翻转360度,edg是角度单位
//还有很多类似的取值，可以参考 CSS3 transform 属性2：jsタイマーメソッド：
//setTimeout ：在3秒后执行一次,执行一次就不再执行了
setTimeout(function () {
}, 3000);
//setInterval(fn，2500) ：每2.5秒重复执行一次
var stopInterval = setInterval(function () {
if(true){
//clearInterval(obj) ：取消重复循环定时器
clearInterval(stopInterval);
}
}, 2500)
}3：アクティブへの少しの注意
/*给class添加动态的active样式，在定义样式的时候一定要将active紧跟class名称，不能留空格
因为空格后面的就是下层class名称,加上空格后页面会去找寻下层中名叫active的class去了，那肯定是找不
到的
*/
//举例：错误的写法(2种)
.hoZrDV .modal-packet. active .modal-packet-top {
xxx:xxx
}
.hoZrDV .modal-packet active .modal-packet-top {
xxx:xxx
}
//举例：正确的写法
.hoZrDV .modal-packet.active .modal-packet-top {
xxx:xxx
}
以下はメインコードです
1：ポップアップウィンドウとマスクされたdiv。コード内の画像アドレスは偽のアドレスです。自分で画像を変更でき、必要に応じてプライベートメッセージを送信できます。
<!--有关蒙版+弹窗这块的最外层div-->
<div class="hoZrDV" id="hoZrDV">
<!--这个是蒙版-->
<div class="rps-mask" id="rps-mask"></div>
<!--弹窗-->
<div class="modal-packet" id="modal-packet">
<!--弹窗上半部分的图片-->
<div class="modal-packet-top" id="modal-packet-top"
style="background-image:url(https://xxx.com/activities/images/test/top.png)"></div>
<!--弹窗下半部分的图片-->
<div class="modal-packet-bottom" id="modal-packet-bottom"
style="background-image:url(https://xxx.com/activities/images/test/bottom.png)"></div>
<!--弹窗中间部分的图片，就是领取按钮-->
<img class="modal-packet-btn" id="formButton" src="https://xxx.com/activities/images/test/getnow.png" alt=""/>
</div>
</div>2：ポップアップウィンドウとマスクのcss
.hoZrDV .rps-mask {
-webkit-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.7
}
.hoZrDV .modal-packet{
position: fixed;
z-index: 1001;
top: 50%;
left: 50%;
width: 345px;
height: 380px;
max-width: 100vw;
max-height: 100vh;
transform: translate(-50%, -50%)
}
.hoZrDV .modal-packet-top {
position: absolute;
width: 100%;
height: 83%;
left: 0;
top: 0;
background-image: url(https://oss-baoji.oss-cn-shanghai.aliyuncs.com/activities/images/test/top2.png);
background-size: 100%;
background-repeat: no-repeat;
background-position: center top;
-webkit-transition: -webkit-transform 0.8s ease 0.5s;
-webkit-transition: transform 0.8s ease 0.5s;
transition: transform 0.8s ease 0.5s;
z-index: 2;
}
.hoZrDV .modal-packet-bottom {
height: 44.5%;
position: absolute;
width: 100%;
left: 0;
bottom: 0;
background-image: url(https://oss-baoji.oss-cn-shanghai.aliyuncs.com/activities/images/test/bottom2.png);
background-size: 100%;
background-repeat: no-repeat;
background-position: center bottom;
-webkit-transition: -webkit-transform 0.8s ease 0.5s;
-webkit-transition: transform 0.8s ease 0.5s;
transition: transform 0.8s ease 0.5s;
}
.hoZrDV .modal-packet-btn {
position: absolute;
width: 100px;
height: 100px;
left: 50%;
bottom: 30px;
-webkit-transition: -webkit-transform 0.5s ease;
-webkit-transition: transform 0.5s ease;
transition: transform 0.5s ease;
z-index: 2;
bottom: 32px;
width: 100px;
height: 100px;
margin-left: -50px
}
/*---------------以上为页面刚加载完的未分离时的样式--------------------*/
/*---------------以下为点击领取后触发的分离特效的样式--------------------*/
/*隐藏蒙版*/
.hoZrDV .rps-mask.active {
opacity: 0.5;
}
/*隐藏弹窗*/
.hoZrDV .modal-packet .hide {
display: none;
}
/*上半部图片上滑出屏幕特效*/
.hoZrDV .modal-packet.active .modal-packet-top {
-webkit-transform: translateY(-300%);
-ms-transform: translateY(-300%);
transform: translateY(-300%);
}
/*下半部图片下滑出屏幕特效*/
.hoZrDV .modal-packet.active .modal-packet-bottom {
-webkit-transform: translateY(300%);
-ms-transform: translateY(300%);
transform: translateY(300%);
}
/*领取按钮翻转360度特效*/
.hoZrDV .modal-packet-btn.active {
-webkit-transform: rotateY(360deg);
-ms-transform: rotateY(360deg);
transform: rotateY(360deg);
}3：ポップアップとマスクされたjquery
/*setTimeout 在页面加载完3秒后执行一次（旨在即使用户不点击，时间一到也会分离），增加分离特效样式，此样式会将蒙版的透明度由0.7改为0.5*/
function splitSetTimeout() {
setTimeout(function () {
$("#modal-packet").addClass("active");
$("#formButton").addClass("active");
$("#rps-mask").addClass("active");
}, 3000);
}
/*弹窗领取按钮被点击的方法
* 点击后给蒙版rps-mask添加上active样式，增加分离特效样式，此样式会将蒙版的透明度由0.7改为0.5*/
function splitFormButtonClike() {
$("#formButton").click(function (){
$("#modal-packet").addClass("active");
$("#formButton").addClass("active");
$("#rps-mask").addClass("active");
});
}
/*每2.5秒重复执行一次*/
function splitStopInterval() {
var stopInterval = setInterval(function () {
/*检测蒙版的透明度是否为0.5，为0.5即表示用户点击了领取按钮 或是 页面加载了3秒钟，
此时将一系列的弹窗样式清楚或是不展示，并取消重复执行*/
if ($('#rps-mask').css('opacity') == '0.5') {
$("#hoZrDV").removeClass();
$("#hoZrDV").css("display", "none");
$("#modal-packet").css("display", "none");
$("#formButton").css("display", "none");
$("#rps-mask").css("opacity", "0");
$("#rps-mask").css("display", "none");
/*取消重复执行*/
clearInterval(stopInterval);
}
}, 2500)
}