css网格小案例包括渐变、逐帧动画等

最新推荐文章于 2024-01-28 01:39:04 发布

战斗中的老段

最新推荐文章于 2024-01-28 01:39:04 发布

阅读量147

点赞数

分类专栏： flex 文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_48203828/article/details/125986624

版权

flex 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

1、效果图
在这里插入图片描述
2、相对应详细代码

<!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>网格布局3*3里边呈现出逐帧动画并渐变</title>
    <style>
        div {
            /* width:470px; */
            /* height: 300px; */
            /* border: 1px solid #666; */
            /* 改元素为网格容器 */
            display: grid;
            /*  */
            grid-template-columns: 150px 150px 150px;
            grid-template-rows: 150px 150px 150px;
            /* background-color: purple; */
            /* 上下间距20px */
            grid-gap: 20px;
        }

        .b1 {
            background-color: purple;
        }

        /* 鼠标触发事件 */
        .b1:hover {
            background-color: red;
            color: blue;
            font-size: 20px;
        }

        /* 径向渐变 */
        .b2 {
            /* background-color: red; */
            background: radial-gradient(transparent, green);
        }

        /* 径向渐变图片背景 */
        .b3 {
            background: radial-gradient(transparent, pink), url(img/shu.jpeg);
            /* 指定背景图像的大小 */
            background-size: 100% 100%;
            background-position: -23px 0px;
        }

        .b4 {
            background-color: green;
            background-image: url(img/mingren.png);
            animation: b4 5s steps(16) infinite;
        }

        @keyframes b4 {

            /* 水平位置  垂直位置 */
            from {
                background-position: -60px 0px;
                /* background-color: green; */
            }

            to {
                background-position: -60px -3072px;
                /* background-color: red; */

            }
        }

        .b5 {
            /* background-color: pink; */
            background-image: url(img/b.png);
            animation: b5 3s steps(5) infinite;
        }

        @keyframes b5 {
            from {
                background-position: 0px 0px;
            }

            to {
                background-position: 0 -691px;
            }
        }

        .b6 {
            background-image: url(img/mingren.png);
            animation: b6 5s steps(16) infinite;
        }

        @keyframes b6 {

            /* 水平位置  垂直位置 */
            from {
                background-position: -60px 0px;
                background-color: green;
            }

            to {
                background-position: -60px -3072px;
                background-color: blue;

            }
        }

        .b7 {

            background: linear-gradient(pink, blue);
        }

        .b8 {
            background: linear-gradient(green 50%, yellow 20%);
        }

        .b9 {
            background: linear-gradient(to right, orange 50%, yellow 50%);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="b1"><span>鼠标触发事件</span></div>
        <div class="b2"></div>
        <div class="b3"></div>
        <div class="b4"></div>
        <div class="b5"></div>
        <div class="b6"></div>
        <div class="b7"></div>
        <div class="b8"></div>
        <div class="b9"></div>
    </div>
</body>

</html>