制作一個小黃鴨轉圈跳舞的頁面。
阿新 • • 發佈：2018-12-16
for 發現 相對定位 infinite 音頻 學習 edi 位置 圖形
我們來制作一個小黃鴨轉圈跳舞的頁面。
分析一下
1、分析一下這個頁面，要完成這些效果，一共需要3步：
- 把鴨子都放到一個盒子當中
- 在盒子裏，把每個鴨子的位置擺好
- 讓盒子旋轉
2、讓鴨子在盒子中的位置擺好，需要怎麽做：
- 先讓鴨子站在圓心的位置（需要先了解父相子絕定位方式）
- 沿一個方向移動一個半徑的距離（3d）
- 每個鴨子旋轉一個角度，讓鴨子均勻的分布一圈
開始寫代碼
要用到的知識包括幾個HTML標簽和一部分的css知識。
先把圖片放到頁面裏邊。
先來在頁面中添加一個img標簽，將小黃鴨跳舞的gif圖放到標簽中
<img src="img/001.gif" >這個時候，可以看到，頁面中已經有一個小黃鴨了。
把圖片放到一個盒子裏邊
<div class="box">
<img src="img/001.gif" >
</div>這個時候盒子看不到，我們通過選擇器，來給盒子添加一個邊框，好看到它
<style>
.box{
border: 1px solid red;
}
</style>盒子很大，比鴨子大很多。
我們把盒子的大小設置成跟鴨子圖片的大小一樣
.box{
border: 1px solid red;
width: 140px;
height: 172px;
}接下來呢，讓小黃鴨顯示在頁面的中間。
.box{
border: 1px solid red;
width: 140px;
height: 172px;
/*margin-right: auto ;*/
/*margin-left: auto ;*/
margin: 0 auto;
}這個時候，盒子跟盒子裏的鴨子都居中了。
我們再添加其他的鴨子。
<div class="box"> <img src="img/001.gif"> <img src="img/002.gif"> <img src="img/003.gif"> <img src="img/004.gif"> <img src="img/005.gif"> <img src="img/006.gif"> <img src="img/007.gif"> <img src="img/008.gif"> <img src="img/009.gif"> </div>
發現鴨子是豎著排成一列的
我們先要把所有的鴨子放到圍繞旋轉的圓心處，所以，所有的鴨子應該是在同一個位置。怎麽把鴨子都放在圓心處呢。我們需要先學習一個定位方式：父相子絕定位。
重要內容補充-定位方式的講解
相對定位，絕對定位。
重要內容補充-3D圖形布局講解
需要進行3D布局的元素，父元素加上一個樣式：
transform-style: preserve-3d;只加上這個，沒有效果，需要跟transform配合使用
transform-style: preserve-3d;/*設置旋轉繞X軸*/
transform: rotateX(-10deg); 開始寫代碼
把所有鴨子放到同一個位置
利用父相子絕定位，把父盒子設置成相對定位，子盒子設置成絕對定位
.box{
border: 1px solid red;
width: 140px;
height: 172px;
/*margin-right: auto ;*/
/*margin-left: auto ;*/
margin: 0 auto;
position: relative;
}
img{
position: absolute;
}讓鴨子面向不同的方向，在360度內均勻分布
設置父盒子的3D效果，給每個圖片添加一個類名，給每個圖片，設置不同的旋轉角度。
<div class="box">
<img src="img/001.gif" class="img1">
<img src="img/002.gif" class="img2">
<img src="img/003.gif" class="img3">
<img src="img/004.gif" class="img4">
<img src="img/005.gif" class="img5">
<img src="img/006.gif" class="img6">
<img src="img/007.gif" class="img7">
<img src="img/008.gif" class="img8">
<img src="img/009.gif" class="img9">
</div><style>
.box {
border: 1px solid red;
width: 140px;
height: 172px;
/*margin-right: auto ;*/
/*margin-left: auto ;*/
margin: 0 auto;
position: relative;
transform-style: preserve-3d;
}
img {
position: absolute;
}
.img1 {
transform: rotateY(0deg);
}
.img2 {
transform: rotateY(40deg);
}
.img3 {
transform: rotateY(80deg);
}
.img4 {
transform: rotateY(120deg);
}
.img5 {
transform: rotateY(160deg);
}
.img6 {
transform: rotateY(200deg);
}
.img7 {
transform: rotateY(240deg);
}
.img8 {
transform: rotateY(280deg);
}
.img9 {
transform: rotateY(320deg);
}
</style>這個時候，鴨子都在圓點，面向了不同的角度，在讓它們向前跨一步，就分散成了一個圓
<style>
.box {
border: 1px solid red;
width: 140px;
height: 172px;
/*margin-right: auto ;*/
/*margin-left: auto ;*/
margin: 0 auto;
position: relative;
transform-style: preserve-3d;
}
img {
position: absolute;
}
.img1 {
transform: rotateY(0deg) translateZ(300px);
}
.img2 {
transform: rotateY(40deg) translateZ(300px);
}
.img3 {
transform: rotateY(80deg) translateZ(300px);
}
.img4 {
transform: rotateY(120deg) translateZ(300px);
}
.img5 {
transform: rotateY(160deg) translateZ(300px);
}
.img6 {
transform: rotateY(200deg) translateZ(300px);
}
.img7 {
transform: rotateY(240deg) translateZ(300px);
}
.img8 {
transform: rotateY(280deg) translateZ(300px);
}
.img9 {
transform: rotateY(320deg) translateZ(300px);
}
</style>但其實沒有看到圍城圓的效果，我們把父盒子在x軸旋轉一個角度，就可以體現出來。同時，加一個
margin-top: 150px;
.box {
border: 1px solid red;
width: 140px;
height: 172px;
/*margin-right: auto ;*/
/*margin-left: auto ;*/
margin: 0 auto;
position: relative;
transform-style: preserve-3d;
transform: rotateX(-20deg);
margin-top: 150px;
}可以看到，已經形成一個圓了。
添加動畫
/*定義一個動畫*/
@keyframes xuanzhuan {
0% {
transform: rotateX(-20deg) rotateY(0deg)
}
100% {
transform: rotateX(-20deg) rotateY(360deg)
}
}
.box {
border: 1px solid red;
width: 140px;
height: 172px;
/*margin-right: auto ;*/
/*margin-left: auto ;*/
margin: 0 auto;
position: relative;
transform-style: preserve-3d;
transform: rotateX(-20deg);
margin-top: 150px;
/*綁定動畫*/
animation: xuanzhuan 10s;
/*動畫無限循環播放*/
animation-iteration-count: infinite;
/*速度線性播放*/
animation-timing-function: linear;
}添加背景音樂
<audio src="media/小黃鴨音頻.mp3" autoplay="autoplay" loop="loop"></audio>chrome瀏覽器不能自動播放問題解決
瀏覽器輸入
chrome://flags/#autoplay-policy將 Autoplay policy 改為
No user gesture is required完整代碼
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
@keyframes xuanzhuan {
0% {
transform: rotateX(-20deg) rotateY(0deg)
}
100% {
transform: rotateX(-20deg) rotateY(360deg)
}
}
body {
background-color: #313131;
}
.box {
width: 154px;
height: 186px;
margin: 150px auto;
position: relative;
transform-style: preserve-3d;
transform: rotateX(-20deg);
animation: xuanzhuan 15s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.box > div {
position: absolute;
}
</style>
</head>
<body>
<audio src="media/小黃鴨音頻.mp3" loop="loop" autoplay="autoplay"></audio>
<div class="box">
<div style="transform: rotateY(0deg) translateZ(300px)">
<img src="img/001.gif" >
</div>
<div style="transform: rotateY(40deg) translateZ(300px) ">
<img src="img/002.gif" >
</div>
<div style="transform: rotateY(80deg) translateZ(300px) ">
<img src="img/003.gif" >
</div>
<div style="transform: rotateY(120deg) translateZ(300px) ">
<img src="img/004.gif" >
</div>
<div style="transform: rotateY(160deg) translateZ(300px) ">
<img src="img/005.gif" >
</div>
<div style="transform: rotateY(200deg) translateZ(300px) ">
<img src="img/006.gif" >
</div>
<div style="transform: rotateY(240deg) translateZ(300px) ">
<img src="img/007.gif" >
</div>
<div style="transform: rotateY(280deg) translateZ(300px) ">
<img src="img/008.gif" >
</div>
<div style="transform: rotateY(320deg) translateZ(300px) ">
<img src="img/009.gif" >
</div>
</div>
</body>
</html>制作一個小黃鴨轉圈跳舞的頁面。