CSS 3 五光十色的变色龙动画的制作
生活随笔
收集整理的這篇文章主要介紹了
CSS 3 五光十色的变色龙动画的制作
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
五光十色的變色龍動畫
1、首先在文件中建設image文件夾，把變色龍的三個圖片納入里面
q\其中有兩個是空白的圖片
圖片：
?
2、然后在建設html文件夾，里面寫入div的盒子
3、建設一個div大盒子，然后在里面建設其他的盒子
4、然后寫style樣式，與div盒子里的層層相關
代碼如下：
<title>五光十色的變色龍動畫</title><style>#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></head> <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>預覽：
?
總結
以上是生活随笔為你收集整理的CSS 3 五光十色的变色龙动画的制作的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 不为环境所动就能成功——职场人士寓言(3
- 下一篇： CSS实现圆点