Volviendo a ese tutorial, el siguiente paso es comenzar a trabajar en nuestro C-s.
Entonces, necesitamos crear un nuevo archivo C S S y hojas de estilo públicas y llamarlo.
Ese exito
Entonces, si volvemos aquí, vaya a nuestro directorio público, abra hojas de estilos, parece que ya está
abierto y con un clic derecho, cree un archivo nuevo y lo llamaré.
Blanding es sí.
Ahora, si lo abro, está en blanco y está listo para rellenarlo con
todas las reglas que darán estilo a nuestra página principal.
Así que aquí lo primero que queremos hacer es aprender abiertamente Danciu dice que hemos hecho.
Y queremos establecer el color de fondo de los cuerpos para bloquear.
Puede elegir cualquier color que desee.
Simplemente creo que se ve bien desvanecerse en la primera imagen de un fondo negro y luego comenzar el
fundido cruzado desde allí.
Así que he pegado esta regla, lo que hemos hecho es seleccionar la etiqueta del cuerpo y luego establecer el color
de nuevo en hash.
0 0 0 que es lo mismo que negro.
Entonces ahora necesito una posición de todo el contexto y para ver todos los campamentos uno que tenemos se selecciona
con una ID.
Así que vamos a seguir adelante y usar el selector de IDs y ese es el encabezado del tablero de Blanding.
Y lo que hemos hecho aquí es que hemos tomado este texto y le hemos dado un índice z de 1.
Entonces, si no conoce el índice z, básicamente, la página web se puede ver en un plano tridimensional.
Tenemos X e Y que es hacia la izquierda y hacia la derecha hacia arriba y hacia abajo y luego Z que está hacia adelante y hacia atrás en el espacio.
Entonces, si le damos un índice z de 1, se acerca hacia nosotros.
de algo que no sea estático estático es el valor de posición predeterminado para todos sus elementos HTML .
Y eso superó a cualquier otro contenido que tenga un índice z más pequeño que uno para
que podamos usar el índice z tenemos que cambiar la posición
Y si usa estática, en realidad ignorará el índice z.
Ahora lo que queremos hacer es centrar ese texto y el botón.
Así que solo uso el texto alinear el centro aquí y eso nos hará centrados horizontalmente.
Ahora, para que podamos restar verticalmente en la página, en realidad hay muchas maneras
diferentes de hacerlo, pero he descubierto que la manera más fácil de hacerlo es usar la altura de la vista.
Entonces, lo que hacemos aquí es configurar el relleno superior a 40 de altura.
La razón por la que no juego en 50 es porque eso realmente empujaría el contenido hacia abajo.
Y parece que está centrado.
Así que vamos a guardar esta regla, vuelve a actualizar aquí y puedes ver que el fondo es
negro y el inferior.
Sí.
El texto no se puede centrar en la página si queremos que podamos actualizarlo aquí.
Ve un poco mejor.
Entonces, en este momento, el texto de Bienvenida a su campamento apenas se ve, así que lo cambiaremos aquí en un segundo.
Y parece que simplemente tomamos el cabezal de aterrizaje o Slichter, le agregamos un selector H1 y
cambiamos el color a 1.
Así que agrega que aquí iré y deciré que actualices la página y ahora es mucho más fácil ver el texto.
Y cuando tengamos el fondo allí, será más fácil verlo también.
Entonces, lo siguiente que queremos hacer es diseñar la lista desordenada.
Y como sabe que la lista tiene una clase de presentación de diapositivas, es muy fácil para nosotros deslizarla.
Así que tomaré esta regla y la haremos aquí.
página y luego empujemos hacia arriba en la esquina superior izquierda de la página usando posiciones de nivel superior de cero.
Así que hemos seleccionado el honorless con su clase y establecemos la posición fijada dentro de la
altura al 100 por ciento para que ocupe toda la
Y luego, si ven aquí, tenemos el índice z establecido en cero.
Esto asegurará que las imágenes de fondo estén detrás del otro contenido, como son bienvenidas a TU
can texto en nuestra vista o campings.
Establece nuestro estilo de lista.
Y en este movimiento de guerra, la bala señala de esa manera.
No los estamos viendo de los elementos de la lista.
Y, por último, queremos asegurarnos de que no haya margen o relleno.
Entonces ponemos esos dos a cero.
Ahora salvamos volvemos aquí y estábamos frescos.
Podemos ver que las viñetas que estaban en el lado izquierdo aquí han desaparecido.
Ahora realmente necesitamos diseñar los elementos de la lista individual.
regla aquí copiarla traerla a través de Intourist the SS pegarla debajo de la lista no rooteada y lo que tenemos aquí son las
mismas diapositivas de puntos del selector de clase para la lista de listas de honor y luego lo contamos para seleccionar cada
elemento de la lista dentro de la lista, una vez más establecemos el ancho y la altura al 100 por ciento.
Así que vamos a sacar esta
Esta vez lo colocamos en la parte superior absoluta e izquierda o cero nuevamente el tamaño de fondo está configurado para cubrir.
Y esto es lo que permitirá que las imágenes ocupen todo el espacio de la página.
También establecemos nuestra posición de respaldo al 50 por ciento 50 por ciento.
Y esto centrará las imágenes perfectamente en la página.
Entonces, por último, establecemos el fondo feliz de no repetir.
Aquí donde la imagen no se repite vertical u horizontalmente.
y luego usaremos la animación que vamos a crear aquí un poco para desvanecerlas lentamente en una opacidad de una.
Establecemos nuestra opacidad a cero porque queremos que nuestras imágenes comiencen a desvanecerse
Ajustamos nuestro índice z a cero una vez más, esto asegurará que las imágenes de fondo se coloquen
detrás del texto y el botón.
La última propiedad que tenemos aquí se llama animación y esto es algo que no hemos visto antes.
Así que esto nos va a permitir realmente fundir las imágenes dentro y fuera.
Entonces, el nombre de la animación es animación de imagen y esto es arbitrario, puedes llamarlo como quieras
siempre que coincida con la animación que vamos a crear aquí en un minuto y luego le decimos
a la animación que dure por 50 segundos.
Nos aseguramos de que sea lineal y de que lo lineal significa que solo muestra que la
animación tiene la misma velocidad de principio a fin.
Y finalmente le decimos a la animación que bucle infinitamente.
De esa forma, nuestra presentación de diapositivas nunca termina.
Así que podemos decir esto, pero si lo previsualizamos, nada se va a mostrar todavía porque no tenemos configurada
la animación.
Tampoco tenemos imágenes configuradas para los elementos de la lista individual.
Entonces sigamos y hagamos eso ahora.
Así que vamos a copiar todo el elemento de la lista de diapositivas en los selectores secundarios y esto es lo
que va a agregar las imágenes de fondo a los elementos de la lista real.
Así que ahora y podemos ver que hay cinco elementos de la lista comenzando con el niño uno que va desde el cinco
hasta el final.
Le damos a cada uno una imagen de fondo de su rol y si lo desea puede vincular a estos locales o
puede poner las imágenes dentro de su directorio público dentro de un directorio de imágenes.
He seguido adelante y simplemente los cargo usando imágenes o este es un servicio de carga gratuito en la web.
no está destinado a alojar imágenes para usar en su sitio web, pero es una solución rápida para usarlo.
En realidad,
La animación de la primera imagen de fondo comenzará inmediatamente.
Entonces no tenemos que darle un retraso de animación.
Queremos que cada imagen se desvanezca después de 10 segundos de la imagen anterior.
Así que configuro la próxima demora de la animación de la imagen en 10 segundos y luego aumentamos en 10 para cada imagen posterior.
Así que 20 segundos para el tercero 30 para el cuarto y 40 para el quinto que nos llevará
hasta 50 segundos y luego comenzar de nuevo en la Imagen número uno.
nada todavía porque todas las piezas están puestas a cero y no tenemos la animación configurada para fundirlas en una.
Así que de nuevo podemos continuar y decir el aterrizaje en el archivo CSSA, pero no vamos a ver
Así que adelante y hazlo ahora.
Así que voy a copiar la regla de animación de imágenes de fotogramas clave del tutorial y pegarla aquí.
Entonces, lo que estamos haciendo es tomar el selector de fotograma en el cuadro y darle a la animación el nombre de animación de imagen.
Y esto coincide con el valor anterior que teníamos para la propiedad de animación en nuestra presentación
de diapositivas era la regla de cálculo.
Así que tenemos eso en su lugar, lo que haremos es indicar lo que queremos que suceda en varios fotogramas
clave dentro de la animación.
Entonces la animación va del cero por ciento hasta el 100 por ciento, pero solo nos preocupa el cero hasta
el 30 por ciento.
Entonces, lo que sucede aquí es que comenzamos nuestra animación en cero para la opacidad y luego hasta el
10 por ciento.
Dejamos que se desvanezca en el espacio.
Cuando dejamos la opacidad en uno hasta el 20 por ciento y luego la encontramos nuevamente en cero
al 30 por ciento.
animación de la propiedad configurada para facilitar el paso de 0 a 10 y luego también tiende a disminuir.
También notará que tenemos la función de sincronización de
Así que esto nos da una transición más suave ya que Faden de 0 a 1.
Entonces, puede que se pregunten de dónde sacamos estos porcentajes.
Así que seguí y creé un gráfico de la animación para ayudarlo a visualizar mejor lo que está sucediendo aquí.
Entonces, básicamente, tenemos una imagen que se animará de cero segundos a 10 segundos y luego la segunda
imagen pasará de 10 a 20.
El tercero de 20 a 30 y luego de 30 a 40 y luego de 40 a 50 formando cinco imágenes a 10 segundos cada una.
la opacidad de uno y luego de 10 segundos a 15 segundos se desvanecen en la siguiente imagen.
Entonces, de cero segundos a 10 segundos tenemos un Faden de cinco segundos y luego la imagen permanece desteñida a
Así que esto puede ser representado por Azul, que se desvanece en rojo, que es Sollen y luego se desvanece, que es anaranjado.
Así que la primera imagen va del 0 al 10 por ciento y está desapareciendo de cero segundos a cinco
segundos y se mantiene sólida del 10 por ciento al 20 por ciento.
Así que como vemos tenemos del 10 al 20 por ciento de pasty one pasty one.
Y luego, del 20 al 30 por ciento, en realidad está desapareciendo de una a cero.
Y a medida que eso ocurra, la siguiente imagen cuya animación ya ha comenzado en 10 segundos va a estar
en cero a uno, de 10 a 15.
Y eso se superpondrá aquí creando este efecto de fundido cruzado.
Así que esto se mantiene sólido durante cinco segundos y luego tenemos otra superposición, ya que se desvanece
y la siguiente imagen se desvanece y el mismo patrón se repite hasta que lleguemos a 50 segundos, que es el final de nuestra animación.
Esta imagen es sólida.
Y luego volvemos al principio, donde la imagen original se desvanece cuando la
quinta imagen se desvanece y luego comienza todo de nuevo y gira infinitamente.
Así que sigamos y guardemos nuestro US y abramos la cámara web.
Asegúrese de que sus servidores se estén ejecutando y actualizando, y podremos ver la animación en vivo.
Así que esta imagen es visible durante cinco segundos y ahora va a desaparecer a medida que la siguiente imagen se desvanece.
Entonces esa es una transición de cinco segundos.
Tenemos cinco segundos más de esta foto y luego se desvanecerá en la siguiente.
Entonces, lo último que desea hacer es asegurarse de que nuestro control deslizante de fondo funcione en todos los navegadores.
Así que de vuelta al tutorial aquí y en la parte inferior, tengo esta regla aquí o la copio.
Devuélvelo a tu éxito.
sin CSSA. Klowns fue agregado por modernizador y ya teníamos el CD de modernizadores y aquí
mismo si quieres saber cómo encontré que solo busqué up modernizador CDR y elegí el primero.
Pégalo en la parte inferior y verás que tengo esta coma, dice que los navegadores más antiguos admiten las animaciones
Así que acabo de copiar la versión del archivo y luego la agrego a una etiqueta de secuencia de comandos en
el encabezado y establezco el script para que se sincronice, lo que hace que este javascript explote simultáneamente junto
con los otros recursos en la página.
Entonces, si volvemos al CSSA, podemos ver que solo tienen la capacidad establecida en 1.
Entonces, lo que sucederá aquí es que los navegadores que no admitan la integración de sistemas solo
tendrán una diapositiva visible y ese sería el fondo de esa imagen.
Así que eso es todo para el control deslizante de la imagen de fondo de pantalla completa.
Si tiene alguna pregunta al igual que ahora y veré el siguiente video.
Gracias.