La animación del botón de publicación única está funcionando, pero la publicación múltiple significa que el botón de la primera publicación solo funciona

Tengo código en el botón de “me gusta” con css aquí. El botón de la única fuente de noticias está funcionando, pero el botón de la primera publicación significa que la primera publicación solo funciona si hago clic en el botón de otra publicación. Utilizo la interfaz de usuario posterior y de acuerdo con el recuento total de publicaciones en bucle de la interfaz de usuario, para esta animación html completamente funcional con css que no usa Javascript.

Código CSS:

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); } } 

Código HTML :

 mysqli_fetch_assoc($newsfeed)) { ?>    

Cambie 1) id = “checkbox-ins” a class = “checkbox-ins” 2) En los estilos css, cambie todas las # checkbox-ins a .checkbox-ins

    Intereting Posts