COMO COLOCAR EL BOTON DE "ME ENCANTA", AYUDA :(
Publicado por Dayro J. (1 intervención) el 12/08/2021 05:08:12
Hola, disculpen, me podrían ayudar, por favor.
Es que llevo varios días intentando usar códigos para obtener el botón de Me encanta como la de Instagram para un sitio web,
No sé, si me podrían ayudar a conseguir los códigos o dar algún link para apoyarme, he usado estos códigos, pero creo que están mal, no sé, pero me sale error, quizás hay algo mal.
<div class="feeds">
<div class="feed">
<p>Click on the heart</p>
<div class="actions">
<div class="heart"></div>
</div>
</div>
</div>
.heart {
background-image: url(web_heart_animation.png);
background-position: left;
background-repeat: no-repeat;
background-size: 1450px;
cursor: pointer;
display: inline-block;
height: 50px;
width: 50px;
}
.heart:hover
{
background-position: right;
}
@-webkit-keyframes heartTransition
{
0% {background-position: left;}
100% {background-position: right;}
}
@keyframes heartTransition
{
0% {background-position: left;}
100% {background-position: right;}
}
.heart_animate
{
-webkit-animation-duration: .8s;
-webkit-animation-iteration-count: 1;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: heartTransition;
-webkit-animation-timing-function: steps(28);
animation-duration: .8s;
animation-iteration-count: 1;
animation-iteration-count: infinite;
animation-name: heartTransition;
animation-timing-function: steps(28);
background-position: right;
}
$(document).ready(function(){
$('.heart').on('click',function(){
$(this).toggleClass("heart_animate");
});
});
Muchas gracias
Es que llevo varios días intentando usar códigos para obtener el botón de Me encanta como la de Instagram para un sitio web,
No sé, si me podrían ayudar a conseguir los códigos o dar algún link para apoyarme, he usado estos códigos, pero creo que están mal, no sé, pero me sale error, quizás hay algo mal.
<div class="feeds">
<div class="feed">
<p>Click on the heart</p>
<div class="actions">
<div class="heart"></div>
</div>
</div>
</div>
.heart {
background-image: url(web_heart_animation.png);
background-position: left;
background-repeat: no-repeat;
background-size: 1450px;
cursor: pointer;
display: inline-block;
height: 50px;
width: 50px;
}
.heart:hover
{
background-position: right;
}
@-webkit-keyframes heartTransition
{
0% {background-position: left;}
100% {background-position: right;}
}
@keyframes heartTransition
{
0% {background-position: left;}
100% {background-position: right;}
}
.heart_animate
{
-webkit-animation-duration: .8s;
-webkit-animation-iteration-count: 1;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: heartTransition;
-webkit-animation-timing-function: steps(28);
animation-duration: .8s;
animation-iteration-count: 1;
animation-iteration-count: infinite;
animation-name: heartTransition;
animation-timing-function: steps(28);
background-position: right;
}
$(document).ready(function(){
$('.heart').on('click',function(){
$(this).toggleClass("heart_animate");
});
});
Muchas gracias
Valora esta pregunta
0