CSS3-制作五光十色的变色龙动画

CSS3-制作五光十色的变色龙动画

1.在body标签中建立div标签引入css样式 代码如下：

  <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>

css样式

2.设置背景墙效果

     .wrap{

            width: 440px;

            height: 440px;

            position: relative;

            left: 50%;

            top: 0;

            margin-left: -220px;

        }

3.设置变色龙图片和效果

        .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;