day11

A今天学了什么

1.水立方体

应用 transform: perspective（） 和transform-style:preserve-3d 实现立体效果

Html 源码：
        

            

            

            

            

            

            

        
CSS源码：
*{
                margin: 0;
                padding: 0;
            }
            @keyframes anima{
                0%{
                    transform:perspective(800px)  rotateX(72deg);
                }
                25%{
                    transform:perspective(800px)  rotateX(144deg);
                }
                50%{
                transform:perspective(800px)  rotateX(216deg);
                }
                75%{
                    transform:perspective(800px)  rotateX(288deg);
                }
                100%{
                    transform:perspective(800px)  rotateX(360deg);
                }
            }
            .box{
                width: 200px;
                height: 200px;
                position: relative;
                margin-left: auto;
                margin-right: auto;
                margin-top: 100px;
                transform-style:preserve-3d ;
                background: red;
            /*transform: rotate(45deg);*/
                animation:anima 5s infinite ease-in-out;
                /*transform:perspective(800px)  rotateX(45deg);*/
            }
            .box>div{
                border: 1px solid black;
                width: 200px;
                height: 200px;
                position: absolute;
                left: 0;
                top: 0;
            }
            .box>.one{
                transform: translateZ(100px) ; 
            }
            .box>.two{
                transform: translateZ(-100px) ;
            }
            .box>.three{
                transform:translateX(100px) rotateY(90deg);
            }
            .box>.four{
                transform:translateX(-100px) rotateY(90deg);
            }
            .box>.five{
                transform:translateY(100px) rotateX(90deg);
            }
            .box>.six{
                transform:translateY(-100px) rotateX(90deg);
            }
            

2.快捷标签语法

li*10  创建10个li
li{$$}*10  创建10个内容自增的 li
li.aa*10  创建10个class为aa的li
li.aa$*10  创建10个class为aa1开始自增的li
li#aa*10  创建10个id为aa的li
自带属性写在中括号里
a[href="#"]#b$*10

B今天学会了什么

1.水立方体

应用 transform: perspective（） 和transform-style:preserve-3d 实现立体效果

Html 源码：
        

            

            

            

            

            

            

        
CSS源码：
*{
                margin: 0;
                padding: 0;
            }
            @keyframes anima{
                0%{
                    transform:perspective(800px)  rotateX(72deg);
                }
                25%{
                    transform:perspective(800px)  rotateX(144deg);
                }
                50%{
                transform:perspective(800px)  rotateX(216deg);
                }
                75%{
                    transform:perspective(800px)  rotateX(288deg);
                }
                100%{
                    transform:perspective(800px)  rotateX(360deg);
                }
            }
            .box{
                width: 200px;
                height: 200px;
                position: relative;
                margin-left: auto;
                margin-right: auto;
                margin-top: 100px;
                transform-style:preserve-3d ;
                background: red;
            /*transform: rotate(45deg);*/
                animation:anima 5s infinite ease-in-out;
                /*transform:perspective(800px)  rotateX(45deg);*/
            }
            .box>div{
                border: 1px solid black;
                width: 200px;
                height: 200px;
                position: absolute;
                left: 0;
                top: 0;
            }
            .box>.one{
                transform: translateZ(100px) ; 
            }
            .box>.two{
                transform: translateZ(-100px) ;
            }
            .box>.three{
                transform:translateX(100px) rotateY(90deg);
            }
            .box>.four{
                transform:translateX(-100px) rotateY(90deg);
            }
            .box>.five{
                transform:translateY(100px) rotateX(90deg);
            }
            .box>.six{
                transform:translateY(-100px) rotateX(90deg);
            }
            

2.快捷标签语法

li*10  创建10个li
li{$$}*10  创建10个内容自增的 li
li.aa*10  创建10个class为aa的li
li.aa$*10  创建10个class为aa1开始自增的li
li#aa*10  创建10个id为aa的li
自带属性写在中括号里
a[href="#"]#b$*10

C今天没掌握什么

都掌握了