runoob-test.html
<html>
<head>
<link rel="stylesheet" href="<https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css>">
<script src="<https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js>"></script>
</head>
<body>
<h1 class="text-center head1 animated wobble">哈哈，我也喜欢你！！！</h1>
<div class="container-fluid">
<!-- row of buttons -->
<div class="row">
<div class="col-xs-6 text-right"> <button class="btn btn-primary">是的！</button></div>
<div class="col-xs-6"> <button class="btn animated tada shake btn-primary" id="no-btn" style="top: 200px; left: -400px;">是的！</button></div>
</div>
</div>
<style>
.head1{
font-family: 'Lobster','Indie Flower';
}
.btn-danger{
position: relative;
top: 0px; /* change position here*/
/*animation: buttonMove 5s infinite;*/
}
.btn-primary{
position: relative;
top: 0px;
}
img{
width: 200px;
height: 400px;
}
@keyframes buttonMove {
0% {top: 0px;}
/*75% {top: 100px;} */
50% {top: 500px;}
100% {top:0px;}
}
@keyframes buttonMove2{
0% {top: 400px;
left:-200px; }
25% {top: 400px;
left:200px; }
50% {top: 400px;
left:200px; }
75% {top: 600px;
left:100px; }
100% {top: 600px;
left:-200px; }
}
</style>
<script>
var count=0;
$(document).ready(function(){
$('.btn-danger').mouseenter(function(){
$('.btn-danger').css('animation', 'buttonMove 0.5s infinite');
count++;
console.log(count);
if(count>=3){
$('.btn-danger').css('animation', '');
$('.btn-danger').css('top','500px');
$('.btn-danger').css('left','-300px');
$('.btn-danger').addClass('animated tada');
}
if(count>=4){
$('.btn-danger').css('animation', 'buttonMove2 0.5s infinite ');
}
if(count>=6){
$('.btn-danger').css('animation', '');
$('.btn-danger').addClass('animated shake');
$('#no-btn').css('top','200px');
$('#no-btn').css('left','-400px');
}
if(count>=7){
$('#no-btn').removeClass('btn-danger').addClass('btn-primary');
$('#no-btn').text('是的！');
}
});
// code continues here
//btn-clicked
$('.btn-primary').click(function(){
$('.head1').text("哈哈，我也喜欢你！！！");
$('.head1').addClass("animated wobble");
});
});
</script>
</body>
</html>
结构：HTML、CSS、JavaScript
<link rel="stylesheet" href="<https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css>">
<script src="<https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js>"></script>
<h1 class="text-center head1">你喜欢我吗?</h1>
<div class="container-fluid">
<!-- row of buttons -->
<div class="row">
<div class="col-xs-6 text-right"> <button class="btn btn-primary">是的！</button></div>
<div class="col-xs-6"> <button class="btn btn-danger" id="no-btn">喜欢个锤子！</button></div>
</div>
</div>
var count=0;
$(document).ready(function(){
$('.btn-danger').mouseenter(function(){
$('.btn-danger').css('animation', 'buttonMove 0.5s infinite');
count++;
console.log(count);
if(count>=3){
$('.btn-danger').css('animation', '');
$('.btn-danger').css('top','500px');
$('.btn-danger').css('left','-300px');
$('.btn-danger').addClass('animated tada');
}
if(count>=4){
$('.btn-danger').css('animation', 'buttonMove2 0.5s infinite ');
}
if(count>=6){
$('.btn-danger').css('animation', '');
$('.btn-danger').addClass('animated shake');
$('#no-btn').css('top','200px');
$('#no-btn').css('left','-400px');
}
if(count>=7){
$('#no-btn').removeClass('btn-danger').addClass('btn-primary');
$('#no-btn').text('是的！');
}
});
// code continues here
//btn-clicked
$('.btn-primary').click(function(){
$('.head1').text("哈哈，我也喜欢你！！！");
$('.head1').addClass("animated wobble");
});
});
.head1{
font-family: 'Lobster','Indie Flower';
}
.btn-danger{
position: relative;
top: 0px; /* change position here*/
/*animation: buttonMove 5s infinite;*/
}
.btn-primary{
position: relative;
top: 0px;
}
img{
width: 200px;
height: 400px;
}
@keyframes buttonMove {
0% {top: 0px;}
/*75% {top: 100px;} */
50% {top: 500px;}
100% {top:0px;}
}
@keyframes buttonMove2{
0% {top: 400px;
left:-200px; }
25% {top: 400px;
left:200px; }
50% {top: 400px;
left:200px; }
75% {top: 600px;
left:100px; }
100% {top: 600px;
left:-200px; }
}