- 代碼
<!DOCTYPE html>
<html>
<head>
<title>home</title>
<meta charset="utf-8">
<style type="text/css">
.fix_tip{
width: 500px;
height: 48px;
left: 50%;
margin-left: -250px;
font-size: 24px;
line-height: 48px;
position: fixed;
background: red;
color: white;
text-align: center;
z-index: 1;
border: 1px solid red;
animation:myfirst 3s forwards;
-moz-animation:myfirst 3s forwards; /* Firefox */
-webkit-animation:myfirst 3s forwards; /* Safari and Chrome */
-o-animation:myfirst 3s forwards; /* Opera */
}
@keyframes myfirst{
from{top:0px}
to{top:100px}
}
/* Firefox */
@-moz-keyframes myfirst {
from{top:0px}
to{top:100px}
}
/* Safari and Chrome */
@-webkit-keyframes myfirst {
from{top:0px}
to{top:100px}
}
/* Opera */
@-o-keyframes myfirst{
from{top:0px}
to{top:100px}
}
</style>
</head>
<body>
<div class="fix_tip" id="fix_tip">
<!-- <b>數據格式錯誤，插入失敗</b> -->
</div>
<!-- /錯誤提示 -->
<script type="text/javascript">
setTimeout("document.getElementById('fix_tip').style.display='none'",6000);
</script>
</body>
</html>
-
動畫結束後停止在結束位置
網上搜到的都是設置
animation-fill-mode: forwards;但是事實上單獨這樣設置是沒有效果的，正確寫法是
animation:myfirst 3s forwards; -
div在3s後消失
-
獲取控制的div
document.getElementById('fix_tip') -
設置消失
這裏是設置該div爲none
setTimeout("document.getElementById('fix_tip').style.display='none'",6000);
我這裏設置6s消失是因爲我的h5動畫需要執行3s。 -
js運行說明
一種是寫成function，在body中調用；
另一種就是我在上面所顯示的，直接在body結束標籤之上，body中其他內容填充完畢，再寫js方法。
-