点击按钮会显示图片
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta http-equiv="X-UA-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width" initial-scale="1">
<style type="text/css">
/*border-box，border和padding计算入width之内，其实就是怪异模式了~*/
@keyframes tooltipAnimation{
from{
opacity: 0;
transform:translateY(0px)
}
to{
opacity: 1;
transform:translateY(20px)
}
}
.tooltip{
min-width: 20em;
max-width: 90%；
font-size: 1.1em;
font-weight: 700;
background-color: #33CCCC;
position: absolute;
top: 3em;
left:50%;
margin-left: -10em;
padding:0.5em 1em ;
line-height: 30px;
color: white;
min-height: 30px;
border-radius: 10px;
text-align: center;
opacity: 1;
}
div{
animation: tooltipAnimation 3s ;
-moz-animation: tooltipAnimation 3s ;
-webkit-animation: tooltipAnimation 3s ;
-o-animation: tooltipAnimation 3s ;
}
</style>
</head>
<body>
<div class="tooltip" id="tooltip" style="display: none">
这是一个严重的警告！！！地方地方大幅度得到方法
</div>
<button id="tooltipBtn">显示动画</button>
</body>
<script type="text/javascript">
var oBtn1=document.getElementById('tooltipBtn');
oBtn1.onclick=function(){
document.getElementById("tooltip").style.display="block";
setTimeout(function(){
// document.getElementById("tooltip").style.display="none";
},2500);
}
</script>
</html>
Paste_Image.png
