我有两个想要制作动画的图像。这个代码在Stack Overflow中得到了改进,但它对我来说仍然不起作用。我不知道我的CSS和HTML代码有什么问题。
这是我的代码:
$(document).ready(function() {
$(".animar").click(function() {
$("#img4").addClass("uno");
});
});

#img4 {
width: 7%;
height: auto;
margin: auto;
display: block;
background-size:20%;
float: left;
}
#img5 {
width: 3%;
height: auto;
margin: auto;
display: block;
background-size:20%;
position: relative;
right:20%;
}
.animar {
width: 123px;
height: auto;
margin-right: 15%;
display: block;
background-size:0%;
float:right;
border-color: white;
background-color: rgba(43,86,162, 1.00);
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 20px;
color: white;
border-radius: 12px;
border-width: 10px;
}
uno {
animation-name: uno;
animation-duration: 10s;
}
@keyframes uno {
20% {left:80px;}
50%{left:190px;}
70%{left:220px}
100%{left:350px;}
}
#gradiente2 {
background: rgba(43,86,162, 1.00);
position: relative;
margin-bottom: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12" id="gradiente2">
<p id="t1" class="typewrite" data-period="2000" data-type='[ "En nuestra institución siempre nos preocupamos por brindarte lo mejor" ]'><span class="wrap"></span> </p>
<p id="t2" class="typewrite" data-period="2000" data-type='[ "Síempre le Ponemos Corazón, a lo que hacemos" ]'><span class="wrap"></span> </p>
<div>
<img src="imagenes/kangura.png" class="img-responsive" id="img4">
<img src="imagenes/corazon.png" class="img-responsive" id="img5">
<button class="animar">Entregar Corazón</button>
</div>
</div>
&#13;
答案 0 :(得分:3)
.
班级uno
上添加.uno
。#img4
忘记添加position:relative
$(document).ready(function() {
$(".animar").click(function() {
$("#img4").addClass("uno");
});
});
#img4 {
position: relative;
width: 7%;
height: auto;
margin: auto;
display: block;
background-size: 20%;
float: left;
}
#img5 {
width: 3%;
height: auto;
margin: auto;
display: block;
background-size: 20%;
position: relative;
right: 20%;
}
.animar {
width: 123px;
height: auto;
margin-right: 15%;
display: block;
background-size: 0%;
float: right;
border-color: white;
background-color: rgba(43, 86, 162, 1.00);
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 20px;
color: white;
border-radius: 12px;
border-width: 10px;
}
.uno {
animation-name: uno;
animation-duration: 10s;
}
@keyframes uno {
20% {
left: 80px;
}
50% {
left: 190px;
}
70% {
left: 220px
}
100% {
left: 350px;
}
}
#gradiente2 {
background: rgba(43, 86, 162, 1.00);
position: relative;
margin-bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-12" id="gradiente2">
<p id="t1" class="typewrite" data-period="2000" data-type='[ "En nuestra institución siempre nos preocupamos por brindarte lo mejor" ]'><span class="wrap"></span> </p>
<p id="t2" class="typewrite" data-period="2000" data-type='[ "Síempre le Ponemos Corazón, a lo que hacemos" ]'><span class="wrap"></span> </p>
<div>
<img src="https://1.img-dpreview.com/files/p/TS1200x900~sample_galleries/7214830437/4039259235.jpg" class="img-responsive" id="img4">
<img src="https://2.img-dpreview.com/files/p/TS1200x900~sample_galleries/7214830437/8857557974.jpg" class="img-responsive" id="img5">
<button class="animar">Entregar Corazón</button>
</div>
</div>
答案 1 :(得分:0)
请参阅我的内联评论,了解我的更改内容:
#img4{position: relative;}
uno{...}
更改为.uno{...}
$(document).ready(function() {
$(".animar").click(function() {
$("#img4").addClass("uno");
});
});
&#13;
#img4 {
width: 7%;
height: auto;
margin: auto;
display: block;
background-size:20%;
float: left;
position: relative;/* NEW */
}
#img5 {
width: 3%;
height: auto;
margin: auto;
display: block;
background-size:20%;
position: relative;
right:20%;
}
.animar {
width: 123px;
height: auto;
margin-right: 15%;
display: block;
background-size:0%;
float:right;
border-color: white;
background-color: rgba(43,86,162, 1.00);
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 20px;
color: white;
border-radius: 12px;
border-width: 10px;
}
.uno { /* changed "uno" to ".uno" */
animation-name: uno;
animation-duration: 10s;
}
@keyframes uno {
20%{left:80px;}
50%{left:190px;}
70%{left:220px}
100%{left:350px;}
}
#gradiente2{
background: rgba(43,86,162, 1.00);
position: relative;
margin-bottom: 0;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12" id="gradiente2">
<p id="t1" class="typewrite" data-period="2000" data-type='[ "En nuestra institución siempre nos preocupamos por brindarte lo mejor" ]'><span class="wrap"></span> </p>
<p id="t2" class="typewrite" data-period="2000" data-type='[ "Síempre le Ponemos Corazón, a lo que hacemos" ]'><span class="wrap"></span> </p>
<div>
<img src="imagenes/kangura.png" class="img-responsive" id="img4">
<img src="imagenes/corazon.png" class="img-responsive" id="img5">
<button class="animar">Entregar Corazón</button>
</div>
</div>
&#13;
如果您需要更多帮助,请随时发表评论......