CSS笔记补充

最新推荐文章于 2024-07-18 20:18:47 发布

玖霆

最新推荐文章于 2024-07-18 20:18:47 发布

阅读量50

点赞数

分类专栏： CSS笔记文章标签： css 笔记前端

本文链接：https://blog.csdn.net/m0_73895936/article/details/132908110

版权

CSS笔记专栏收录该内容

3 篇文章 1 订阅

订阅专栏

CSS笔记补充

1.过渡效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过渡效果</title>
</head>
<style>
    .box1 {
        width: 100px;
        height: 100px;
        background-color: black;
        /* 使用过渡让元素变化的过程缓慢一点 */
        /* 过渡属性 */
        transition-property: all;
        /* 过渡颜色 */
        transition-duration: 10s;
        /* 过渡函数 :
        默认值是 ease 表示先快速再慢速、linear 表示匀速、ease-in 表示加速、ease-out 表示减速、ease-in-out 表示先加速再减速*/
        transition-timing-function: ease;
    }

    .box1:hover {
        width: 200px;
        height: 200px;
        background-color: rebeccapurple;
    }

    .box2 {
        width: 100px;
        height: 100px;
        background-color: yellowgreen;
        border-radius: 50px;
        /* 过渡的缩写属性，第一个时间为过渡时间。第二个时间为等待时间 */
        transition: all 2s ease-in;
        margin: 20px auto;
    }

    .box2:hover {
        width: 200px;
        height: 200px;
        background-color: red;
        border-radius: 100px;
    }
</style>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>

2.动画效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画效果</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box1 {
        width: 600px;
        height: 600px;
        border: 5px solid black;
        margin: 10px auto;
        position: relative;
    }

    .box2 {
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
        /* 指定动画名称，指定动画关键帧 */
        animation-name: move1;
        /* 指定动画完成时间 */
        animation-duration: 10s;
        /* 指定动画的动作 */
        animation-timing-function: ease;
        /* 指定动画的播放次数（infinite表示一直播放） */
        animation-iteration-count: infinite;
        /* 指定动画的播放方向：normal(正向) reverse(反向) alternate(正反方向重复运动) alternate-reverse(反正方向重复运动) */
        animation-direction: alternate-reverse;
        /* 动画的播放状态：，默认值是running(播放) paused(暂停) */
        animation-play-state: running;
        /* animation是缩写属性，具体的属性值，没有顺序要求，如果同时设置动画时间和等待时间，第一个是动画时间，第二个是等待时间 */
    }

    /* 鼠标追上暂停 */
    .box2:hover {
        animation-play-state: paused;
    }

    /* 1.定义动画的关键帧，就是将动画的每个细节进行拆分，
       2.父级相对定位，子级绝对定位 */
    @keyframes move1 {
        0% {
            left: 0;
            top: 0;
        }

        25% {
            left: 500px;
            top: 0;
        }

        50% {
            left: 500px;
            top: 500px;
        }

        75% {
            left: 0;
            top: 500px;
        }

        100% {
            left: 0;
            top: 0;
        }
    }
</style>

<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

</html>

3.轮播图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 1080px;
            height: 420px;
            margin: 20px auto;
            border: 1px solid black;
            overflow: hidden;
            position: relative;
        }

        .list {
            width: 5400px;
            height: 420px;
            position: absolute;
            top: 0px;
            left: 0px;
            animation: move1 8s 1s infinite steps(4);
        }

        .list img {
            float: left;
        }

        @keyframes move1 {
            from {
                left: 0px;
            }

            to {
                left: -4320px;
            }
        }
    </style>
</head>

<body>
    <div>
        <div class="box">
            <div class="list">
                <img src="img/a.jpg" alt="">
                <img src="img/b.jfif" alt="">
                <img src="img/c.jfif" alt="">
                <img src="img/d.jpeg" alt="">
                <img src="img/a.jpg" alt="">
            </div>
        </div>
    </div>
</body>

</html>

