實驗四HTML5CSS3齒輪滾動(CSS3動畫、變形)

1、實驗四HTML5CSS3齒輪滾動（CSS3動畫、變形）01.HTMLvhtmllang=en齒輪動畫css.cssbody,htmlheight:100%;/設(shè)置背景.sectionheight:100%;background:url(./img/bg_03.jpg)no-repeatcenter;rightheight:787px;width:800px;position:relative;margin:0auto;.rightdivposition:absolute;/左邊第一個/iconlheight:70px;width:70px;/top:190px;left:391px;/marg

2、in-top:10px;margin-left:45px;/左邊第2個/icon2height:250px;width:250px;/top:85px;left:54px;/margin-top:50px;margin-left:45px;/左邊第3個/icon3height:150px;width:145px;/top:200px;left:270px;/margin-top:152px;margin-left:286px;/右邊邊第4個/icon4height:110px;width:110px;margin-top:180px;margin-left:422px;/右邊邊第5個/icon

3、5height:190px;width:190px;margin-top:27px;margin-left:480px;/右邊邊第5個/icon6height:120px;width:120px;margin-top:16px;margin-left:660px;/人物圖/.icon7height:709px;width:788px;bottom:-2px;.icon8margin-top:220px;margin-left:276px;.icon9margin-top:235px;margin-left:494px;height:44px;width:47px;.icon10margin-t

4、op:165px;margin-left:614px;height:55px;width:55px;.icon11height:50px;width:50px;margin-top:100px;margin-left:400px;background:url(./img/icon-1.png)no-repeatcenter;animation:water2sease-in-outinfinite;/margin-top:16px;margin-left:660px;/.icon1,.icon2,.icon3,.icon6animation:rotate15sease-in-outinfinite;.icon4,.icon5animation:rotate25sease-in-outinfinite;/水滴向下變化移動/keyframeswater0%opacity:0;100%margin-top:520px;/齒輪轉(zhuǎn)動/keyframesrotate10%transform:rotateZ(0deg);100%transform:rotateZ(360deg)