张宇_20210113张宇

知识点总结

1、transform

这个属性允许你将元素旋转,缩放, 移动,倾斜等。

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box{
                margin: 200px auto;
                width: 300px;
                transform-style: preserve-3d;
                /*position: relative;*/ 
            }
            .box:hover{
                transform: rotateY(180deg);
                transition: all 1.5s linear;
            }   
            .box1{
                width: 300px;
                height: 300px;
                background-color: aquamarine;
                text-align: center;
                line-height: 300px;
                border-radius:50%;
                font-size: 30px;
                /*position: absolute;*/ 
            }
            .box2{
                width: 300px;
                height: 300px;
                background-color: aqua;
                text-align: center;
                line-height: 300px;
                border-radius:50%;
                font-size: 30px;
                transform: rotateY(180deg);
                margin-top: -300px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="box1">云创动力</div>
            <div class="box2">IT特种兵</div>
        </div>
    </body>
</html>

2、导航栏的设置

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box{
                width: 100px;
                height: 50px;
                transform-style: preserve-3d;
                position: relative;
                transition: all 1s ease;
                }
            .box1{
                width: 100px;
                height: 50px;
                text-align: center;
                line-height: 50px;
                position: absolute;
                background-color: darkgrey;
                transform: translateZ(25px);
            }
            .box2{
                width: 100px;
                height: 50px;
                position: absolute;
                text-align: center;
                line-height: 50px;
                background-color: azure;
                transform: translateY(25px) rotateX(-90deg);
            }   
            .box:hover{ 
                transform: rotateX(90deg);
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="box1">云创动力</div>
            <div class="box2">IT特种兵</div>
        </div>
    </body>
</html>

3、旋转相册

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .body{
                perspective: 800px;
            }
            .box{
                width: 300px;
                height: 380px;
                transform-style: preserve-3d;
                position: relative;
                margin: 200px auto;
                
                animation: rotatu 6s linear infinite;
            }
            .box>div{
                width: 300px;
                height: 380px;
                position: absolute;
                left: 0;
                top: 0;
                background-image: url(img/img1.png);
                background-size: cover;
            }
            .box>div:nth-child(1){
                transform:  translateZ(450px);
            }
            .box>div:nth-child(2){
                transform: rotateY(60deg) translateZ(450px);
            }
            .box>div:nth-child(3){
                transform: rotateY(120deg) translateZ(450px);
            }
            .box>div:nth-child(4){
                transform: rotateY(180deg) translateZ(450px);
            }
            .box>div:nth-child(5){
                transform: rotateY(240deg) translateZ(450px);
            }
            .box>div:nth-child(6){
                transform: rotateY(300deg) translateZ(450px);
            }
            @keyframes rotatu{
                from{
                    transform: rotateX(-20deg) rotateY(0deg);
                }
                to{
                    transform: rotateX(-20deg) rotateY(360deg);
                }
            }
            .box:hover{
                animation-play-state: paused;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </body>
</html>

4、正常布局流

4.1

​ 正常布局流(normal flow)是指在不对页面进行任何布局控制时,浏览器默认的HTML布局方式。

4.2浮动(float)
{
    float: left;//或者right
}
4.5清除浮动
footer {
    clear: both;
        }

clear 可以取三个值:

  • left :停止任何活动的左浮动

  • right :停止任何活动的右浮动

  • both :停止任何活动的左右浮动

    4.6总结
    • 脱离文档流,不占原来的文档流位置
    • 浮动元素在父元素中所占的面积的有效高度为0
    • 非浮动元素的外边距不能用于它们和浮动元素之间来创建空间

心得体会

​ 今天学习的内容主要是实践,可以发现我的动手能力比较差,通过练习实现了元素的旋转,缩放,倾斜等,比较有问题的关于图标的旋转、导航栏还有相册的制作,在不断的调试下成功实现想要的效果,对transformtranslate@keyframes等有了基础认识。

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1