4.变形效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>变形效果</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: black;
            margin: 0px auto;
            transition: all 1s;
        }

        .box:hover {
            /* transform属性定义变形，每一种变形通过一个变形函数实现，
             translate(50px, 50px)函数用于平移 ，第一个值为左右平移（正左负右），第二个值上下平移（正上负下）
              rotate(360deg)函数表示旋转，单位为deg(正顺负逆)， scale(1.5) 函数表示缩放，skew(30deg)函数表示缩放
              注意：所有的变形函数都可以同时使用*/
            transform: scale(1.5) rotate(360deg) skew(30deg);
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

flex布局

1.弹性盒子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性盒子</title>
    <style>
        .box1 {
            border: 5px solid #000;
            /* 当设置为弹性盒子时子元素就会默认为横向排列 */
            display: flex;
        }

        .box2 {
            border: 5px solid #000;
            margin-top: 10px;
            display: flex;
            /* 表示定义主轴的排列方式 flex-start（从开头正序排列，顺序不变）,flex-end（从结尾正序排列，顺序不变）, 
            flex-center（从中间正序排列，顺序不变），  space-between（分散正序排列，顺序不变）
            space-around（等分正序排列（以第一个盒子为基准），顺序不变）,space-around（等分正序排列（以最后一个盒子为基准），顺序不变）*/
            justify-content: space-around;
            /* 定义辅轴的对齐方式，属性值包括：flex-start(以盒子上边线为基准从头排列，顺序不变)，
            flex-end（以盒子下边线为基准从头正序排列，顺序不变， center（在盒子中间从头等分正序排列，顺序不变）
            baseline（以基线为基准从头正序排列，顺序不变） */
            align-items: baseline;
            /* 定义排列的方向，属性值包括：row按行从头正序布局（默认），row-reverse从尾部按行倒序布局， column从头部按列正序布局 
                                        column-reverse从尾部按列倒序布局*/
            flex-direction: column;
        }


        .a {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .b {
            width: 150px;
            height: 150px;
            background-color: blue;
        }

        .c {
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
        }

        .d {
            width: 200px;
            height: 200px;
            background-color: brown;
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="a"></div>
        <div class="b"></div>
        <div class="c"></div>
        <div class="d"></div>
    </div>
    <div class="box2">
        <div class="a"></div>
        <div class="b"></div>
        <div class="c"></div>
        <div class="d"></div>
    </div>
</body>

</html>

2.弹性盒子换行

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性盒子换行</title>
    <style>
        .box {
            border: 5px solid blueviolet;
            height: 600px;
            width: 1200px;
            display: flex;
            /* flex换行，属性值包括：nowrap（不换行），wrap（从上往下换行），warp-reverse（从下往上换行）*/
            flex-wrap: wrap;
            /* 辅轴方向的排列方式，注意只有换行后，辅轴属性才会生效
            属性值包括：flax-start（从头正序排列）flex-end（从尾正序排列）center（从中间正序排列），
            space-between（等分排列，两端无空间）space-around（等分排列，第一行前无空间）,space-evenly（等分排列，两端有空间） */
            align-content: space-evenly;
        }

        .box div {
            width: 120px;
            height: 120px;
            box-shadow: 0px 0px 2px lightcoral;

        }
    </style>
</head>

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
        <div>13</div>
        <div>14</div>
        <div>15</div>
        <div>16</div>
        <div>17</div>
        <div>18</div>
        <div>19</div>
        <div>20</div>
        <div>21</div>
        <div>22</div>
        <div>23</div>
        <div>24</div>
        <div>25</div>
        <div>26</div>
        <div>27</div>
        <div>28</div>
        <div>29</div>
        <div>30</div>
    </div>
</body>

</html>

3.下拉菜单

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
            list-style: none;
            text-decoration: none;
        }

        header {
            width: 800px;
            height: 50px;
            margin: 10px auto;
            background: linear-gradient(to left top, #F761A1, #8C1BAB);
        }

        nav {
            position: relative;
            align-items: stretch;
        }

        nav ul {
            display: flex;
            justify-content: space-evenly;

        }

        nav ul li {
            margin-top: 10px;
            font-size: 20px;
            font-weight: bold;
        }

        nav ul li a {
            color: wheat;
        }

        .one {
            width: 80px;
            height: 125px;
            background-color: #8C1BAB;
            position: absolute;
            top: 50px;
            right: 175px;
            color: white;
            text-align: center;
            line-height: 30px;
            font-size: 18px;
            display: none;
        }

        .two {
            width: 100px;
            height: 100px;
            background-color: blue;
            text-align: center;
            line-height: 32px;
            position: absolute;
            top: 50px;
            left: 300px;
            display: none;
        }

        a:active .one,
        a:active .two {
            display: block;
        }
    </style>
</head>

<body>
    <header>
        <nav>
            <ul>
                <li><a href="">首页</a></li>
                <li><a href="">列表</a></li>
                <li>
                    <a href="">新闻
                        <div class="two">
                            <p>国内新闻</p>
                            <p>国内新闻</p>
                            <p>国内新闻</p>
                        </div>
                    </a>
                </li>
                <li><a href="">咨询</a></li>
                <li>
                    <a href="">体育
                        <div class="one">
                            <p>英超</p>
                            <p>英超</p>
                            <p>英超</p>
                            <p>英超</p>
                            <p>英超</p>
                        </div>
                    </a>
                </li>
                <li><a href="">娱乐</a></li>
            </ul>
        </nav>
    </header>
</body>

</html>

3.align-self属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            display: flex;
            height: 300px;
            padding: 10px;
            border: 5px solid black;
            justify-content: space-evenly;
            align-items: center;
        }

        .box div {
            height: 100px;
            width: 300px;
            border: 5px solid #ccc;
            text-align: center;
            line-height: 100px;
            font-size: 30px;
            font-weight: bold;
        }

        div:last-of-type {
            /*align-self用法和align-items一样，都是设置辅轴的对齐方式，唯一的区别是该属性只针对本身元素 */
            align-self: flex-end;
        }
    </style>
</head>

<body>
    <div class="box">
        <div>张靓颖</div>
        <div>邓紫棋</div>
        <div>吴宣仪</div>
        <div>张静怡</div>
    </div>
</body>

</html>

4. flex属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            display: flex;
            height: 100px;
            padding: 10px;
            border: 5px solid black;
            justify-content: space-evenly;
        }

        .box div {
            height: 100px;
            border: 5px solid #ccc;
            text-align: center;
            line-height: 100px;
            font-size: 30px;
            font-weight: bold;
        }

        div:nth-of-type(1) {
            /* flex属性，用于分配子元素占用空间比例 */
            flex: 1;
        }
    </style>
</head>

<body>
    <div class="box">
        <div>张靓颖</div>
        <div>邓紫棋</div>
        <div>吴宣仪</div>
        <div>张静怡</div>
    </div>
</body>

</html>

5. Order属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            display: flex;
            height: 100px;
            padding: 10px;
            border: 5px solid black;
            justify-content: space-evenly;
        }

        .box div {
            width: 100px;
            border: 5px solid #ccc;
            text-align: center;
            line-height: 80px;
        }

        .box div:first-of-type {
            /* 对元素进行正常的排序，数值越小越靠前 */
            order: 4;
        }

        .box div:nth-of-type(2) {
            order: 1;
        }

        .box div:nth-of-type(3) {
            order: 3;
        }

        .box div:nth-of-type(4) {
            order: 2;
        }
    </style>
