【哈理工实验二】HTML+CSS3 旋转齿轮特效
生活随笔
收集整理的這篇文章主要介紹了
【哈理工实验二】HTML+CSS3 旋转齿轮特效
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
實(shí)現(xiàn)效果：
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>齒輪滾動(dòng)</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%; } /* 設(shè)置背景 */ .back{height: 100%;background: url("../images/bg_03.jpg") no-repeat center; } /* 對(duì)包含所有圖片的div進(jìn)行相對(duì)定位 */ .content{height:787px;width: 800px;position: relative;margin: 0 auto; } /* 對(duì)所有圖片進(jìn)行絕對(duì)定位 */ .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 順時(shí)針 */ .img2,.img4,.img6{animation:rotate1 8s ease-in-out infinite; } /* img3,img5,img7 逆時(shí)針 */ .img3,.img5,.img7{animation:rotate2 8s ease-in-out infinite; }/* 動(dòng)畫(huà) 順時(shí)針 以Z軸為中心*/ @keyframes rotate1{0%{transform:rotateZ(0deg);}100%{transform:rotateZ(360deg);} }/* 動(dòng)畫(huà) 逆時(shí)針 以Z軸為中心*/ @keyframes rotate2{0%{transform:rotateZ(0deg);}100%{transform:rotateZ(-360deg);} }/* 動(dòng)畫(huà) 水滴效果 */ @keyframes water{0%{/*變透明*/opacity: 0;}100%{/*向下移動(dòng)*/top:600px;} }注意：
1、在對(duì)圖片進(jìn)行定位時(shí)，使用子絕父相：如果要對(duì)一個(gè)子元素使用定位，那么應(yīng)該是子元素是絕對(duì)定位，它的父元素為相對(duì)定位。讓子元素 以其父元素為標(biāo)準(zhǔn)來(lái)定位。如果不這么做，子元素就會(huì)相對(duì)body或?yàn)g覽器定位產(chǎn)生不好的效果。
2、對(duì)于水滴的下落，只需在0%時(shí)定義完全透明，100%時(shí)定義平移的位置即可。在相應(yīng)的時(shí)間周期內(nèi)，水滴可自行根據(jù)我們?cè)O(shè)置的元素進(jìn)行運(yùn)動(dòng)。而其他不定義的元素取默認(rèn)值。
喜歡就點(diǎn)個(gè)贊吧~
總結(jié)
以上是生活随笔為你收集整理的【哈理工实验二】HTML+CSS3 旋转齿轮特效的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 【解析】基础实验4-2.5 关于堆的判断
- 下一篇： HTML中引入CSS的三种方式——响应式