html写字消失动画,h5定位消失动画.html
html,body{
height: 100%;/*这里的html的高度继承自哪里？*/
background-color: cornflowerblue;
margin: 0;
/*overflow: hidden;*/
}
.box1{
height: 2000px;
width: 200px;
background-color: pink;
position: relative;
}
.box1 img{
position: absolute;
animation: flash 10s infinite linear;
}
@keyframes flash{
0%{
top: 20px;
left: 20px;
opacity: 1;
}
8%{
top: 20px;
left: 20px;
opacity: 0;
}
16%{
top: 20px;
left: 20px;
opacity: 1;
}
25%{
top: 200px;
left: 200px;
opacity: 1;
}
33%{
top: 200px;
left: 200px;
opacity: 0;
}
41%{
top: 200px;
left: 200px;
opacity: 1;
}
50%{
opacity: 1;
top: 110px;
left: 530px;
}
58%{
opacity: 0;
top: 110px;
left: 530px;
}
66%{
opacity: 1;
top: 110px;
left: 530px;
}
75%{
opacity: 1;
top: 343px;
left: 122px;
}
83%{
opacity: 0;
top: 343px;
left: 122px;
}
91%{
opacity: 0;
top: 343px;
left: 122px;
}
100%{
top: 20px;
left: 20px;
opacity: 1;
}
}
function beforeunload(){
return '别点！！！'
}
function reload(){
location.reload()
}
function goodbye(){
alert("bye bye")
}
fn();
function fn(){
var img = document.getElementById("img");
var i = 1;
var timer = setInterval(function(i){//这里，实际上setInterval内部调用函数的时候没有传入i，所以undefined
if(i >= 5){
i = 1;
};
//img.classList.add('cur' + i);
console.log(i);
i++;
}, 3000);
function mn(i){
}
}
一键复制
编辑
Web IDE
原始数据
按行查看
历史
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！