2021-11-16webday2

最新推荐文章于 2024-10-09 20:00:56 发布

hellowor|d

最新推荐文章于 2024-10-09 20:00:56 发布

阅读量224

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_46269954/article/details/121358648

版权

今天是web前端教学实习第二天。

所学内容:

1. float 浮动

用来将盒子放在指定的位置排列好,是实现水平布局首选方案.

清除浮动

原因:浮动元素脱离文档流,父级检测不到子级的高度,父级无法撑开

解决方案:1. 直接给父级一个高度 2.在父级使用overflow:hidden

overflow:hidden的作用: 1.隐藏溢出2.解决塌陷3.清除浮动

2.position 定位

relative相对定位:不改变元素特性参考物是原位不脱离文档流

absolute绝对定位:脱离文档流参考物是最近的使用了定位的父级如果没有,就是body

fixed固定定位:脱离文档流参考物是浏览器窗口

static静态定位(默认)

3. tranform 变形

translate 移动

rotate 旋转

多个变形用空格隔开,如

transform: translateY(100px) scale(2) rotate(45deg);

若像下面这样分开写,则会应用最后一个变形.

transform: translateY(100px);
transform: rotate(45deg);
transform: scale(2);

4. animation 动画

定义关键帧动画

@keyframes 动画名{
            关键帧
        }

应用动画

div{
    animation:动画名 动画执行时间[动画延迟时间 动画运动曲线 运动次数 是否反向执行 是否保留最后一帧]
}

5. 课堂案例旋转立方体和轮播图

旋转立方体代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旋转立方体</title>
    <style>

        /* 定义关键帧动画 */

        /* @keyframes 动画名{
            关键帧
        } */
        @keyframes roll {
            from{
                transform: rotateX(0) rotateY(0) rotateZ(0);
            }
            to{
                transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);
            }
        }
    

        *{
            margin: 0;
            padding:0;
        }
        div{
            width: 200px;
            height: 200px;
            background-color: skyblue;
            line-height: 200px;
            text-align: center;
            color: white;
            font-size: 100px;
            position: absolute;
        }
        .wrap{
            padding: 100px;
            background-color: transparent;

            /* animation : 动画名 动画执行时间 
            [动画延迟时间 动画运动曲线 运动次数 是否反向执行 是否保留最后一帧] */
            transform-style: preserve-3d;
            animation: roll 4s 1s linear infinite ;
           
        }
        .wrap div:nth-last-of-type(1){
            transform: rotateY(-90deg) translateZ(100px);
            background-color: tomato;
        }
        .wrap div:nth-last-of-type(2){
            transform: rotateY(90deg) translateZ(100px);
            background-color: turquoise;
        }
        .wrap div:nth-last-of-type(3){
            transform: rotateX(90deg) translateZ(100px);
            background-color: violet;
        }
        .wrap div:nth-last-of-type(4){
            transform: rotateX(-90deg) translateZ(100px);
            background-color: yellow;
        }
        .wrap div:nth-last-of-type(5){
            transform: translateZ(100px);
            background-color: salmon;
        }
        .wrap div:nth-last-of-type(6){
            transform: rotateX(180deg) translateZ(100px);
            background-color: purple;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <!-- 左右 -->
        <div>A</div>
        <div>B</div>
        <!-- 上下 -->
        <div>C</div>
        <div>D</div>
        <!-- 前后 -->
        <div>E</div>
        <div>F</div>
    </div>
</body>
</html>

轮播图代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <style>
        @keyframes move {
            0%{left:0}
            24%{left: 0;}
            26%{left: -400px;}
            49%{left: -400px;}
            51%{left: -800px;}
            74%{left: -800px;}
            76%{left: -1200px}
            98%{left: -1200px}
            100%{left: -1600px;}
        }
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            width: 400px;
            height: 300px;
            background-color: gold;
            position: relative;
            overflow: hidden;
        }
        .move{
            width: 2000px;
            height: 300px;
            background-color: snow;
            position: absolute;
            animation: move 10s linear infinite;
        }
        .move div{
            float: left;
            width: 400px;
            height: 300px;

        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="move">
            <div style="background-color: tomato;"></div>
            <div style="background-color: yellow;"></div>
            <div style="background-color: cyan;"></div>
            <div style="background-color: greenyellow;"></div>
            <div style="background-color: tomato;"></div>   
        </div>
    </div>
</body>
</html>