Staff en línea

Página 2 de 2. Precedente  1, 2

[Resuelto] Añadir efecto al LGvote
Tema iniciado por y Añadir a favoritos

[Resuelto] Añadir efecto al LGvote 
el Vie Dic 15, 2017 12:49 pm
staff


Última edición por RinC el Lun Ene 08, 2018 11:54 am, editado 1 vez
Recuerdo del primer mensaje :

[problema]URL::
Versión de mi foro::Phpbb3
Navegador::Chrome
Descripcion del problema:Hum, tengo el código html y CSS que quiero añadir al JS de LGvote pero no consigo hacerlo, tengo que incrustarlo en el JS y no me atrevo. Chalo echame una mano
Capturas de pantalla del problema:
[/problema]
El efecto del code quiero que aparezca en el onclick de los votos me gusta de los post.
Dejo el code.
http://www.opensourcephpbb3.com/h34-soportemew-onclic-megusta
[likepost][time="8/01/18 - 18:54 hrs."][avatar="https://imgfast.net/users/3214/29/54/58/avatars/1-37.png"][userlike="http://www.opensourcephpbb3.com/u1"] Chalo[/userlike][/likepost]
RinC
avatar

¿Que estoy pensando? :

Ni se te ocurra -_- [table class=fecha_up][td]Se modifico:29/03/18 - 17:44 hrs. [/td][/table]


Banner en temas :

♥♥Open♥♥


Color de titulos :

#DF7401


Sombra titulo :

1px 1px 1px #fff


Mensajes :

789


Puntos :

1147


Me gusta :

198


ingreso :

28/01/2015


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

Re: [Resuelto] Añadir efecto al LGvote 
el Lun Dic 18, 2017 7:34 am
staff
Ohhhhh!!! Acabo de verlo desde el móvil! Queda tan lindoooo!!!
[likepost][time="5/01/18 - 9:53 hrs."][avatar="https://imgfast.net/users/3214/29/54/58/avatars/1-37.png"][userlike="http://www.opensourcephpbb3.com/u1"] Chalo[/userlike], [time="5/01/18 - 9 hrs."][avatar="https://imgfast.net/users/3214/29/54/58/avatars/1-37.png"][userlike="http://www.opensourcephpbb3.com/u1"] Chalo[/userlike], a Chalo le gusta tu post[/likepost]
RinC
avatar

¿Que estoy pensando? :

Ni se te ocurra -_- [table class=fecha_up][td]Se modifico:29/03/18 - 17:44 hrs. [/td][/table]


Banner en temas :

♥♥Open♥♥


Color de titulos :

#DF7401


Sombra titulo :

1px 1px 1px #fff


Mensajes :

789


Puntos :

1147


Me gusta :

198


ingreso :

28/01/2015


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

Re: [Resuelto] Añadir efecto al LGvote 
el Lun Dic 25, 2017 6:11 am
staff
Me pasas el code?
RinC
avatar

¿Que estoy pensando? :

Ni se te ocurra -_- [table class=fecha_up][td]Se modifico:29/03/18 - 17:44 hrs. [/td][/table]


Banner en temas :

♥♥Open♥♥


Color de titulos :

#DF7401


Sombra titulo :

1px 1px 1px #fff


Mensajes :

789


Puntos :

1147


Me gusta :

198


ingreso :

28/01/2015


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

Re: [Resuelto] Añadir efecto al LGvote 
el Vie Ene 05, 2018 12:53 pm
staff
ya lo puse en el foro @RinC[likepost][time="11/01/18 - 19:21 hrs."][avatar="https://imgfast.net/users/3214/29/54/58/avatars/14-89.jpg"][userlike="http://www.opensourcephpbb3.com/u14"] RinC[/userlike][/likepost]
Chalo
avatar

¿Que estoy pensando? :

Soy leyenda 3.0 [table class=fecha_up][td]Se modifico:20/11/18 - 12:05 hrs. [/td][/table]


Banner en temas :

https://coverfiles.alphacoders.com/322/32281.jpg


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6852


Puntos :

8948


Me gusta :

1031


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario https://www.opensourcephpbb3.com

Volver arriba Ir abajo

Re: [Resuelto] Añadir efecto al LGvote 
el Vie Ene 05, 2018 1:01 pm
staff
este es el CSS que use aqui pero como que no se ajusta en tu foro

Código:

.heart {
    position: absolute;
}

.heart:nth-child(1) svg {
    opacity: 0;
    -webkit-animation: heartUp 1.4s infinite ease-in;
    animation: heartUp 1.4s infinite ease-in;
}

.heart:nth-child(2) svg {
    position: absolute;
    left: -1.5rem;
    opacity: 0;
    -webkit-animation: heartUp 1.4s 0.3s infinite ease-in;
    animation: heartUp 1.4s 0.3s infinite ease-in;
}

.heart:nth-child(3) svg {
    position: absolute;
    left: 0.2rem;
    opacity: 0;
    -webkit-animation: heartUp 1.4s 0.6s infinite ease-in;
    animation: heartUp 1.4s 0.6s infinite ease-in;
}

