HTML5怎么制作3D愛心動畫效果

本文小編為大家詳細介紹“HTML5怎么制作3D愛心動畫效果”，內容詳細，步驟清晰，細節處理妥當，希望這篇“HTML5怎么制作3D愛心動畫效果”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

　　實現代碼如下：

　　html代碼：

XML / HTML代碼將內容復制到文本

< div class ='heart3d' >   

< div class ='rib1' > </ div >   

< div class ='rib2' > </ div >   

< div class ='rib3' > </ div >   

< div class ='rib4' > </ div >   

< div class ='rib5' > </ div >   

< div class ='rib6' > </ div >   

< div class ='rib7' > </ div >   

< div class ='rib8' > </ div >   

< div class ='rib9' > </ div >   

< div class ='rib10' > </ div >   

< div class ='rib11' > </ div >   

< div class ='rib12' > </ div >   

< div class ='rib13' > </ div >   

< div class ='rib14' > </ div >   

< div class ='rib15' > </ div >   

< div class ='rib16' > </ div >   

< div class ='rib17' > </ div >   

< div class ='rib18' > </ div >   

< div class ='rib19' > </ div >   

< div class ='rib20' > </ div >   

< div class ='rib21' > </ div >   

< div class ='rib22' > </ div >   

< div class ='rib23' > </ div >   

< div class ='rib24' > </ div >   

< div class ='rib25' > </ div >   

< div class ='rib26' > </ div >   

< div class ='rib27' > </ div >   

< div class ='rib28' > </ div >   

< div class ='rib29' > </ div >   

< div class ='rib30' > </ div >   

< div class ='rib31' > </ div >   

< div class ='rib32' > </ div >   

< div class ='rib33' > </ div >   

< div class ='rib34' > </ div >   

< div class ='rib35' > </ div >   

< div class ='rib36' > </ div >   

</ div >  

　　這么多div，主要是構造愛心的線條區域。

　　CSS代碼：

CSS代碼將內容復制到文本

.heart3d {   

  職位： 絕對;   

  最高：0;   

  右右：0;   

  底部底部：0;   

  左：0;   

  保證金： 自動;   

  寬度：  100px ;   

  高度：  160px ;   

  -webkit-transform-style：保留3d;   

  轉換樣式：reserve-3d;   

  -webkit-animation：旋轉15s無限線性；   

  動畫：旋轉15秒無限線性；   

}   

.heart3d [class ^ = “ rib” ] {   

  職位： 絕對;   

  寬度：  100px ;   

  高度：  160px ;   

  邊框： 實心＃f22613 ;    

  border-width ：  1px 1px  0 0;    

  border- radius：50％50％0/40％50％0;   

}   

.heart3d [class $ = “ 1” ] {   

  -webkit-transform：rotateY（10deg）rotateZ（45deg）translateX（30px ）;   

  轉換：rotateY（10deg）rotateZ（45deg）translateX（30px ）;   

}   

.heart3d [class $ = “ 2” ] {   

  -webkit-transform：rotateY（20deg）rotateZ（45deg）translateX（30px ）;   

  轉換：rotateY（20deg）rotateZ（45deg）translateX（30px ）;   

}   

.heart3d [class $ = “ 3” ] {   

  -webkit-transform：rotateY（30deg）rotateZ（45deg）translateX（30px ）;   

  轉換：rotateY（30deg）rotateZ（45deg）translateX（30px ）;   

}   

.heart3d [class $ = “ 4” ] {   

  -webkit-transform：rotateY（40deg）rotateZ（45deg）translateX（30px ）;   

  轉換：rotateY（40deg）rotateZ（45deg）translateX（30px ）;   

}   

.heart3d [class $ = “ 5” ] {   

  -webkit-transform：rotateY（50deg）rotateZ（45deg）translateX（30px ）;   

  轉換：rotateY（50deg）rotateZ（45deg）translateX（30px ）;   

}   

.heart3d [class $ = “ 6” ] {   

  -webkit-transform：rotateY（60deg）rotateZ（45deg）translateX（30px ）;   

  轉換：rotateY（60deg）rotateZ（45deg）translateX（30px ）;   

}   

