我正在尝试为使用HTML的项目制作一个简单的Whack-a-mole游戏。但是我似乎无法使动画正常工作。
我试图让三个痣从页面的底部滑到顶部,而我正在观看的视频很烂。谁能帮我解决这个问题?
int[] values = s.Select(c => (int)(c - '0')).ToArray();
jQuery(document).ready(function() {
jQuery(".mole").animate({
"top": "0%"
}, 5000);
});
body {
width: 100%;
height: 100%;
overflow: hidden;
}
.mole {
background-color: rgb(185, 122, 87);
border-radius: 100px 100px 0px 0px;
height: 100%;
width: 10%;
postion: absolute;
top: 100%;
background-image: url(mole.png);
background-size: 100%;
background-repeat: no-repeat;
background-position: 0% 3%;
}
.left_ear {
background-color: rgb(185, 122, 87);
border-radius: 100px;
postion: absolute;
left: 0px;
float: left;
min-width: 30%;
padding-top: 30%;
z-index: -1;
}
.right_ear {
background-color: rgb(185, 122, 87);
border-radius: 100px;
postion: absolute;
left: 0px;
float: right;
min-width: 30%;
padding-top: 30%;
left: 70%;
z-index: -1;
}
#mole1 {
left: 10%;
}
#mole2 {
left: 45%;
}
#mole3 {
left: 80%;
}
答案 0 :(得分:0)
使用正确的拼写即可工作:
body{ width:100%; height:100%; overflow:hidden; }
.mole{
background-color:rgb(185,122,87);
border-radius:100px 100px 0px 0px;
height:100%;
width:10%;
position: absolute;
top: 100%;
background-image:url(mole.png);
background-size:100%;
background-repeat:no-repeat;
background-position:0% 3%;
}
.left_ear{
background-color:rgb(185,122,87);
border-radius:100px;
position:absolute;
left: 0px;
float:left;
min-width: 30%;
padding-top: 30%;
z-index:-1;
}
.right_ear{
background-color:rgb(185,122,87);
border-radius:100px;
position:absolute;
left:0px;
float:right;
min-width: 30%;
padding-top: 30%;
left:70%;
z-index:-1;
}
#mole1 {left: 10%;}
#mole2 {left: 45%;}
#mole3 {left: 80%;}
答案 1 :(得分:0)
我想唯一缺少的是transition
类的.mole
属性,并且在position:absolute;
的3个地方有一个错字。
jQuery(document).ready(function(){
jQuery(".mole").animate({"top":"0%"},5000);
});
body{ width:100%; height:100%; overflow:hidden; }
.mole{
background-color:rgb(185,122,87);
border-radius:100px 100px 0px 0px;
height:100%;
width:10%;
position:absolute;
top: 100%;
background-image:url(mole.png);
background-size:100%;
background-repeat:no-repeat;
background-position:0% 3%;
transition: 0.1s all linear;
}
.left_ear{
background-color:rgb(185,122,87);
border-radius:100px;
position:absolute;
left:0px;
float:left;
min-width: 30%;
padding-top: 30%;
z-index:-1;
}
.right_ear{
background-color:rgb(185,122,87);
border-radius:100px;
position:absolute;
left:0px;
float:right;
min-width: 30%;
padding-top: 30%;
left:70%;
z-index:-1;
}
#mole1 {left: 10%;}
#mole2 {left: 45%;}
#mole3 {left: 80%;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<div class="mole" id="mole1">
<div class="left_ear"></div>
<div class="right_ear"></div>
</div>
<div class="mole" id="mole2">
<div class="left_ear"></div>
<div class="right_ear"></div>
</div>
<div class="mole" id="mole3">
<div class="left_ear"></div>
<div class="right_ear"></div>
</div>