svg {
    fill: #f58d9c;
}

@-webkit-keyframes heartUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0) rotate(10deg);
        transform: translate3d(0, 0, 0) rotate(10deg);
    }
    50% {
        opacity: 1;
    }
    65% {
        opacity: 1;
    }
    90% {
        opacity: 0;
        -webkit-transform: translate3d(0, -35vh, 0) scale(1.2) rotate(-10deg);
        transform: translate3d(0, -35vh, 0) scale(1.2) rotate(-10deg);
    }
    100% {
        opacity: 0;
    }
}

@keyframes heartUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0) rotate(10deg);
        transform: translate3d(0, 0, 0) rotate(10deg);
    }
    50% {
        opacity: 1;
    }
    65% {
        opacity: 1;
    }
    90% {
        opacity: 0;
        -webkit-transform: translate3d(0, -35vh, 0) scale(1.2) rotate(-10deg);
        transform: translate3d(0, -35vh, 0) scale(1.2) rotate(-10deg);
    }
    100% {
        opacity: 0;
    }
}
Chalo
avatar

¿Que estoy pensando? :

Soy leyenda 3.0 [table class=fecha_up][td]Se modifico:20/11/18 - 12:05 hrs. [/td][/table]


Banner en temas :

https://coverfiles.alphacoders.com/322/32281.jpg


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6852


Puntos :

8948


Me gusta :

1031


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario https://www.opensourcephpbb3.com

Volver arriba Ir abajo

Re: [Resuelto] Añadir efecto al LGvote 
el Vie Ene 05, 2018 1:06 pm
staff
este es el que queda mejor pruebalo:

Código:

.heart {
    position: absolute;
}
.container-heart{margin-left:210px;margin-top:-60px;position:absolute}
.heart:nth-child(1) svg {
    opacity: 0;
    -webkit-animation: heartUp 1.4s infinite ease-in;
    animation: heartUp 1.4s infinite ease-in;
}

.heart:nth-child(2) svg {
    position: absolute;
    left: -1.5rem;
    opacity: 0;
    -webkit-animation: heartUp 1.4s 0.3s infinite ease-in;
    animation: heartUp 1.4s 0.3s infinite ease-in;
}

.heart:nth-child(3) svg {
    position: absolute;
    left: 0.2rem;
    opacity: 0;
    -webkit-animation: heartUp 1.4s 0.6s infinite ease-in;
    animation: heartUp 1.4s 0.6s infinite ease-in;
}

svg {
    fill: #f58d9c;
}

@-webkit-keyframes heartUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0) rotate(10deg);
        transform: translate3d(0, 0, 0) rotate(10deg);
    }
    50% {
        opacity: 1;
    }
    65% {
        opacity: 1;
    }
    90% {
        opacity: 0;
        -webkit-transform: translate3d(0, -35vh, 0) scale(1.2) rotate(-10deg);
        transform: translate3d(0, -35vh, 0) scale(1.2) rotate(-10deg);
    }
    100% {
        opacity: 0;
    }
}

@keyframes heartUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0) rotate(10deg);
        transform: translate3d(0, 0, 0) rotate(10deg);
    }
    50% {
        opacity: 1;
    }
    65% {
        opacity: 1;
    }
    90% {
        opacity: 0;
        -webkit-transform: translate3d(0, -35vh, 0) scale(1.2) rotate(-10deg);
        transform: translate3d(0, -35vh, 0) scale(1.2) rotate(-10deg);
    }
    100% {
        opacity: 0;
    }
}
[likepost][time="7/01/18 - 18:30 hrs."][avatar="https://imgfast.net/users/3214/29/54/58/avatars/14-89.jpg"][userlike="http://www.opensourcephpbb3.com/u14"] RinC[/userlike][/likepost]
Chalo
avatar

¿Que estoy pensando? :

Soy leyenda 3.0 [table class=fecha_up][td]Se modifico:20/11/18 - 12:05 hrs. [/td][/table]


Banner en temas :

https://coverfiles.alphacoders.com/322/32281.jpg


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6852


Puntos :

8948


Me gusta :

1031


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario https://www.opensourcephpbb3.com

Volver arriba Ir abajo

Re: [Resuelto] Añadir efecto al LGvote 
el Lun Ene 08, 2018 8:36 am
staff
Mensaje automático



[ok]Cierro tema[/ok][likepost][time="11/01/18 - 19:21 hrs."][avatar="https://imgfast.net/users/3214/29/54/58/avatars/14-89.jpg"][userlike="http://www.opensourcephpbb3.com/u14"] RinC[/userlike][/likepost]
Chalo
avatar

¿Que estoy pensando? :

Soy leyenda 3.0 [table class=fecha_up][td]Se modifico:20/11/18 - 12:05 hrs. [/td][/table]


Banner en temas :

https://coverfiles.alphacoders.com/322/32281.jpg


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6852


Puntos :

8948


Me gusta :

1031


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario https://www.opensourcephpbb3.com

Volver arriba Ir abajo

 En la misma categoria


Permisos de este foro:
No puedes responder a temas en este foro.