Presentación de pantalla completa CSS puro con animaciones de fantasía
| Autor: | brifiction |
|---|---|
| Views Total: | 3,080 |
| Sitio oficial: | Ir a la web |
| Actualizado: | September 18, 2015 |
| Licencia: | MIT |
Vista prévia
Descripción
Una presentación en pantalla completa de CSS con diapositivas de fantasía o animaciones de grado de torsión basadas en CSS3.
Funcionamiento
Incluya el Modernizr. js requerido en la Página Web.
<script src="js/modernizr.js"></script>
Incluya la hoja de estilo v1. CSS (animación de fundido de diapositivas) o V2. CSS (animación de grado de torsión) en la sección head.
<link rel="stylesheet" href="css/v1.css">
Cree una lista HTML para la proyección de diapositivas en pantalla completa.
<ul class="modernizr-slideshow"> <li><span>Image 01</span><div><h4>1</h4></div></li> <li><span>Image 02</span><div><h4>2</h4></div></li> <li><span>Image 03</span><div><h4>3</h4></div></li> <li><span>Image 04</span><div><h4>4</h4></div></li> <li><span>Image 05</span><div><h4>5</h4></div></li> </ul>
Reemplaza las imágenes de fondo con las tuyas.
.modernizr-slideshow li:nth-child(1) span { background-image: url(1.jpg) }
.modernizr-slideshow li:nth-child(2) span { background-image: url(2.jpg) }
...
.modernizr-slideshow li:nth-child(5) span { background-image: url(5.jpg) }
