la producción en serie de HTML 74- ventana de desplazamiento infinito, módulo de conversión 3D

En primer lugar, el diseño de desplazamiento infinita una página

Allí los comentarios son revisados ​​antes de aprender mucho conocimiento, pero también pueden ser un lugar oscuro.

 

    < Style > 

        * { 

            padding : 0 ; 

            margen : 0 ; 

        } 

        div { 

            ancho : 600px ; 

            altura : 188px ; 

            Boder : 1px solid Negro ; 

            margen : 100px automático ; 

            desbordamiento : oculto ; / * desbordamiento aquí revisado: oculto a su uso , que representa algo fuera de este div una frontera no podía ver * / } 
        ul {


        


            Ancho : 2000px ; 

            altura : 188px ; 

            background-color : Negro ; 

            Animación : Mover lineal 5S Infinito ; / * nombre de la velocidad de la animación es una función de la duración del tiempo de retardo patrón de ciclos de ciclos * / 

        } 

        @keyframes Mover { 

            de { 

                margin-left : 0 ; 

            } 

            a { 

                margin-left : -1200px ; / * esta cifra es muy importante, queremos ver la cadena de imágenes ilimitada, entonces * / 

                / *Li anterior tiene algunos elementos más, de modo que pueda moverse sin problemas hasta * / 

            } 

        } 

        UL li { 

            estilo de lista : ninguno ; 

            Ancho : 300 x ; 

            altura : 188px ; 

            background-color : rojo ; 

            frontera : 1px solid negro ; 

            Box-Dimensionamiento : frontera-Box , 

            un flotador : la izquierda ; 

        } 

        imagen { 

            ancho : 100% ;

            altura : 100% ; } 
        UL: hover { 
            Animación-Play-Estado : pausa ; / * revisado imagen toque el ratón una vez, luego se detiene atributo * / } 
        UL: Li libración { / * a la imagen no seleccionado Añadir máscara, la máscara de la nota es el porcentaje de impresiones para el color de fondo ul etiquetas para lograr, este es el cincuenta por ciento de negro * / 
            Opacidad : 0,5 ; } 
        li ul: hover { 
            Opacidad : 1 ; / * este prioridad será mayor, en primer lugar, porque no es una demostración concreta de una propiedad designada, y segundo, porque sólo queremos que la imagen seleccionada no produce efecto de enmascaramiento * / } 
............ omitiendo el código .......... 
<div>


        



        


            


        



        



    <ul> 

        <li> <img src = "image / laptop.jpg" alt = ""> </ li> 

        <li> <img src = "image / play_tennis2.jpg" alt = ""> </ li> 

        < li> <img src = "image / example1.jpg" alt = ""> </ li> 

        <li> <img src = "image / line_left.jpg" alt = ""> </ li> 

        <li> <img src = "image / laptop.jpg" alt = ""> </ li> 

        <li> <img src = "/ play_tennis2.jpg" alt = "imagen"> </ li> 

    </ ul> 

</ div>

Dos, módulo de conversión 3D

1. ¿Qué 2D y 3D?

2D es plana, sólo la anchura y la altura, sin espesor; 3D es una vista en perspectiva, con una anchura y altura, así como el espesor, todos los elementos están fuera de la pantalla en 2D de forma predeterminada.

2. ¿Cómo hacer una forma 3D elementos se representan?

 

Y la perspectiva (Perpective), al igual que, a querer ver el efecto 3D de un elemento, solo le dan un elemento principal para transformar al estilo de la propiedad, a continuación, establecer

 

transformar al estilo: persever-3d;

 

    < Estilo > 

        * { 

            padding : 0 ; 

            margen : 0 ; 

        } 

        .Father { 

            anchura : 200 píxeles ; 

            altura : 200 píxeles ; 

            background-color : rojo ; 

            frontera : negro sólido 1px ; 

            margen : 100 auto ; 

            Perpective : 500px ; / * 透视效果* /

            Transformar : rotateY (80 grados) ; 

            Transformación de estilo : el coto-3D ; / * todos los sub-elementos en elementos 3D * / 

        } 

        .son { 

            ancho : 100px ; 

            altura : 100px ; 

            background-color : amarillo ; 

            frontera : 1px Negro Sólido ; 

            margen : 0 auto ; 

            margin-top : 50px ; 

            Transformar :rotateY (45deg) ; 

        } 

.........省略代码....... 

<div class = "padre"> 

    <div class = "hijo"> </ div> 

</ div>

En tercer lugar, el código fuente:

D180_1_RollingInfinitely.html

D181_3DTransformModule.html

dirección:

https://github.com/ruigege66/HTML_learning/blob/master/D180_1_RollingInfinitely.html

https://github.com/ruigege66/HTML_learning/blob/master/D181_3DTransformModule.html

2.CSDN: https: //blog.csdn.net/weixin_44630050

3. Parque blog: https: //www.cnblogs.com/ruigege0000/

4. aprecia la importancia número público de micro-canales: transformada de Fourier, cuenta personal sólo para los intercambios técnicos, contestación detrás del escenario "regalos" gran adquisición de datos de Java aprendizaje vídeo del paquete

​