¿Cómo crear el efecto de los círculos y cuadrados en un sitio web?

  • Autor Autor Husky30
  • Fecha de inicio Fecha de inicio
Husky30

Husky30

Gamma
Verificación en dos pasos activada
Verificado por Whatsapp
He intentado encontrar ayuda en foros o tutoriales, pero este efecto exacto no lo encuentro, se trata del efecto de los circulos que se miran debajo de "Enlaces institucionales" y los cuadrados que están arriba: Esta es la URL :

http://www.cleb.gob.ve/cleb6/

Adjunto imagen donde se ve el sector y elementos que tiene los efectos que menciono. Gracias de antemano a quien pueda echarme una mano.
 

Adjuntos

  • Efectos web.webp
    Efectos web.webp
    35,2 KB · Visitas: 40
Están buenos los efectos, le dí una mirada por arriba. No es el mismo objeto que se transforma, son dos objetos diferentes. Por ejemplo el circulo blanco tiene un efecto rotate.

CSS: 
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);

El segundo círculo, el marrón, está oculto y por debajo del primero con una posición absoluta. La animación que tiene es la siguiente. También deberías cambiarle la opacidad de 0 a 100.

CSS: 
-webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    transform: translateY(100%);

Es bastante más complejo que solo estos dos códigos, pero para que te guíes. Saludos.
 
flowxd dijo:
Están buenos los efectos, le dí una mirada por arriba. No es el mismo objeto que se transforma, son dos objetos diferentes. Por ejemplo el circulo blanco tiene un efecto rotate.

CSS: 
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);

El segundo círculo, el marrón, está oculto y por debajo del primero con una posición absoluta. La animación que tiene es la siguiente. También deberías cambiarle la opacidad de 0 a 100.

CSS: 
-webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    transform: translateY(100%);

Es bastante más complejo que solo estos dos códigos, pero para que te guíes. Saludos.
Hacer clic para expandir...

Gracias, es algo complejo por lo que veo, ayer estuve revisando opciones para colocarle alguna función interactiva al sitio.
 
y por cierto el efecto de arriba de lineas rojas como seria con uso de canva ? o me equivoco ? ,porque yo que sepa con un div creo que seria complicado
 
El efecto de rotar se lo aplicas directamente al elemento que contiene la imagen, y el efecto del círculo marrón que aparece se lo aplicas a un nuevo elemento que colocarás justo por encima del de la imagen. La estructura HTML sería algo así:

HTML: 
<div class="contenedor">
    <div class="capa-superior">(Con contenido opcional si es conveniente)</div>
    <img class="rotar src="URL/válida">
</div>

A la clase CSS de 'capa-superior' puedes aplicarle varios efectos. Es habitual poner un color de fondo transparente al 100%, y cuando pones el cursor sobre la imagen 🙂hover), este se pone transparente al 40%, por decir algo, y con una transición de 0.3 segundos (transition: all .3s ease). No es fácil pero tampoco es que sea difícil de implementar.
 
Hay que estar conectado o registrado para responder aquí.
Atrás
Arriba