Je crée la page du blog, je boucle les images du bouton J'aime en fonction du nombre total de messages en utilisant l'exemple PHP: (bouton J'aime Facebook) ici, je suis confronté à des problèmes, c'est php pendant que la boucle fonctionne mais lorsque je clique sur la première image de l'article ne travaillant qu'avec une animation de clic si je clique sur le deuxième message comme le bouton et le premier bouton de publication ne fonctionne que je ne peux pas comprendre quels sont les problèmes. Veuillez me conseiller ou me donner une solution pour résoudre ces problèmes. J'ai joint mon code.
<?php
while($getPerPost=mysqli_fetch_assoc($result01))
{
extract($getPerPost);
?>
<input type="checkbox" id="checkbox-ins"/>
<label for="checkbox-ins">
<svg id="heart-svg<?php echo $p_id; ?>" viewBox="467 392 58 57" xmlns="http://www.w3.org/2000/svg" >
<g id="Group" fill="none" fill-rule="evenodd" transform="translate(467 392)">
<path d="M25.82,40.35a1.67,1.67,0,0,0,.31.94l.94,1.36a1.8,1.8,0,0,0,1.36.73h3.24A1.76,1.76,0,0,0,33,42.65L34,41.29a1.69,1.69,0,0,0,.32-.94v-2H25.92A13.27,13.27,0,0,0,25.82,40.35Zm-5-14.53a9.11,9.11,0,0,0,2.3,6.06,14.75,14.75,0,0,1,2.72, 4.81h8.36a16,16,0,0,1,2.72-4.81,8.92,8.92,0,0,0,2.3-6.06,9.2,9.2,0,0,0-18.4,0ZM30,21.64a4.19,4.19,0,0,0-4.18,4.18.9.9,0,0, 1-.84.84.89.89,0,0,1-.83-.84A5.84,5.84,0,0,1,30,20a.89.89,0,0,1,.84.83A.9.9,0,0,1,30,21.64Z" id="heart" fill="#AAB8C2"/> <circle id="main-circ" fill="#ddd810" opacity="0" cx="29.5" cy="29.5" r="1.5"/>
<g id="grp7" opacity="0" transform="translate(7 6)"> <circle id="oval1" fill="#ddd810" cx="2" cy="6" r="2"/> <circle id="oval2" fill="#ddd810" cx="5" cy="2" r="2"/>
</g>
<g id="grp6" opacity="0" transform="translate(0 28)"> <circle id="oval1" fill="#ddd810" cx="2" cy="7" r="2"/>
<circle id="oval2" fill="#ddd810" cx="3" cy="2" r="2"/>
</g>
<g id="grp3" opacity="0" transform="translate(52 28)"> <circle id="oval2" fill="#ddd810" cx="2" cy="7" r="2"/> <circle id="oval1" fill="#ddd810" cx="4" cy="2" r="2"/>
</g>
<g id="grp2" opacity="0" transform="translate(44 6)"> <circle id="oval2" fill="#ddd810" cx="5" cy="6" r="2"/> <circle id="oval1" fill="#ddd810" cx="2" cy="2" r="2"/> </g>
<g id="grp5" opacity="0" transform="translate(14 50)"> <circle id="oval1" fill="#ddd810" cx="6" cy="5" r="2"/> <circle id="oval2" fill="#ddd810" cx="2" cy="2" r="2"/> </g>
<g id="grp4" opacity="0" transform="translate(35 50)"> <circle id="oval1" fill="#ddd810" cx="6" cy="5" r="2"/> <circle id="oval2" fill="#ddd810" cx="2" cy="2" r="2"/> </g>
<g id="grp1" opacity="0" transform="translate(24)"> <circle id="oval1" fill="#ddd810" cx="2.5" cy="3" r="2"/> <circle id="oval2" fill="#ddd810" cx="7.5" cy="2" r="2"/> </g>
</g>
</svg>
</label>
<?php
}
?>
svg {
cursor: pointer;
overflow: visible;
width: 60px;
margin: 0;
margin-bottom: -45px;
}
svg #heart {
transform-origin: center;
animation: animateHeartOut .3s linear forwards;
}
svg #main-circ {
transform-origin: 29.5px 29.5px;
}
#checkbox-ins {
display: none;
}
#checkbox-ins:checked+label svg #heart {
transform: scale(0.2);
fill: #ddd810;
animation: animateHeart .3s linear forwards .25s;
}
#checkbox-ins:checked+label svg #main-circ {
transition: all 2s;
animation: animateCircle .3s linear forwards;
opacity: 1;
}
#checkbox-ins:checked+label svg #grp1 {
opacity: 1;
transition: .1s all .3s;
}
#checkbox-ins:checked+label svg #grp1 #oval1 {
transform: scale(0) translate(0, -30px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
#checkbox-ins:checked+label svg #grp1 #oval2 {
transform: scale(0) translate(10px, -50px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
#checkbox-ins:checked+label svg #grp2 {
opacity: 1;
transition: .1s all .3s;
}
#checkbox-ins:checked+label svg #grp2 #oval1 {
transform: scale(0) translate(30px, -15px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
#checkbox-ins:checked+label svg #grp2 #oval2 {
transform: scale(0) translate(60px, -15px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
#checkbox-ins:checked+label svg #grp3 {
opacity: 1;
transition: .1s all .3s;
}
#checkbox-ins:checked+label svg #grp3 #oval1 {
transform: scale(0) translate(30px, 0px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
#checkbox-ins:checked+label svg #grp3 #oval2 {
transform: scale(0) translate(60px, 10px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
#checkbox-ins:checked+label svg #grp4 {
opacity: 1;
transition: .1s all .3s;
}
#checkbox-ins:checked+label svg #grp4 #oval1 {
transform: scale(0) translate(30px, 15px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
#checkbox-ins:checked+label svg #grp4 #oval2 {
transform: scale(0) translate(40px, 50px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
#checkbox-ins:checked+label svg #grp5 {
opacity: 1;
transition: .1s all .3s;
}
#checkbox-ins:checked+label svg #grp5 #oval1 {
transform: scale(0) translate(-10px, 20px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
#checkbox-ins:checked+label svg #grp5 #oval2 {
transform: scale(0) translate(-60px, 30px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
#checkbox-ins:checked+label svg #grp6 {
opacity: 1;
transition: .1s all .3s;
}
#checkbox-ins:checked+label svg #grp6 #oval1 {
transform: scale(0) translate(-30px, 0px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
#checkbox-ins:checked+label svg #grp6 #oval2 {
transform: scale(0) translate(-60px, -5px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
#checkbox-ins:checked+label svg #grp7 {
opacity: 1;
transition: .1s all .3s;
}
#checkbox-ins:checked+label svg #grp7 #oval1 {
transform: scale(0) translate(-30px, -15px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
#checkbox-ins:checked+label svg #grp7 #oval2 {
transform: scale(0) translate(-55px, -30px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
#checkbox-ins:checked+label svg #grp2 {
opacity: 1;
transition: .1s opacity .3s;
}
#checkbox-ins:checked+label svg #grp3 {
opacity: 1;
transition: .1s opacity .3s;
}
#checkbox-ins:checked+label svg #grp4 {
opacity: 1;
transition: .1s opacity .3s;
}
#checkbox-ins:checked+label svg #grp5 {
opacity: 1;
transition: .1s opacity .3s;
}
#checkbox-ins:checked+label svg #grp6 {
opacity: 1;
transition: .1s opacity .3s;
}
#checkbox-ins:checked+label svg #grp7 {
opacity: 1;
transition: .1s opacity .3s;
}
@keyframes animateCircle {
40% {
transform: scale(10);
opacity: 1;
fill: #ddd810;
}
55% {
transform: scale(11);
opacity: 1;
fill: #ddd810;
}
65% {
transform: scale(12);
opacity: 1;
fill: #ddd810;
}
75% {
transform: scale(13);
opacity: 1;
fill: transparent;
stroke: #ddd810;
stroke-width: .5;
}
85% {
transform: scale(17);
opacity: 1;
fill: transparent;
stroke: #ddd810;
stroke-width: .2;
}
95% {
transform: scale(18);
opacity: 1;
fill: transparent;
stroke: #ddd810;
stroke-width: .1;
}
100% {
transform: scale(19);
opacity: 1;
fill: transparent;
stroke: #ddd810;
stroke-width: 0;
}
}
@keyframes animateHeart {
0% {
transform: scale(0.2);
}
40% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
@keyframes animateHeartOut {
0% {
transform: scale(1.4);
}
100% {
transform: scale(1);
}
}
3 Réponses :
Vous ne devriez pas changer votre classe svg, mais plutôt générer des classes uniques pour les entrées et les lier avec des étiquettes. Vous devez également changer tous les sélecteurs d'identifiant en sélecteurs de classe, car votre entrée n'est plus seule. Voici un violon mis à jour avec deux boutons fonctionnels:
<input type="checkbox" class="checkbox-ins" id="input1"/>
<label for="input1">
<svg id="heart-svg" viewBox="467 392 58 57" xmlns="http://www.w3.org/2000/svg" >
<g id="Group" fill="none" fill-rule="evenodd" transform="translate(467 392)">
<path d="M25.82,40.35a1.67,1.67,0,0,0,.31.94l.94,1.36a1.8,1.8,0,0,0,1.36.73h3.24A1.76,1.76,0,0,0,33,42.65L34,41.29a1.69,1.69,0,0,0,.32-.94v-2H25.92A13.27,13.27,0,0,0,25.82,40.35Zm-5-14.53a9.11,9.11,0,0,0,2.3,6.06,14.75,14.75,0,0,1,2.72, 4.81h8.36a16,16,0,0,1,2.72-4.81,8.92,8.92,0,0,0,2.3-6.06,9.2,9.2,0,0,0-18.4,0ZM30,21.64a4.19,4.19,0,0,0-4.18,4.18.9.9,0,0, 1-.84.84.89.89,0,0,1-.83-.84A5.84,5.84,0,0,1,30,20a.89.89,0,0,1,.84.83A.9.9,0,0,1,30,21.64Z" id="heart" fill="#AAB8C2"/> <circle id="main-circ" fill="#ddd810" opacity="0" cx="29.5" cy="29.5" r="1.5"/>
<g id="grp7" opacity="0" transform="translate(7 6)"> <circle id="oval1" fill="#ddd810" cx="2" cy="6" r="2"/> <circle id="oval2" fill="#ddd810" cx="5" cy="2" r="2"/>
</g>
<g id="grp6" opacity="0" transform="translate(0 28)"> <circle id="oval1" fill="#ddd810" cx="2" cy="7" r="2"/>
<circle id="oval2" fill="#ddd810" cx="3" cy="2" r="2"/>
</g>
<g id="grp3" opacity="0" transform="translate(52 28)"> <circle id="oval2" fill="#ddd810" cx="2" cy="7" r="2"/> <circle id="oval1" fill="#ddd810" cx="4" cy="2" r="2"/>
</g>
<g id="grp2" opacity="0" transform="translate(44 6)"> <circle id="oval2" fill="#ddd810" cx="5" cy="6" r="2"/> <circle id="oval1" fill="#ddd810" cx="2" cy="2" r="2"/> </g>
<g id="grp5" opacity="0" transform="translate(14 50)"> <circle id="oval1" fill="#ddd810" cx="6" cy="5" r="2"/> <circle id="oval2" fill="#ddd810" cx="2" cy="2" r="2"/> </g>
<g id="grp4" opacity="0" transform="translate(35 50)"> <circle id="oval1" fill="#ddd810" cx="6" cy="5" r="2"/> <circle id="oval2" fill="#ddd810" cx="2" cy="2" r="2"/> </g>
<g id="grp1" opacity="0" transform="translate(24)"> <circle id="oval1" fill="#ddd810" cx="2.5" cy="3" r="2"/> <circle id="oval2" fill="#ddd810" cx="7.5" cy="2" r="2"/> </g>
</g>
</svg>
</label>
<input type="checkbox" class="checkbox-ins" id="input2"/>
<label for="input2">
<svg id="heart-svg" viewBox="467 392 58 57" xmlns="http://www.w3.org/2000/svg" >
<g id="Group" fill="none" fill-rule="evenodd" transform="translate(467 392)">
<path d="M25.82,40.35a1.67,1.67,0,0,0,.31.94l.94,1.36a1.8,1.8,0,0,0,1.36.73h3.24A1.76,1.76,0,0,0,33,42.65L34,41.29a1.69,1.69,0,0,0,.32-.94v-2H25.92A13.27,13.27,0,0,0,25.82,40.35Zm-5-14.53a9.11,9.11,0,0,0,2.3,6.06,14.75,14.75,0,0,1,2.72, 4.81h8.36a16,16,0,0,1,2.72-4.81,8.92,8.92,0,0,0,2.3-6.06,9.2,9.2,0,0,0-18.4,0ZM30,21.64a4.19,4.19,0,0,0-4.18,4.18.9.9,0,0, 1-.84.84.89.89,0,0,1-.83-.84A5.84,5.84,0,0,1,30,20a.89.89,0,0,1,.84.83A.9.9,0,0,1,30,21.64Z" id="heart" fill="#AAB8C2"/> <circle id="main-circ" fill="#ddd810" opacity="0" cx="29.5" cy="29.5" r="1.5"/>
<g id="grp7" opacity="0" transform="translate(7 6)"> <circle id="oval1" fill="#ddd810" cx="2" cy="6" r="2"/> <circle id="oval2" fill="#ddd810" cx="5" cy="2" r="2"/>
</g>
<g id="grp6" opacity="0" transform="translate(0 28)"> <circle id="oval1" fill="#ddd810" cx="2" cy="7" r="2"/>
<circle id="oval2" fill="#ddd810" cx="3" cy="2" r="2"/>
</g>
<g id="grp3" opacity="0" transform="translate(52 28)"> <circle id="oval2" fill="#ddd810" cx="2" cy="7" r="2"/> <circle id="oval1" fill="#ddd810" cx="4" cy="2" r="2"/>
</g>
<g id="grp2" opacity="0" transform="translate(44 6)"> <circle id="oval2" fill="#ddd810" cx="5" cy="6" r="2"/> <circle id="oval1" fill="#ddd810" cx="2" cy="2" r="2"/> </g>
<g id="grp5" opacity="0" transform="translate(14 50)"> <circle id="oval1" fill="#ddd810" cx="6" cy="5" r="2"/> <circle id="oval2" fill="#ddd810" cx="2" cy="2" r="2"/> </g>
<g id="grp4" opacity="0" transform="translate(35 50)"> <circle id="oval1" fill="#ddd810" cx="6" cy="5" r="2"/> <circle id="oval2" fill="#ddd810" cx="2" cy="2" r="2"/> </g>
<g id="grp1" opacity="0" transform="translate(24)"> <circle id="oval1" fill="#ddd810" cx="2.5" cy="3" r="2"/> <circle id="oval2" fill="#ddd810" cx="7.5" cy="2" r="2"/> </g>
</g>
</svg>
</label>
svg {
cursor: pointer;
overflow: visible;
width: 60px;
margin: 0;
margin-bottom: -45px;
}
svg #heart {
transform-origin: center;
animation: animateHeartOut .3s linear forwards;
}
svg #main-circ {
transform-origin: 29.5px 29.5px;
}
.checkbox-ins {
display: none;
}
.checkbox-ins:checked+label svg #heart {
transform: scale(0.2);
fill: #ddd810;
animation: animateHeart .3s linear forwards .25s;
}
.checkbox-ins:checked+label svg #main-circ {
transition: all 2s;
animation: animateCircle .3s linear forwards;
opacity: 1;
}
.checkbox-ins:checked+label svg #grp1 {
opacity: 1;
transition: .1s all .3s;
}
.checkbox-ins:checked+label svg #grp1 #oval1 {
transform: scale(0) translate(0, -30px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
.checkbox-ins:checked+label svg #grp1 #oval2 {
transform: scale(0) translate(10px, -50px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
.checkbox-ins:checked+label svg #grp2 {
opacity: 1;
transition: .1s all .3s;
}
.checkbox-ins:checked+label svg #grp2 #oval1 {
transform: scale(0) translate(30px, -15px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
.checkbox-ins:checked+label svg #grp2 #oval2 {
transform: scale(0) translate(60px, -15px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
.checkbox-ins:checked+label svg #grp3 {
opacity: 1;
transition: .1s all .3s;
}
.checkbox-ins:checked+label svg #grp3 #oval1 {
transform: scale(0) translate(30px, 0px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
.checkbox-ins:checked+label svg #grp3 #oval2 {
transform: scale(0) translate(60px, 10px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
.checkbox-ins:checked+label svg #grp4 {
opacity: 1;
transition: .1s all .3s;
}
.checkbox-ins:checked+label svg #grp4 #oval1 {
transform: scale(0) translate(30px, 15px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
.checkbox-ins:checked+label svg #grp4 #oval2 {
transform: scale(0) translate(40px, 50px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
.checkbox-ins:checked+label svg #grp5 {
opacity: 1;
transition: .1s all .3s;
}
.checkbox-ins:checked+label svg #grp5 #oval1 {
transform: scale(0) translate(-10px, 20px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
.checkbox-ins:checked+label svg #grp5 #oval2 {
transform: scale(0) translate(-60px, 30px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
.checkbox-ins:checked+label svg #grp6 {
opacity: 1;
transition: .1s all .3s;
}
.checkbox-ins:checked+label svg #grp6 #oval1 {
transform: scale(0) translate(-30px, 0px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
.checkbox-ins:checked+label svg #grp6 #oval2 {
transform: scale(0) translate(-60px, -5px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
.checkbox-ins:checked+label svg #grp7 {
opacity: 1;
transition: .1s all .3s;
}
.checkbox-ins:checked+label svg #grp7 #oval1 {
transform: scale(0) translate(-30px, -15px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
.checkbox-ins:checked+label svg #grp7 #oval2 {
transform: scale(0) translate(-55px, -30px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
.checkbox-ins:checked+label svg #grp2 {
opacity: 1;
transition: .1s opacity .3s;
}
.checkbox-ins:checked+label svg #grp3 {
opacity: 1;
transition: .1s opacity .3s;
}
.checkbox-ins:checked+label svg #grp4 {
opacity: 1;
transition: .1s opacity .3s;
}
.checkbox-ins:checked+label svg #grp5 {
opacity: 1;
transition: .1s opacity .3s;
}
.checkbox-ins:checked+label svg #grp6 {
opacity: 1;
transition: .1s opacity .3s;
}
.checkbox-ins:checked+label svg #grp7 {
opacity: 1;
transition: .1s opacity .3s;
}
@keyframes animateCircle {
40% {
transform: scale(10);
opacity: 1;
fill: #ddd810;
}
55% {
transform: scale(11);
opacity: 1;
fill: #ddd810;
}
65% {
transform: scale(12);
opacity: 1;
fill: #ddd810;
}
75% {
transform: scale(13);
opacity: 1;
fill: transparent;
stroke: #ddd810;
stroke-width: .5;
}
85% {
transform: scale(17);
opacity: 1;
fill: transparent;
stroke: #ddd810;
stroke-width: .2;
}
95% {
transform: scale(18);
opacity: 1;
fill: transparent;
stroke: #ddd810;
stroke-width: .1;
}
100% {
transform: scale(19);
opacity: 1;
fill: transparent;
stroke: #ddd810;
stroke-width: 0;
}
}
@keyframes animateHeart {
0% {
transform: scale(0.2);
}
40% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
@keyframes animateHeartOut {
0% {
transform: scale(1.4);
}
100% {
transform: scale(1);
}
}
si je passe l'identifiant de l'étiquette pour l'animation ne fonctionne pas. j'ai essayé ça
OK je vois. Vos animations sont liées à # checkbox-ins: coché + libellé . Essayez de changer le sélecteur d'id en classe dans votre CSS et votre balisage. dans votre css, remplacez tous les # checkbox-ins par .checkbox-ins et dans votre balisage id = "checkbox-ins" par class = "checkbox-ins" . Cependant, vous devez toujours générer des identifiants uniques pour les entrées et les transmettre aux étiquettes
Oui, il n'y a que des problèmes à venir si iChangez le nom de l'étiquette en même temps que la valeur css doit également changer, cela fonctionnera, je pense, il est possible de changer comme ça
J'ai aimé ça et j'ai changé le fichier css # checkbox-ins en .checkbox- ins alors aussi une certaine animation ne fonctionne pas
Certains? Cela signifie que certains le font? Avez-vous également modifié vos libellés for = "checkbox-ins ? Et êtes-vous sûr que tous les sélecteurs de votre css ont été modifiés?
continuons cette discussion dans le chat .
continuons cette discussion dans le chat .
c'est un moyen possible de vous contacter s'il vous plaît dites
stackoverflow.com/questions/54529293/… - Veuillez vérifier ce lien J'ai des problèmes à ce sujet aussi
Comme @Elijah Ellanski le mentionne dans sa réponse, le problème est lié à votre utilisation des identifiants.
Vous n'êtes pas censé avoir plusieurs instances du même identifiant, elles doivent être uniques. En refactorisant votre code (html et css) pour utiliser des classes à la place et en utilisant des identifiants uniques si nécessaire, vous pouvez résoudre ce problème.
Voici ma suggestion:
<input type="checkbox" id="checkbox-ins<?php echo $p_id; ?>" class="checkbox-ins"/>
<label for="checkbox-ins<?php echo $p_id; ?>">
<svg id="heart-svg<?php echo $p_id; ?>" viewBox="467 392 58 57" xmlns="http://www.w3.org/2000/svg" >
<g class="Group" fill="none" fill-rule="evenodd" transform="translate(467 392)">
<path d="M25.82,40.35a1.67,1.67,0,0,0,.31.94l.94,1.36a1.8,1.8,0,0,0,1.36.73h3.24A1.76,1.76,0,0,0,33,42.65L34,41.29a1.69,1.69,0,0,0,.32-.94v-2H25.92A13.27,13.27,0,0,0,25.82,40.35Zm-5-14.53a9.11,9.11,0,0,0,2.3,6.06,14.75,14.75,0,0,1,2.72, 4.81h8.36a16,16,0,0,1,2.72-4.81,8.92,8.92,0,0,0,2.3-6.06,9.2,9.2,0,0,0-18.4,0ZM30,21.64a4.19,4.19,0,0,0-4.18,4.18.9.9,0,0, 1-.84.84.89.89,0,0,1-.83-.84A5.84,5.84,0,0,1,30,20a.89.89,0,0,1,.84.83A.9.9,0,0,1,30,21.64Z" class="heart" fill="#AAB8C2"/> <circle class="main-circ" fill="#ddd810" opacity="0" cx="29.5" cy="29.5" r="1.5"/>
<g class="grp7" opacity="0" transform="translate(7 6)"> <circle class="oval1" fill="#ddd810" cx="2" cy="6" r="2"/> <circle class="oval2" fill="#ddd810" cx="5" cy="2" r="2"/>
</g>
<g class="grp6" opacity="0" transform="translate(0 28)"> <circle class="oval1" fill="#ddd810" cx="2" cy="7" r="2"/>
<circle class="oval2" fill="#ddd810" cx="3" cy="2" r="2"/>
</g>
<g class="grp3" opacity="0" transform="translate(52 28)"> <circle class="oval2" fill="#ddd810" cx="2" cy="7" r="2"/> <circle class="oval1" fill="#ddd810" cx="4" cy="2" r="2"/>
</g>
<g class="grp2" opacity="0" transform="translate(44 6)"> <circle class="oval2" fill="#ddd810" cx="5" cy="6" r="2"/> <circle class="oval1" fill="#ddd810" cx="2" cy="2" r="2"/> </g>
<g class="grp5" opacity="0" transform="translate(14 50)"> <circle class="oval1" fill="#ddd810" cx="6" cy="5" r="2"/> <circle class="oval2" fill="#ddd810" cx="2" cy="2" r="2"/> </g>
<g class="grp4" opacity="0" transform="translate(35 50)"> <circle class="oval1" fill="#ddd810" cx="6" cy="5" r="2"/> <circle class="oval2" fill="#ddd810" cx="2" cy="2" r="2"/> </g>
<g class="grp1" opacity="0" transform="translate(24)"> <circle class="oval1" fill="#ddd810" cx="2.5" cy="3" r="2"/> <circle class="oval2" fill="#ddd810" cx="7.5" cy="2" r="2"/> </g>
</g>
</svg>
</label>
svg {
cursor: pointer;
overflow: visible;
width: 60px;
margin: 0;
margin-bottom: -45px;
}
svg .heart {
transform-origin: center;
animation: animateHeartOut .3s linear forwards;
}
svg .main-circ {
transform-origin: 29.5px 29.5px;
}
.checkbox-ins {
display: none;
}
.checkbox-ins:checked+label svg .heart {
transform: scale(0.2);
fill: #ddd810;
animation: animateHeart .3s linear forwards .25s;
}
.checkbox-ins:checked+label svg .main-circ {
transition: all 2s;
animation: animateCircle .3s linear forwards;
opacity: 1;
}
.checkbox-ins:checked+label svg .grp1 {
opacity: 1;
transition: .1s all .3s;
}
.checkbox-ins:checked+label svg .grp1 .oval1 {
transform: scale(0) translate(0, -30px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
.checkbox-ins:checked+label svg .grp1 .oval2 {
transform: scale(0) translate(10px, -50px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
.checkbox-ins:checked+label svg .grp2 {
opacity: 1;
transition: .1s all .3s;
}
.checkbox-ins:checked+label svg .grp2 .oval1 {
transform: scale(0) translate(30px, -15px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
.checkbox-ins:checked+label svg .grp2 .oval2 {
transform: scale(0) translate(60px, -15px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
.checkbox-ins:checked+label svg .grp3 {
opacity: 1;
transition: .1s all .3s;
}
.checkbox-ins:checked+label svg .grp3 .oval1 {
transform: scale(0) translate(30px, 0px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
.checkbox-ins:checked+label svg .grp3 .oval2 {
transform: scale(0) translate(60px, 10px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
.checkbox-ins:checked+label svg .grp4 {
opacity: 1;
transition: .1s all .3s;
}
.checkbox-ins:checked+label svg .grp4 .oval1 {
transform: scale(0) translate(30px, 15px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
.checkbox-ins:checked+label svg .grp4 .oval2 {
transform: scale(0) translate(40px, 50px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
.checkbox-ins:checked+label svg .grp5 {
opacity: 1;
transition: .1s all .3s;
}
.checkbox-ins:checked+label svg .grp5 .oval1 {
transform: scale(0) translate(-10px, 20px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
.checkbox-ins:checked+label svg .grp5 .oval2 {
transform: scale(0) translate(-60px, 30px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
.checkbox-ins:checked+label svg .grp6 {
opacity: 1;
transition: .1s all .3s;
}
.checkbox-ins:checked+label svg .grp6 .oval1 {
transform: scale(0) translate(-30px, 0px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
.checkbox-ins:checked+label svg .grp6 .oval2 {
transform: scale(0) translate(-60px, -5px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
.checkbox-ins:checked+label svg .grp7 {
opacity: 1;
transition: .1s all .3s;
}
.checkbox-ins:checked+label svg .grp7 .oval1 {
transform: scale(0) translate(-30px, -15px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
.checkbox-ins:checked+label svg .grp7 .oval2 {
transform: scale(0) translate(-55px, -30px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
.checkbox-ins:checked+label svg .grp2 {
opacity: 1;
transition: .1s opacity .3s;
}
.checkbox-ins:checked+label svg .grp3 {
opacity: 1;
transition: .1s opacity .3s;
}
.checkbox-ins:checked+label svg .grp4 {
opacity: 1;
transition: .1s opacity .3s;
}
.checkbox-ins:checked+label svg .grp5 {
opacity: 1;
transition: .1s opacity .3s;
}
.checkbox-ins:checked+label svg .grp6 {
opacity: 1;
transition: .1s opacity .3s;
}
.checkbox-ins:checked+label svg .grp7 {
opacity: 1;
transition: .1s opacity .3s;
}
@keyframes animateCircle {
40% {
transform: scale(10);
opacity: 1;
fill: #ddd810;
}
55% {
transform: scale(11);
opacity: 1;
fill: #ddd810;
}
65% {
transform: scale(12);
opacity: 1;
fill: #ddd810;
}
75% {
transform: scale(13);
opacity: 1;
fill: transparent;
stroke: #ddd810;
stroke-width: .5;
}
85% {
transform: scale(17);
opacity: 1;
fill: transparent;
stroke: #ddd810;
stroke-width: .2;
}
95% {
transform: scale(18);
opacity: 1;
fill: transparent;
stroke: #ddd810;
stroke-width: .1;
}
100% {
transform: scale(19);
opacity: 1;
fill: transparent;
stroke: #ddd810;
stroke-width: 0;
}
}
@keyframes animateHeart {
0% {
transform: scale(0.2);
}
40% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
@keyframes animateHeartOut {
0% {
transform: scale(1.4);
}
100% {
transform: scale(1);
}
}
Exemple de travail: https://jsfiddle.net/a4sb7kv6/
<?php
while($getPerPost=mysqli_fetch_assoc($result01))
{
extract($getPerPost);
?>
<input type="checkbox" id="checkbox-ins" class="checkbox-ins<?php echo $p_id; ?>"/>
<label for="checkbox-ins<?php echo $p_id; ?>">
<svg id="heart-svg<?php echo $p_id; ?>" viewBox="467 392 58 57" xmlns="http://www.w3.org/2000/svg" >
<g id="Group" fill="none" fill-rule="evenodd" transform="translate(467 392)">
<path d="M25.82,40.35a1.67,1.67,0,0,0,.31.94l.94,1.36a1.8,1.8,0,0,0,1.36.73h3.24A1.76,1.76,0,0,0,33,42.65L34,41.29a1.69,1.69,0,0,0,.32-.94v-2H25.92A13.27,13.27,0,0,0,25.82,40.35Zm-5-14.53a9.11,9.11,0,0,0,2.3,6.06,14.75,14.75,0,0,1,2.72, 4.81h8.36a16,16,0,0,1,2.72-4.81,8.92,8.92,0,0,0,2.3-6.06,9.2,9.2,0,0,0-18.4,0ZM30,21.64a4.19,4.19,0,0,0-4.18,4.18.9.9,0,0, 1-.84.84.89.89,0,0,1-.83-.84A5.84,5.84,0,0,1,30,20a.89.89,0,0,1,.84.83A.9.9,0,0,1,30,21.64Z" id="heart" fill="#AAB8C2"/> <circle id="main-circ" fill="#ddd810" opacity="0" cx="29.5" cy="29.5" r="1.5"/>
<g id="grp7" opacity="0" transform="translate(7 6)"> <circle id="oval1" fill="#ddd810" cx="2" cy="6" r="2"/> <circle id="oval2" fill="#ddd810" cx="5" cy="2" r="2"/>
</g>
<g id="grp6" opacity="0" transform="translate(0 28)"> <circle id="oval1" fill="#ddd810" cx="2" cy="7" r="2"/>
<circle id="oval2" fill="#ddd810" cx="3" cy="2" r="2"/>
</g>
<g id="grp3" opacity="0" transform="translate(52 28)"> <circle id="oval2" fill="#ddd810" cx="2" cy="7" r="2"/> <circle id="oval1" fill="#ddd810" cx="4" cy="2" r="2"/>
</g>
<g id="grp2" opacity="0" transform="translate(44 6)"> <circle id="oval2" fill="#ddd810" cx="5" cy="6" r="2"/> <circle id="oval1" fill="#ddd810" cx="2" cy="2" r="2"/> </g>
<g id="grp5" opacity="0" transform="translate(14 50)"> <circle id="oval1" fill="#ddd810" cx="6" cy="5" r="2"/> <circle id="oval2" fill="#ddd810" cx="2" cy="2" r="2"/> </g>
<g id="grp4" opacity="0" transform="translate(35 50)"> <circle id="oval1" fill="#ddd810" cx="6" cy="5" r="2"/> <circle id="oval2" fill="#ddd810" cx="2" cy="2" r="2"/> </g>
<g id="grp1" opacity="0" transform="translate(24)"> <circle id="oval1" fill="#ddd810" cx="2.5" cy="3" r="2"/> <circle id="oval2" fill="#ddd810" cx="7.5" cy="2" r="2"/> </g>
</g>
</svg>
</label>
<?php
}
?>
svg {
cursor: pointer;
overflow: visible;
width: 60px;
margin: 0;
margin-bottom: -45px;
}
svg #heart {
transform-origin: center;
animation: animateHeartOut .3s linear forwards;
}
svg #main-circ {
transform-origin: 29.5px 29.5px;
}
.checkbox-ins {
display: none;
}
.checkbox-ins:checked+label svg #heart {
transform: scale(0.2);
fill: #ddd810;
animation: animateHeart .3s linear forwards .25s;
}
.checkbox-ins:checked+label svg #main-circ {
transition: all 2s;
animation: animateCircle .3s linear forwards;
opacity: 1;
}
.checkbox-ins:checked+label svg #grp1 {
opacity: 1;
transition: .1s all .3s;
}
.checkbox-ins:checked+label svg #grp1 #oval1 {
transform: scale(0) translate(0, -30px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
.checkbox-ins:checked+label svg #grp1 #oval2 {
transform: scale(0) translate(10px, -50px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
.checkbox-ins:checked+label svg #grp2 {
opacity: 1;
transition: .1s all .3s;
}
.checkbox-ins:checked+label svg #grp2 #oval1 {
transform: scale(0) translate(30px, -15px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
.checkbox-ins:checked+label svg #grp2 #oval2 {
transform: scale(0) translate(60px, -15px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
.checkbox-ins:checked+label svg #grp3 {
opacity: 1;
transition: .1s all .3s;
}
.checkbox-ins:checked+label svg #grp3 #oval1 {
transform: scale(0) translate(30px, 0px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
.checkbox-ins:checked+label svg #grp3 #oval2 {
transform: scale(0) translate(60px, 10px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
.checkbox-ins:checked+label svg #grp4 {
opacity: 1;
transition: .1s all .3s;
}
.checkbox-ins:checked+label svg #grp4 #oval1 {
transform: scale(0) translate(30px, 15px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
.checkbox-ins:checked+label svg #grp4 #oval2 {
transform: scale(0) translate(40px, 50px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
.checkbox-ins:checked+label svg #grp5 {
opacity: 1;
transition: .1s all .3s;
}
.checkbox-ins:checked+label svg #grp5 #oval1 {
transform: scale(0) translate(-10px, 20px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
.checkbox-ins:checked+label svg #grp5 #oval2 {
transform: scale(0) translate(-60px, 30px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
.checkbox-ins:checked+label svg #grp6 {
opacity: 1;
transition: .1s all .3s;
}
.checkbox-ins:checked+label svg #grp6 #oval1 {
transform: scale(0) translate(-30px, 0px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
.checkbox-ins:checked+label svg #grp6 #oval2 {
transform: scale(0) translate(-60px, -5px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
.checkbox-ins:checked+label svg #grp7 {
opacity: 1;
transition: .1s all .3s;
}
.checkbox-ins:checked+label svg #grp7 #oval1 {
transform: scale(0) translate(-30px, -15px);
transform-origin: 0 0 0;
transition: .5s transform .3s;
}
.checkbox-ins:checked+label svg #grp7 #oval2 {
transform: scale(0) translate(-55px, -30px);
transform-origin: 0 0 0;
transition: 1.5s transform .3s;
}
.checkbox-ins:checked+label svg #grp2 {
opacity: 1;
transition: .1s opacity .3s;
}
.checkbox-ins:checked+label svg #grp3 {
opacity: 1;
transition: .1s opacity .3s;
}
.checkbox-ins:checked+label svg #grp4 {
opacity: 1;
transition: .1s opacity .3s;
}
.checkbox-ins:checked+label svg #grp5 {
opacity: 1;
transition: .1s opacity .3s;
}
.checkbox-ins:checked+label svg #grp6 {
opacity: 1;
transition: .1s opacity .3s;
}
.checkbox-ins:checked+label svg #grp7 {
opacity: 1;
transition: .1s opacity .3s;
}
@keyframes animateCircle {
40% {
transform: scale(10);
opacity: 1;
fill: #ddd810;
}
55% {
transform: scale(11);
opacity: 1;
fill: #ddd810;
}
65% {
transform: scale(12);
opacity: 1;
fill: #ddd810;
}
75% {
transform: scale(13);
opacity: 1;
fill: transparent;
stroke: #ddd810;
stroke-width: .5;
}
85% {
transform: scale(17);
opacity: 1;
fill: transparent;
stroke: #ddd810;
stroke-width: .2;
}
95% {
transform: scale(18);
opacity: 1;
fill: transparent;
stroke: #ddd810;
stroke-width: .1;
}
100% {
transform: scale(19);
opacity: 1;
fill: transparent;
stroke: #ddd810;
stroke-width: 0;
}
}
@keyframes animateHeart {
0% {
transform: scale(0.2);
}
40% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
@keyframes animateHeartOut {
0% {
transform: scale(1.4);
}
100% {
transform: scale(1);
}
}