【哈理工实验二】HTML+CSS3 旋转齿轮特效
生活随笔
收集整理的這篇文章主要介紹了
【哈理工实验二】HTML+CSS3 旋转齿轮特效
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
實現效果：
HTML部分代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>齒輪滾動</title><link rel="stylesheet" href="css/index.css"> </head> <body> <div class="back"><div class="content"><div class="img1"></div><div class="img2"></div><div class="img3"></div><div class="img4"></div><div class="img5"></div><div class="img6"></div><div class="img7"></div><div class="img8"></div><div class="img9"></div><div class="img10"></div><div class="img11"></div></div> </div> </body> </html>CSS部分代碼：
*{margin: 0;padding: 0; } body,html{height: 100%; } /* 設置背景 */ .back{height: 100%;background: url("../images/bg_03.jpg") no-repeat center; } /* 對包含所有圖片的div進行相對定位 */ .content{height:787px;width: 800px;position: relative;margin: 0 auto; } /* 對所有圖片進行絕對定位 */ .content div{position: absolute; } /* 水滴 */ .img1{height: 50px;width: 50px;top: 191px;left: 391px;background: url("../images/icon-1.png") no-repeat center;animation:water 2s ease-in-out infinite; }/* 左邊第一大 */ .img7{height: 252px;width: 242px;top: 87px;left: 54px;background: url("../images/icon-7.png") no-repeat center; } /* 左邊第二大 */ .img4{height: 148px;width: 144px;top: 203px;left: 272px;background: url("../images/icon-4.png") no-repeat center; } /* 左邊最小 */ .img2{height: 75px;width: 73px;top: 103px;left: 4px;background: url("../images/icon-2.png") no-repeat center; } /* 左邊身體的手 */ .img8{height: 50px;width: 50px;top: 286px;left: 268px;background: url("../images/icon-8.png") no-repeat center; } /* 右邊第一大 */ .img6{height: 214px;width: 194px;top: 96px;left: 455px;background: url("../images/icon-6.png") no-repeat center; } /* 右邊第二大 */ .img3{height: 116px;width: 121px;top: 54px;left: 600px;background: url("../images/icon-3.png") no-repeat center; } /* 右邊最小 */ .img5{height: 117px;width: 112px;top: 245px;left: 403px;background: url("../images/icon-5.png") no-repeat center; } /* 右邊男手 */ .img9{height: 50px;width: 50px;top: 310px;left: 513px;background: url("../images/icon-9.png") no-repeat center; } /* 右邊女手 */ .img10{height: 50px;width: 50px;top: 242px;left: 619px;background: url("../images/icon-10.png") no-repeat center; } /* 人物背景 */ .img11{height: 709px;width: 788px;bottom: -2px;background: url("../images/img.png") no-repeat center;} /* img2,img4,img6 順時針 */ .img2,.img4,.img6{animation:rotate1 8s ease-in-out infinite; } /* img3,img5,img7 逆時針 */ .img3,.img5,.img7{animation:rotate2 8s ease-in-out infinite; }/* 動畫 順時針 以Z軸為中心*/ @keyframes rotate1{0%{transform:rotateZ(0deg);}100%{transform:rotateZ(360deg);} }/* 動畫 逆時針 以Z軸為中心*/ @keyframes rotate2{0%{transform:rotateZ(0deg);}100%{transform:rotateZ(-360deg);} }/* 動畫 水滴效果 */ @keyframes water{0%{/*變透明*/opacity: 0;}100%{/*向下移動*/top:600px;} }注意：
1、在對圖片進行定位時，使用子絕父相：如果要對一個子元素使用定位，那么應該是子元素是絕對定位，它的父元素為相對定位。讓子元素 以其父元素為標準來定位。如果不這么做，子元素就會相對body或瀏覽器定位產生不好的效果。
2、對于水滴的下落，只需在0%時定義完全透明，100%時定義平移的位置即可。在相應的時間周期內，水滴可自行根據我們設置的元素進行運動。而其他不定義的元素取默認值。
喜歡就點個贊吧~
總結
以上是生活随笔為你收集整理的【哈理工实验二】HTML+CSS3 旋转齿轮特效的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【解析】基础实验4-2.5 关于堆的判断
- 下一篇： 【详细解析】基础实验4-2.6 目录树