.heart3d [class $ = “ 7” ] {   

  -webkit-transform：rotateY（70deg）rotateZ（45deg）translateX（30px ）;   

  轉換：rotateY（70deg）rotateZ（45deg）translateX（30px ）;   

}   

.heart3d [class $ = “ 8” ] {   

  -webkit-transform：rotateY（80deg）rotateZ（45deg）translateX（30px ）;   

  轉換：rotateY（80deg）rotateZ（45deg）translateX（30px ）;   

}   

.heart3d [class $ = “ 9” ] {   

  -webkit-transform：rotateY（90deg）rotateZ（45deg）translateX（30px ）;   

  轉換：rotateY（90deg）rotateZ（45deg）translateX（30px ）;   

}   

.heart3d [class $ = “ 10” ] {   

  -webkit-transform：rotateY（100deg）rotateZ（45deg）translateX（30px ）;   

  轉換：rotateY（100deg）rotateZ（45deg）translateX（30px ）;   

}   

.heart3d [class $ = “ 11” ] {   

  -webkit-transform：rotateY（110deg）rotateZ（45deg）translateX（30px ）;   

  轉換：rotateY（110deg）rotateZ（45deg）translateX（30px ）;   

}   

.heart3d [class $ = “ 12” ] {   

  -webkit-transform：rotateY（120deg）rotateZ（45deg）translateX（30px ）;   

  轉換：rotateY（120deg）rotateZ（45deg）translateX（30px ）;   

}   

.heart3d [class $ = “ 13” ] {   

  -webkit-transform：rotateY（130deg）rotateZ（45deg）translateX（30px ）;   

  轉換：rotateY（130deg）rotateZ（45deg）translateX（30px ）;   

}   

.heart3d [class $ = “ 14” ] {   

  -webkit-transform：rotateY（140deg）rotateZ（45deg）translateX（30px ）;   

  轉換：rotateY（140deg）rotateZ（45deg）translateX（30px ）;   

}   

.heart3d [class $ = “ 15” ] {   

  -webkit-transform：rotateY（150deg）rotateZ（45deg）translateX（30px ）;   

  轉換：rotateY（150deg）rotateZ（45deg）translateX（30px ）;   

}   

.heart3d [class $ = “ 16” ] {   

  -webkit-transform：rotateY（160deg）rotateZ（45deg）translateX（30px ）;   

  轉換：rotateY（160deg）rotateZ（45deg）translateX（30px ）;   

}   

.heart3d [class $ = “ 17” ] {   

  -webkit-transform：rotateY（170deg）rotateZ（45deg）translateX（30px ）;   

  轉換：rotateY（170deg）rotateZ（45deg）translateX（30px ）;   

}   

.heart3d [class $ = “ 18” ] {   

  -webkit-transform：rotateY（180deg）rotateZ（45deg）translateX（30px ）;   

  轉換：rotateY（180deg）rotateZ（45deg）translateX（30px ）;   

}   

.heart3d [class $ = “ 19” ] {   

  -webkit-transform：rotateY（190deg）rotateZ（45deg）translateX（30px ）;   

  轉換：rotateY（190deg）rotateZ（45deg）translateX（30px ）;   

}   

.heart3d [class $ = “ 20” ] {   

  -webkit-transform：rotateY（200deg）rotateZ（45deg）translateX（30px ）;   

  轉換：rotateY（200deg）rotateZ（45deg）translateX（30px ）;   

}   

.heart3d [class $ = “ 21” ] {   

  -webkit-transform：rotateY（210deg）rotateZ（45deg）translateX（30px ）;   

  轉換：rotateY（210deg）rotateZ（45deg）translateX（30px ）;   

}   

.heart3d [class $ = “ 22” ] {   

  -webkit-transform：rotateY（220deg）rotateZ（45deg）translateX（30px ）;   

  轉換：rotateY（220deg）rotateZ（45deg）translateX（30px ）;   

}   

