五光十色变色龙的制作
生活随笔
收集整理的這篇文章主要介紹了
五光十色变色龙的制作
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
在body里面創(chuàng)建盒子
<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>查看效果圖：
?此制作過(guò)程中需要的圖如下所示：
?
?
?
總結(jié)
以上是生活随笔為你收集整理的五光十色变色龙的制作的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 小葵花妈妈课堂开课了：《ThreadLo
- 下一篇： 移动通信技术的发展历程初