实验四HTML5CSS3齿轮滚动(CSS3动画、变形)

1、实验四HTML5CSS3齿轮滚动（CSS3动画、变形）01.HTMLvhtmllang=en齿轮动画css.cssbody,htmlheight:100%;/设置背景.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;/齿轮转动/keyframesrotate10%transform:rotateZ(0deg);100%transform:rotateZ(360deg)