Como criar o efeito dos círculos e quadrados em um site?

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.

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.


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.


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

flowxd disse:

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.

Clique 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í:


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.

Revisa Transiciones en CSS, aca unos enlaces que te pueden ayudar:

- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
- https://www.psdahtmlpasoapaso.com/blog/7-increibles-efectos-de-transicion-con-css3/