</head>

<body>
    <div class="box">
        <div>张靓颖</div>
        <div>邓紫棋</div>
        <div>吴宣仪</div>
        <div>张静怡</div>
    </div>
</body>

</html>

grid布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            border: 2px solid black;
            /* 定义为grid布局 */
            display: grid;
            /* 使用grid自定义每一列每一个元素的行高.../ 列宽.../ */
            grid: 160px 200px 150px/ 200px 300px 300px;
        }

        .box div {
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
    </div>
</body>

</html>

grid布局（2）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid布局2</title>
    <style>
        .box {
            border: 5px solid black;
            width: 1000px;
            height: 600px;
            margin: 0px auto;
            display: grid;
            /* 表示一行为多少个元素 ：平均分布布局*/
            grid: "b b  . . ."
                "b b  . . ."
                " . . . a a"
                " . . . a a";
            /* 边框的间距 */
            grid-gap: 10px;
            padding: 10px;
        }

        .box div {
            border: 1px solid skyblue;
            padding: 10px;
        }

        div:first-of-type {
            grid-area: b;
        }

        div:nth-of-type(2) {
            grid-area: a;
        }
    </style>
</head>

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
        <div>13</div>
        <div>14</div>
        <div>15</div>
        <div>16</div>
        <div>17</div>
        <div>18</div>
        <div>19</div>
        <div>20</div>
    </div>
</body>

</html>

玖霆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS笔记补充

CSS笔记补充1.过渡效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>过渡效果</title></head><style>
复制链接

扫一扫