HTML serial production of 74- infinite scrolling window, 3D conversion module

First, the design infinite scroll a page

There comments are reviewed before learning a lot of knowledge, but may also be some obscure place.

 

    < Style > 

        * { 

            padding : 0 ; 

            margin : 0 ; 

        } 

        div { 

            width : 600px ; 

            height : 188px ; 

            Boder : 1px Solid Black ; 

            margin : 100px Auto ; 

            overflow : hidden ; / * here reviewed overflow: hidden to use , it represents something out of this div a border could not see * / } 
        ul {


        


            width : 2000px ; 

            height : 188px ; 

            background-Color : Black ; 

            Animation : Move Linear 5S Infinite ; / * name of the animation speed is a function of the duration of the delay time cycles cycles pattern * / 

        } 

        @keyframes Move { 

            from { 

                margin-left : 0 ; 

            } 

            to { 

                margin-left : -1200px ; / * this figure is very important, we want to see unlimited pictures chain, then * / 

                / *Li foregoing have a few more elements, so that it can move seamlessly up * / 

            } 

        } 

        UL li { 

            List-style : none ; 

            width : 300px by ; 

            height : 188px ; 

            background-Color : Red ; 

            border : 1px Solid Black ; 

            Box-Sizing : border-Box ; 

            a float : left ; 

        } 

        Image { 

            width : 100% ;

            height : 100% ; } 
        UL: hover { 
            Animation-Play-State : paused ; / * reviewed once the mouse touch image, then stops attribute * / } 
        UL: Li hover { / * to the not selected picture Add mask, note mask is the percentage of impressions for the background color ul tags to achieve, this is fifty percent of black * / 
            Opacity : 0.5 ; } 
        ul li: hover { 
            Opacity : 1 ; / * this priority will be higher, first, because there is a concrete demonstration of a designated property, and second, because we just want the selected picture does not produce masking effect * / } 
............ omitting the code .......... 
<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="image/play_tennis2.jpg" alt=""></li>

    </ul>

</div>

Two, 3D conversion module

1. What 2D and 3D?

2D is flat, only the width and height, without thickness; 3D is a perspective view, with a width and height, as well as the thickness, all of the elements are out of the 2D display by default.

2. How to make a 3D form elements are rendered?

 

And perspective (perpective), like, want to see the 3D effect of an element, just give it a parent element to transform-style property, then set

 

transform-style:persever-3d;

 

    <style>

        *{

            padding:0;

            margin:0;

        }

        .father{

            width: 200px;

            height: 200px;

            background-color: red;

            border:1px solid black;

            margin:100 auto;

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

            Transform : rotateY (80deg) ; 

            Transform-style : the preserve-3D ; / * all the subelements into 3D elements * / 

        } 

        .son { 

            width : 100px ; 

            height : 100px ; 

            background-Color : Yellow ; 

            border : 1px Solid Black ; 

            margin : 0 Auto ; 

            margin-Top : 50px ; 

            Transform :rotateY(45deg);

        }

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

<div class="father">

    <div class="son"></div>

</div>

Third, the source code:

D180_1_RollingInfinitely.html

D181_3DTransformModule.html

address:

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. Park blog: https: //www.cnblogs.com/ruigege0000/

4. Welcomes the focus on micro-channel public number: Fourier transform, personal account only for technical exchanges, backstage reply "gifts" big data acquisition Java Learning Video Package

​