<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<style>
*{margin:0;padding:0;box-sizing: border-box;}
html{color: #fff;font-size: 14px;}
.container{
text-align: center;
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 15px 5px;
background-color: rgba(0,0,0,0.3);
height: 100%;
position: absolute;
}
.hongbao{
height: 450px;
width: 300px;
background: #A5423A;
border-radius: 10px;
margin: 0 auto;
}
.topcontent{
height: 280px;
background-color: #BD503A;
border: 1px solid #BD503A;
border-radius: 10px 10px 50% 50%/10px 10px 15% 15%;
box-shadow: 0px 4px 0px -1px rgba(0,0,0,0.2);
}
.avatar{position: relative;}
.avatar span{
position: absolute;
top: 10px;
right: 15px;
font-size: 2em;
font-weight: bolder;
color: rgba(0,0,0,0.5);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.avatar img{
border: 1px solid #BD503A;
border-radius: 50%;
overflow:hidden;
margin-top: 10%;
}
.topcontent h2{
margin: 15px 0;
}
.text{
color: #999999;
}
.desscription{
margin: 15px 0;
font-size: 16px;
font-weight: 600;
}
#chai{
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid #ffA73A;
background-color: #FFA73A;
border-radius: 50%;
color: #fff;
font-size: 20px;
margin-top: -50px;
}
#chai span{
display: inline-block;
margin-top: 35px;
}
.rotate{
-webkit-animation: anim .6s infinite alternate;
-ms-animation: anim .6s infinite alternate;
animation: anim .6s infinite alternate;
}
@-webkit-keyframes anim{
from{-webkit-transform: rotateY(180deg);}
to{-webkit-transform: rotateY(360deg);}
}
@-ms-keyframes anim{
from{-webkit-transform: rotateY(180deg);}
to{-webkit-transform: rotateY(360deg);}
}
@keyframes anim{
from{-webkit-transform: rotateY(180deg);}
to{-webkit-transform: rotateY(360deg);}
}
</style>
</head>
<body>
<div class="container" id="container">
<div class="hongbao">
<div class="topcontent">
<div class="avatar">
<img src="http://placehold.it/80x80" alt="" width="80px" height="80px"/>
<span id="close">+</span>
</div>
<h2>老罗</h2>
<span class="text">给你发了一个红包</span>
<div class="desscription">恭喜发财 大吉大利</div>
</div>
<div class="chai" id="chai">
<span>拆红包</span>
</div>
</div>
</div>
<script>
var oChai = document.getElementById("chai");
var oClose = document.getElementById("close");
var oContainer = document.getElementById("container");
oChai.onclick = function(){
this.setAttribute("class","rotate");
}
oClose.onclick = function(){
oContainer.style.display = "none";
}
</script>
</body>
</html>
拆红包特效
最新推荐文章于 2021-06-04 23:53:05 发布