<!DOCTYPE html>
<html lang=en style="height:100%">
<head>
<meta charset="utf-8">
<style>
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite
}
@keyframes tada {
0% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
background: url('./ling1.png');
background-size: 100% 100%;
}
10%,
20% {
-webkit-transform: scale(1) rotate(-10deg);
-ms-transform: scale(1) rotate(-10deg);
transform: scale(1) rotate(-10deg);
background: url('./ling1.png');
background-size: 100% 100%;
}
30%,
50%,
70%,
90% {
-webkit-transform: scale(1) rotate(10deg);
-ms-transform: scale(1) rotate(10deg);
transform: scale(1) rotate(10deg);
background: url('./ling2.png');
background-size: 100% 100%;
}
40%,
60%,
80% {
-webkit-transform: scale(1) rotate(-10deg);
-ms-transform: scale(1) rotate(-10deg);
transform: scale(1) rotate(-10deg);
background: url('./ling1.png');
background-size: 100% 100%;
}
100% {
-webkit-transform: scale(1) rotate(0);
-ms-transform: scale(1) rotate(0);
transform: scale(1) rotate(0);
background: url('./ling1.png');
background-size: 100% 100%;
}
}
.tada {
-webkit-animation-name: tada;
animation-name: tada
}
.ling {
background: url('./ling1.png');
background-size: 100% 100%;
width: 40px;
height: 45px;
display: inline-block;
}
.lingCon {
display: inline-block;
position: relative
}
.lingNum {
position: absolute;
right: 0px;
top: 0px;
display: none;
font-weight: bolder;
background: red;
text-align: center;
line-height: 15px;
min-width: 15px;
border-radius: 15px;
padding: 2px;
font-size: 12px;
color: white;
}
.info-mask-main {
transition: all .5s;
display: none;
width: 300px;
background: rgba(0, 0, 0, 0.8);
position: fixed;
z-index: 999999999999999;
border-radius: 20px;
padding: 20px;
padding-top: 0px;
}
.info-mask-main-title {
text-align: center;
color: white;
font-size: 20px;
padding: 15px;
font-weight: bolder;
text-align: center;
color: white;
font-size: 20px;
padding: 15px;
font-weight: bolder;
}
.info-mask-main-subtitle {
color: white;
line-height: 30px;
font-size: 16px
}
.info-mask-main-close {
position: absolute;
right: 15px;
top: 15px;
display: inline-block;
font-size: 20px;
cursor: pointer;
color: white
}
</style>
</head>
<body>
<div id="mask" class="info-mask-main">
<div class="info-mask-main-title"></div>
<div class="info-mask-main-subtitle"></div>
<span class="info-mask-main-close" onclick="infoClose()">X</span>
</div>
<div>
<div class="lingCon">
<div id="ling" class="animated ling "></div>
<span id="lingNum" class="lingNum">1</span>
</div>
<button id="btn">消息来了</button>
<button id="btn1">消息结束</button>
</div>
<script>
function getBoundingClientRect(element) {
var rect = element.getBoundingClientRect();
return {
width: rect.width,
height: rect.height,
top: rect.top,
right: rect.right,
bottom: rect.bottom,
left: rect.left,
x: rect.left,
y: rect.top
};
}
function infoOpen(title, subtitle, count) {
var mask = document.querySelector("#mask");
var lingNum = document.querySelector("#lingNum");
var ling = document.querySelector("#ling");
var lingRect = getBoundingClientRect(ling);
document.querySelector(".info-mask-main-title").innerHTML = title || "你好"
document.querySelector(".info-mask-main-subtitle").innerHTML = subtitle || "你好"
lingNum.innerHTML = count || 0;
ling.classList.add('infinite');
ling.classList.add('tada');
lingNum.style.display = "inline-block";
mask.style.display = "inline-block";
mask.style.left = (lingRect.left + lingRect.width / 2) + "px";
mask.style.top = (lingRect.top + lingRect.height / 2) + "px";
mask.style.transform = "translate(-50%,-50%) scale(0.01)";
setTimeout(function() {
mask.style.left = "50%";
mask.style.top = "50%";
mask.style.transform = "translate(-50%,-50%) scale(1)";
}, 10);
}
function infoClose() {
var mask = document.querySelector("#mask");
var lingNum = document.querySelector("#lingNum");
var ling = document.querySelector("#ling");
var lingRect = getBoundingClientRect(ling);
ling.classList.remove('infinite');
ling.classList.remove('tada');
lingNum.style.display = "none";
mask.style.left = (lingRect.left + lingRect.width / 2) + "px";
mask.style.top = (lingRect.top + lingRect.height / 2) + "px";
mask.style.transform = "translate(-50%,-50%) scale(0.01)";
}
var btn = document.querySelector("#btn");
var btn1 = document.querySelector("#btn1");
btn.addEventListener('click', function() {
infoOpen("这是一个标题", "这是一个很长的副标题", 2);
}, false)
btn1.addEventListener('click', function() {
infoClose();
}, false)
</script>
</body>
</html>