.heart3d [class $ = “ 23” ] {   

  -webkit-transform：rotateY（230deg）rotateZ（45deg）translateX（30px ）;   

  轉換：rotateY（230deg）rotateZ（45deg）translateX（30px ）;   

}   

.heart3d [class $ = “ 24” ] {   

  -webkit-transform：rotateY（240deg）rotateZ（45deg）translateX（30px ）;   

  轉換：rotateY（240deg）rotateZ（45deg）translateX（30px ）;   

}   

.heart3d [class $ = “ 25” ] {   

  -webkit-transform：rotateY（250deg）rotateZ（45deg）translateX（30px ）;   

  轉換：rotateY（250deg）rotateZ（45deg）translateX（30px ）;   

}   

.heart3d [class $ = “ 26” ] {   

  -webkit-transform：rotateY（260deg）rotateZ（45deg）translateX（30px ）;   

  轉換：rotateY（260deg）rotateZ（45deg）translateX（30px ）;   

}   

.heart3d [class $ = “ 27” ] {   

  -webkit-transform：rotateY（270deg）rotateZ（45deg）translateX（30px ）;   

  轉換：rotateY（270deg）rotateZ（45deg）translateX（30px ）;   

}   

.heart3d [class $ = “ 28” ] {   

  -webkit-transform：rotateY（280deg）rotateZ（45deg）translateX（30px ）;   

  轉換：rotateY（280deg）rotateZ（45deg）translateX（30px ）;   

}   

.heart3d [class $ = “ 29” ] {   

  -webkit-transform：rotateY（290deg）rotateZ（45deg）translateX（30px ）;   

  轉換：rotateY（290deg）rotateZ（45deg）translateX（30px ）;   

}   

.heart3d [class $ = “ 30” ] {   

  -webkit-transform：rotateY（300deg）rotateZ（45deg）translateX（30px ）;   

  轉換：rotateY（300deg）rotateZ（45deg）translateX（30px ）;   

}   

.heart3d [class $ = “ 31” ] {   

  -webkit-transform：rotateY（310deg）rotateZ（45deg）translateX（30px ）;   

  轉換：rotateY（310deg）rotateZ（45deg）translateX（30px ）;   

}   

.heart3d [class $ = “ 32” ] {   

  -webkit-transform：rotateY（320deg）rotateZ（45deg）translateX（30px ）;   

  轉換：rotateY（320deg）rotateZ（45deg）translateX（30px ）;   

}   

.heart3d [class $ = “ 33” ] {   

  -webkit-transform：rotateY（330deg）rotateZ（45deg）translateX（30px ）;   

  轉換：rotateY（330deg）rotateZ（45deg）translateX（30px ）;   

}   

.heart3d [class $ = “ 34” ] {   

  -webkit-transform：rotateY（340deg）rotateZ（45deg）translateX（30px ）;   

  轉換：rotateY（340deg）rotateZ（45deg）translateX（30px ）;   

}   

.heart3d [class $ = “ 35” ] {   

  -webkit-transform：rotateY（350deg）rotateZ（45deg）translateX（30px ）;   

  轉換：rotateY（350deg）rotateZ（45deg）translateX（30px ）;   

}   

.heart3d [class $ = “ 36” ] {   

  -webkit-transform：rotateY（360deg）rotateZ（45deg）translateX（30px ）;   

  轉換：rotateY（360deg）rotateZ（45deg）translateX（30px ）;   

}  

　　對這些線條進行渲染，剎車其有3D的視覺效果。

　　然后定義了一組名稱為spin的HTML5動畫：

CSS代碼將內容復制到文本

@ -webkit-keyframes旋轉{   

  至 {   

    -webkit-transform：rotateY（360deg）rotateX（360deg）;   

    變換：rotateY（360deg），rotateX（360deg）;   

  }   

}   

@keyframes spin {   

  至 {   

    -webkit-transform：rotateY（360deg）rotateX（360deg）;   

    變換：rotateY（360deg），rotateX（360deg）;   

  }   

}  

讀到這里，這篇“HTML5怎么制作3D愛心動畫效果”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。