css3做炫酷的变色龙效果

最新推荐文章于 2024-11-10 20:48:21 发布

huxiaoxiao.

最新推荐文章于 2024-11-10 20:48:21 发布

阅读量171

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/lolhuxiaotian/article/details/121526551

版权

CSS动画旋转效果背景图片动画属性绝对定位

关键词由CSDN通过智能技术生成

css 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

布局：

<body>
    <div class="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>

样式：

   <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            font-size: 1em;
            font-family:  'microsoft Yahei';
            /* 变色龙背景只能为白色 */
            background-color: #fff;
        }
        html,body{
            width: 100%;
            height: 100%;
           overflow: hidden;
        }
        .wrap{
            width: 440px;
            height: 440px;
            position: relative;
            left: 50%;
            top: 0;
            margin-left: -220px;
        }
        .bianselong{
            width: 170px;
            height: 170px;
            background-image: url(./img/chameleon.png);
            background-repeat: no-repeat;
            background-position: center center;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -85px;
            margin-top: -85px;
            z-index: 3;
        }
        .bg-box{
            width: 170px;
            height: 170px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -85px;
            margin-top: -85px;
            z-index: 2;
            overflow: hidden;
        }
        .bg{
            width: 984px;
            height: 984px;
            background-image: url(./img/palette.jpg);
            background-repeat: no-repeat;
            position: absolute;
            top: -200px;
            left: -200px;
            animation: animate-rotate 10s linear infinite;
        }
        .dong{
            width: 440px;
            height: 440px;
            background-image: url(./img/dong.png);
            background-repeat: no-repeat;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            animation: animate-rotate 60s linear infinite;
        }
        .dong-box{
            width: 400px;
            height: 400px;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -200px;
            margin-left: -200px;
            z-index: 0;
            overflow: hidden;
        }
        .bg1{
            width: 984px;
            height: 984px;
            background-image: url(./img/palette.jpg);
            background-repeat: no-repeat;
            background-position: center center;
            position: absolute;
            top: -300px;
            left: -300px;
            animation: animate-rotate 10s linear infinite;
        }
        @keyframes animate-rotate{
            0%{
                transform:rotate(0deg);
            }
            100%{
                transform: rotate(360deg);
            }
        }
    </style>

查看效果：