|
@@ -75,19 +75,160 @@
|
|
</head>
|
|
</head>
|
|
<style>
|
|
<style>
|
|
.bg_content {
|
|
.bg_content {
|
|
- height: 100vh;
|
|
|
|
|
|
+ height: calc(100vh + 44rem);
|
|
width: 100vw;
|
|
width: 100vw;
|
|
background: url('./img/blessing.png');
|
|
background: url('./img/blessing.png');
|
|
background-size: cover;
|
|
background-size: cover;
|
|
|
|
+ margin-top: -44rem;
|
|
}
|
|
}
|
|
.show_box{
|
|
.show_box{
|
|
position: absolute;
|
|
position: absolute;
|
|
top: 198rem;
|
|
top: 198rem;
|
|
- background: #FFFFFF;
|
|
|
|
|
|
+ //background: #FFFFFF;
|
|
left: 15rem;
|
|
left: 15rem;
|
|
right: 15rem;
|
|
right: 15rem;
|
|
height: 290rem;
|
|
height: 290rem;
|
|
}
|
|
}
|
|
|
|
+ .show_box .show_item{
|
|
|
|
+ width: 20rem;
|
|
|
|
+ height: 20rem;
|
|
|
|
+ position: relative;
|
|
|
|
+ top: 15rem;
|
|
|
|
+ left: 15rem;
|
|
|
|
+ display: none;
|
|
|
|
+ }
|
|
|
|
+ .show_box .show_item.add_animation_item{
|
|
|
|
+ display: block;
|
|
|
|
+ animation: hiddenAvatarItem 0.8s ease-out 2.3s forwards
|
|
|
|
+ }
|
|
|
|
+ .show_box .show_item .avatar_box{
|
|
|
|
+ width: 20rem;
|
|
|
|
+ height: 20rem;
|
|
|
|
+ border-radius: 15rem;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 0;
|
|
|
|
+ left: 0;
|
|
|
|
+ z-index: 2;
|
|
|
|
+ transform: scale(1);
|
|
|
|
+ }
|
|
|
|
+ .show_box .show_item.add_animation_item .avatar_box{
|
|
|
|
+ animation: showAvatarItem 0.3s ease-out 2s forwards;
|
|
|
|
+ }
|
|
|
|
+ .show_box .show_item .avatar_box .avatar{
|
|
|
|
+ width: 20rem;
|
|
|
|
+ height: 20rem;
|
|
|
|
+ object-fit: cover;
|
|
|
|
+ }
|
|
|
|
+ .show_box .show_item .info_box{
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: -15rem;
|
|
|
|
+ left: -15rem;
|
|
|
|
+ z-index: 1;
|
|
|
|
+ background: rgba(255,255,255,0.8);
|
|
|
|
+ border-radius: 15rem;
|
|
|
|
+ border: 1rem solid #FFFFFF;
|
|
|
|
+ width: 240rem;
|
|
|
|
+ padding: 15rem;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ }
|
|
|
|
+ .show_box .show_item.add_animation_item .info_box{
|
|
|
|
+ animation: hiddenItem 0.3s ease-out 2s forwards;
|
|
|
|
+ }
|
|
|
|
+ .show_box .show_item.show_img_item .info_box{
|
|
|
|
+ top: -175rem;
|
|
|
|
+ left: -15rem;
|
|
|
|
+ }
|
|
|
|
+ .show_box .show_item.show_img_item.add_animation_item .info_box{
|
|
|
|
+ animation: hiddenImgItem 0.3s ease-out 2s forwards;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ @keyframes showItem {
|
|
|
|
+ 0% {
|
|
|
|
+ opacity: 0;
|
|
|
|
+ }
|
|
|
|
+ 100% {
|
|
|
|
+ opacity: 1;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ @keyframes showAvatarItem {
|
|
|
|
+ 0% {
|
|
|
|
+ transform: scale(1);
|
|
|
|
+ }
|
|
|
|
+ 100% {
|
|
|
|
+ transform: scale(1.5);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ @keyframes hiddenAvatarItem {
|
|
|
|
+ 0% {
|
|
|
|
+ transform: scale(1.5);
|
|
|
|
+ opacity: 1;
|
|
|
|
+ }
|
|
|
|
+ 100% {
|
|
|
|
+ transform: scale(1.5);
|
|
|
|
+ opacity: 0;
|
|
|
|
+ top: 135rem;
|
|
|
|
+ left: 172rem;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ @keyframes hiddenItem {
|
|
|
|
+ 0% {
|
|
|
|
+ transform: scale(1);
|
|
|
|
+ top: -15rem;
|
|
|
|
+ left: -15rem;
|
|
|
|
+ }
|
|
|
|
+ 100% {
|
|
|
|
+ transform: scale(0);
|
|
|
|
+ left:-110rem;
|
|
|
|
+ top: -30rem;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ @keyframes hiddenImgItem {
|
|
|
|
+ 0% {
|
|
|
|
+ transform: scale(1);
|
|
|
|
+ top: -175rem;
|
|
|
|
+ left: -15rem;
|
|
|
|
+ }
|
|
|
|
+ 100% {
|
|
|
|
+ transform: scale(0);
|
|
|
|
+ left:-110rem;
|
|
|
|
+ top: -115rem;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .show_box .show_item .info_box .img_box{
|
|
|
|
+ width: 210rem;
|
|
|
|
+ height: 150rem;
|
|
|
|
+ border-radius: 15rem;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ margin-bottom: 10rem;
|
|
|
|
+ display: none;
|
|
|
|
+ }
|
|
|
|
+ .show_box .show_item.show_img_item .info_box .img_box{
|
|
|
|
+ display: block;
|
|
|
|
+ }
|
|
|
|
+ .show_box .show_item .info_box .img_box .info_img{
|
|
|
|
+ width: 210rem;
|
|
|
|
+ height: 150rem;
|
|
|
|
+ object-fit: cover;
|
|
|
|
+ }
|
|
|
|
+ .show_box .show_item .info_box .info_text{
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ .show_box .show_item .info_box .info_text .info_name{
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ font-size: 14rem;
|
|
|
|
+ color: #222222;
|
|
|
|
+ line-height: 20rem;
|
|
|
|
+ padding-left: 25rem;
|
|
|
|
+ margin-bottom: 5rem;
|
|
|
|
+ }
|
|
|
|
+ .show_box .show_item .info_box .info_text .info_dsc{
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ font-size: 12rem;
|
|
|
|
+ color: #222222;
|
|
|
|
+ line-height: 17rem;
|
|
|
|
+ }
|
|
.send_btn {
|
|
.send_btn {
|
|
width: 345px;
|
|
width: 345px;
|
|
position: fixed;
|
|
position: fixed;
|
|
@@ -97,11 +238,17 @@
|
|
<body>
|
|
<body>
|
|
<div class="bg_content">
|
|
<div class="bg_content">
|
|
<div class="show_box">
|
|
<div class="show_box">
|
|
- <div class="avatar_box">
|
|
|
|
- <img class="avatar" src=""/>
|
|
|
|
|
|
+ <div id="showItem" class="show_item">
|
|
|
|
+ <div class="avatar_box">
|
|
|
|
+ <img id="avatar" class="avatar" src="./img/prize-bg.png"/>
|
|
|
|
+ </div>
|
|
<div class="info_box">
|
|
<div class="info_box">
|
|
<div class="img_box">
|
|
<div class="img_box">
|
|
- <img src=""/>
|
|
|
|
|
|
+ <img id="infoImg" class="info_img" src="./img/lottery-bg.png"/>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="info_text">
|
|
|
|
+ <div id="infoName" class="info_name">不爱吃甜:</div>
|
|
|
|
+ <div id="infoDsc" class="info_dsc">不爱吃甜不爱吃甜不爱吃甜不爱吃甜不爱吃甜不爱吃甜</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -109,5 +256,35 @@
|
|
<img class="send_btn" id="sendBtn" src="./img/send-btn.png" mode="widthFix" />
|
|
<img class="send_btn" id="sendBtn" src="./img/send-btn.png" mode="widthFix" />
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</body>
|
|
-
|
|
|
|
-</html>
|
|
|
|
|
|
+ <script type="text/javascript">
|
|
|
|
+ function getRandomArbitrary(min, max) {
|
|
|
|
+ return Math.floor(Math.random() * (max - min) + min);
|
|
|
|
+ }
|
|
|
|
+ function showItem(type){
|
|
|
|
+ var showItem = document.getElementById('showItem')
|
|
|
|
+ var infoName = document.getElementById('infoName')
|
|
|
|
+ var infoDsc = document.getElementById('infoDsc')
|
|
|
|
+ var avatar = document.getElementById('avatar')
|
|
|
|
+ avatar.src = ""
|
|
|
|
+ infoName.innerText = '455'
|
|
|
|
+ infoDsc.innerText = '455'
|
|
|
|
+ var X = getRandomArbitrary(15,125)
|
|
|
|
+ if(type===1){//无图片
|
|
|
|
+ showItem.classList.remove("show_img_item")
|
|
|
|
+ var Y = getRandomArbitrary(15,157)
|
|
|
|
+ }
|
|
|
|
+ if(type===2){//有图片
|
|
|
|
+ showItem.classList.add("show_img_item")
|
|
|
|
+ var infoImg = document.getElementById('infoImg')
|
|
|
|
+ infoImg.src = ""
|
|
|
|
+ var Y = getRandomArbitrary(175,208)
|
|
|
|
+ }
|
|
|
|
+ showItem.style.cssText = `top: ${Y}rem; left: ${X}rem;`
|
|
|
|
+ showItem.classList.add("add_animation_item")
|
|
|
|
+ setTimeout(()=>{
|
|
|
|
+ showItem.classList.remove("add_animation_item")
|
|
|
|
+ },3500)
|
|
|
|
+ }
|
|
|
|
+ showItem(2)
|
|
|
|
+ </script>
|
|
|
|
+</html>X
|