五光十色变色龙的制作

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

正在修炼web的小芮

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

阅读量83

点赞数

分类专栏： css3 文章标签： css3

本文链接：https://blog.csdn.net/m0_71814235/article/details/125915645

版权

css3 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

在body里面创建盒子

<body>
    <div id="wrap">
        <div class="bianselong"></div>
        <div class="bg-box">
            <div class="bg"></div>
        </div>
        <div class="dong"></div>
        <div class="dong-box">
            <div class="bg1"></div>
        </div>
</div>
</body>

然后再css样式里面去修饰它：

    <style type="text/css">
        body,div{
            margin: 0;
            padding: 0;
        }
        body{
            font: 1em 'microsoft Yahei';
        }
        #wrap{
            position: relative;
            width: 440px;
            height: 440px;
            left: 50%;
            margin-left: -220px;
        }
        .bianselong,.bg-box{
            position: absolute;
            width: 170px;
            height: 170px;
            left: 50%;
            margin-left: -85px;
            top: 50%;
            margin-top: -85px;
        }
        .bianselong{
            z-index: 3;
            background: url(./images/chameleon.png) no-repeat;
        }
        .bg-box{
            overflow: hidden;
            z-index: 2;
        }
        .bg,.bg1{
            position: absolute;
            width: 984px;
            height: 984px;
            background: url(./images/palette.jpg) no-repeat;
            animation: rotate 10s linear infinite;
        }
        .bg{
            left: -200px;
            top: -200px;
        }
        .bg1{
            left: -300px;
            top: -300px;
        }
        .dong{
            position: absolute;
            width: 440px;
            height: 440px;
            background: url(./images/dong.png) no-repeat;
            z-index: 1;
            animation: rotate 60s linear infinite;
        }
        .dong-box{
            position: absolute;
            width: 400px;
            height: 400px;
            left: 50%;
            margin-left: -200px;
            top: 50%;
            margin-top: -200px;
            border-radius: 50%;
            z-index: 0;
            overflow: hidden;
        }
        @keyframes rotate{
            0%{
                transform: rotate(0);
            }
            100%{
                transform: rotate(360deg);
            }
        }
    </style>

查看效果图：