欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

HTML5制作3D愛心動(dòng)畫教程 獻(xiàn)給女友浪漫的禮物

  發(fā)布時(shí)間：2014-11-05 14:37:38   作者：佚名   我要評論
這篇文章主要為大家介紹了一個(gè)利用HTML5和CSS3制作的3D愛心動(dòng)畫的教程，可以再任何的時(shí)間地點(diǎn)送給自己的女友，相當(dāng)?shù)睦寺?，關(guān)鍵是代碼相當(dāng)簡單，直接復(fù)制也可以哦

　　誰說程序員不懂得浪漫，看看程序員是怎么浪漫的，今天小編在國外的網(wǎng)站上看到一個(gè)利用HTML5和CSS3制作的3D愛心動(dòng)畫，在情人節(jié)時(shí)送給心愛的人，還是非常不錯(cuò)的。當(dāng)然了。背景我們可以用一些浪漫元素。如加上女朋友漂亮的照片。這樣可以制作一個(gè)廉價(jià)又很有意義的情人節(jié)禮物。大家可以點(diǎn)解DEMO來看看。先上效果圖：

　　實(shí)現(xiàn)代碼如下：

　　html代碼：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class=’heart3d’>  
  2. <div class=’rib1′></div>  
  3. <div class=’rib2′></div>  
  4. <div class=’rib3′></div>  
  5. <div class=’rib4′></div>  
  6. <div class=’rib5′></div>  
  7. <div class=’rib6′></div>  
  8. <div class=’rib7′></div>  
  9. <div class=’rib8′></div>  
  10. <div class=’rib9′></div>  
  11. <div class=’rib10′></div>  
  12. <div class=’rib11′></div>  
  13. <div class=’rib12′></div>  
  14. <div class=’rib13′></div>  
  15. <div class=’rib14′></div>  
  16. <div class=’rib15′></div>  
  17. <div class=’rib16′></div>  
  18. <div class=’rib17′></div>  
  19. <div class=’rib18′></div>  
  20. <div class=’rib19′></div>  
  21. <div class=’rib20′></div>  
  22. <div class=’rib21′></div>  
  23. <div class=’rib22′></div>  
  24. <div class=’rib23′></div>  
  25. <div class=’rib24′></div>  
  26. <div class=’rib25′></div>  
  27. <div class=’rib26′></div>  
  28. <div class=’rib27′></div>  
  29. <div class=’rib28′></div>  
  30. <div class=’rib29′></div>  
  31. <div class=’rib30′></div>  
  32. <div class=’rib31′></div>  
  33. <div class=’rib32′></div>  
  34. <div class=’rib33′></div>  
  35. <div class=’rib34′></div>  
  36. <div class=’rib35′></div>  
  37. <div class=’rib36′></div>  
  38. </div>  

　　這么多div，主要是構(gòu)造愛心的線條區(qū)域。

　　CSS代碼：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .heart3d {   
  2.   position: absolute;   
  3.   top: 0;   
  4.   rightright: 0;   
  5.   bottombottom: 0;   
  6.   left: 0;   
  7.   margin: auto;   
  8.   width: 100px;   
  9.   height: 160px;   
  10.   -webkit-transform-style: preserve-3d;   
  11.   transform-style: preserve-3d;   
  12.   -webkit-animation: spin 15s infinite linear;   
  13.   animation: spin 15s infinite linear;   
  14. }   
  15. .heart3d [class^="rib"] {   
  16.   position: absolute;   
  17.   width: 100px;   
  18.   height: 160px;   
  19.   border: solid #f22613;   
  20.   border-width: 1px 1px 0 0;   
  21.   border-radius: 50% 50% 0 / 40% 50% 0;   
  22. }   
  23. .heart3d [class$="1"] {   
  24.   -webkit-transform: rotateY(10deg) rotateZ(45deg) translateX(30px);   
  25.   transform: rotateY(10deg) rotateZ(45deg) translateX(30px);   
  26. }   
  27. .heart3d [class$="2"] {   
  28.   -webkit-transform: rotateY(20deg) rotateZ(45deg) translateX(30px);   
  29.   transform: rotateY(20deg) rotateZ(45deg) translateX(30px);   
  30. }   
  31. .heart3d [class$="3"] {   
  32.   -webkit-transform: rotateY(30deg) rotateZ(45deg) translateX(30px);   
  33.   transform: rotateY(30deg) rotateZ(45deg) translateX(30px);   
  34. }   
  35. .heart3d [class$="4"] {   
  36.   -webkit-transform: rotateY(40deg) rotateZ(45deg) translateX(30px);   
  37.   transform: rotateY(40deg) rotateZ(45deg) translateX(30px);   
  38. }   
  39. .heart3d [class$="5"] {   
  40.   -webkit-transform: rotateY(50deg) rotateZ(45deg) translateX(30px);   
  41.   transform: rotateY(50deg) rotateZ(45deg) translateX(30px);   
  42. }   
  43. .heart3d [class$="6"] {   
  44.   -webkit-transform: rotateY(60deg) rotateZ(45deg) translateX(30px);   
  45.   transform: rotateY(60deg) rotateZ(45deg) translateX(30px);   
  46. }   
  47. .heart3d [class$="7"] {   
  48.   -webkit-transform: rotateY(70deg) rotateZ(45deg) translateX(30px);   
  49.   transform: rotateY(70deg) rotateZ(45deg) translateX(30px);   
  50. }   
  51. .heart3d [class$="8"] {   
  52.   -webkit-transform: rotateY(80deg) rotateZ(45deg) translateX(30px);   
  53.   transform: rotateY(80deg) rotateZ(45deg) translateX(30px);   
  54. }   
  55. .heart3d [class$="9"] {   
  56.   -webkit-transform: rotateY(90deg) rotateZ(45deg) translateX(30px);   
  57.   transform: rotateY(90deg) rotateZ(45deg) translateX(30px);   
  58. }   
  59. .heart3d [class$="10"] {   
  60.   -webkit-transform: rotateY(100deg) rotateZ(45deg) translateX(30px);   
  61.   transform: rotateY(100deg) rotateZ(45deg) translateX(30px);   
  62. }   
  63. .heart3d [class$="11"] {   
  64.   -webkit-transform: rotateY(110deg) rotateZ(45deg) translateX(30px);   
  65.   transform: rotateY(110deg) rotateZ(45deg) translateX(30px);   
  66. }   
  67. .heart3d [class$="12"] {   
  68.   -webkit-transform: rotateY(120deg) rotateZ(45deg) translateX(30px);   
  69.   transform: rotateY(120deg) rotateZ(45deg) translateX(30px);   
  70. }   
  71. .heart3d [class$="13"] {   
  72.   -webkit-transform: rotateY(130deg) rotateZ(45deg) translateX(30px);   
  73.   transform: rotateY(130deg) rotateZ(45deg) translateX(30px);   
  74. }   
  75. .heart3d [class$="14"] {   
  76.   -webkit-transform: rotateY(140deg) rotateZ(45deg) translateX(30px);   
  77.   transform: rotateY(140deg) rotateZ(45deg) translateX(30px);   
  78. }   
  79. .heart3d [class$="15"] {   
  80.   -webkit-transform: rotateY(150deg) rotateZ(45deg) translateX(30px);   
  81.   transform: rotateY(150deg) rotateZ(45deg) translateX(30px);   
  82. }   
  83. .heart3d [class$="16"] {   
  84.   -webkit-transform: rotateY(160deg) rotateZ(45deg) translateX(30px);   
  85.   transform: rotateY(160deg) rotateZ(45deg) translateX(30px);   
  86. }   
  87. .heart3d [class$="17"] {   
  88.   -webkit-transform: rotateY(170deg) rotateZ(45deg) translateX(30px);   
  89.   transform: rotateY(170deg) rotateZ(45deg) translateX(30px);   
  90. }   
  91. .heart3d [class$="18"] {   
  92.   -webkit-transform: rotateY(180deg) rotateZ(45deg) translateX(30px);   
  93.   transform: rotateY(180deg) rotateZ(45deg) translateX(30px);   
  94. }   
  95. .heart3d [class$="19"] {   
  96.   -webkit-transform: rotateY(190deg) rotateZ(45deg) translateX(30px);   
  97.   transform: rotateY(190deg) rotateZ(45deg) translateX(30px);   
  98. }   
  99. .heart3d [class$="20"] {   
  100.   -webkit-transform: rotateY(200deg) rotateZ(45deg) translateX(30px);   
  101.   transform: rotateY(200deg) rotateZ(45deg) translateX(30px);   
  102. }   
  103. .heart3d [class$="21"] {   
  104.   -webkit-transform: rotateY(210deg) rotateZ(45deg) translateX(30px);   
  105.   transform: rotateY(210deg) rotateZ(45deg) translateX(30px);   
  106. }   
  107. .heart3d [class$="22"] {   
  108.   -webkit-transform: rotateY(220deg) rotateZ(45deg) translateX(30px);   
  109.   transform: rotateY(220deg) rotateZ(45deg) translateX(30px);   
  110. }   
  111. .heart3d [class$="23"] {   
  112.   -webkit-transform: rotateY(230deg) rotateZ(45deg) translateX(30px);   
  113.   transform: rotateY(230deg) rotateZ(45deg) translateX(30px);   
  114. }   
  115. .heart3d [class$="24"] {   
  116.   -webkit-transform: rotateY(240deg) rotateZ(45deg) translateX(30px);   
  117.   transform: rotateY(240deg) rotateZ(45deg) translateX(30px);   
  118. }   
  119. .heart3d [class$="25"] {   
  120.   -webkit-transform: rotateY(250deg) rotateZ(45deg) translateX(30px);   
  121.   transform: rotateY(250deg) rotateZ(45deg) translateX(30px);   
  122. }   
  123. .heart3d [class$="26"] {   
  124.   -webkit-transform: rotateY(260deg) rotateZ(45deg) translateX(30px);   
  125.   transform: rotateY(260deg) rotateZ(45deg) translateX(30px);   
  126. }   
  127. .heart3d [class$="27"] {   
  128.   -webkit-transform: rotateY(270deg) rotateZ(45deg) translateX(30px);   
  129.   transform: rotateY(270deg) rotateZ(45deg) translateX(30px);   
  130. }   
  131. .heart3d [class$="28"] {   
  132.   -webkit-transform: rotateY(280deg) rotateZ(45deg) translateX(30px);   
  133.   transform: rotateY(280deg) rotateZ(45deg) translateX(30px);   
  134. }   
  135. .heart3d [class$="29"] {   
  136.   -webkit-transform: rotateY(290deg) rotateZ(45deg) translateX(30px);   
  137.   transform: rotateY(290deg) rotateZ(45deg) translateX(30px);   
  138. }   
  139. .heart3d [class$="30"] {   
  140.   -webkit-transform: rotateY(300deg) rotateZ(45deg) translateX(30px);   
  141.   transform: rotateY(300deg) rotateZ(45deg) translateX(30px);   
  142. }   
  143. .heart3d [class$="31"] {   
  144.   -webkit-transform: rotateY(310deg) rotateZ(45deg) translateX(30px);   
  145.   transform: rotateY(310deg) rotateZ(45deg) translateX(30px);   
  146. }   
  147. .heart3d [class$="32"] {   
  148.   -webkit-transform: rotateY(320deg) rotateZ(45deg) translateX(30px);   
  149.   transform: rotateY(320deg) rotateZ(45deg) translateX(30px);   
  150. }   
  151. .heart3d [class$="33"] {   
  152.   -webkit-transform: rotateY(330deg) rotateZ(45deg) translateX(30px);   
  153.   transform: rotateY(330deg) rotateZ(45deg) translateX(30px);   
  154. }   
  155. .heart3d [class$="34"] {   
  156.   -webkit-transform: rotateY(340deg) rotateZ(45deg) translateX(30px);   
  157.   transform: rotateY(340deg) rotateZ(45deg) translateX(30px);   
  158. }   
  159. .heart3d [class$="35"] {   
  160.   -webkit-transform: rotateY(350deg) rotateZ(45deg) translateX(30px);   
  161.   transform: rotateY(350deg) rotateZ(45deg) translateX(30px);   
  162. }   
  163. .heart3d [class$="36"] {   
  164.   -webkit-transform: rotateY(360deg) rotateZ(45deg) translateX(30px);   
  165.   transform: rotateY(360deg) rotateZ(45deg) translateX(30px);   
  166. }  

　　對這些線條進(jìn)行渲染，以便其有3D的視覺效果。

　　然后定義了一組名稱為spin的HTML5動(dòng)畫：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. @-webkit-keyframes spin {   
  2.   to {   
  3.     -webkit-transform: rotateY(360deg) rotateX(360deg);   
  4.     transform: rotateY(360deg) rotateX(360deg);   
  5.   }   
  6. }   
  7.   
  8. @keyframes spin {   
  9.   to {   
  10.     -webkit-transform: rotateY(360deg) rotateX(360deg);   
  11.     transform: rotateY(360deg) rotateX(360deg);   
  12.   }   
  13. }  

　　以上就是HTML代碼和CSS代碼實(shí)現(xiàn)的3D愛心動(dòng)畫效果，浪漫的小伙子可以試著學(xué)習(xí)一下哦，又get一個(gè)交友技能，謝謝閱讀，希望能幫到大家，請繼續(xù)關(guān)注腳本之家，我們會(huì)努力分享更多優(yōu)秀的文章。

相關(guān)文章

  • HTML5中的Microdata與歷史記錄管理詳解

    Microdata作為HTML5新增的一個(gè)特性，它允許開發(fā)者在HTML文檔中添加更多的語義信息，以便于搜索引擎和瀏覽器更好地理解頁面內(nèi)容，本文將探討HTML5中Microdata的使用方法以及
    2025-04-21

  • HTML5表格語法格式詳解

    在HTML語法中，表格主要通過< table >、< tr >和< td >3個(gè)標(biāo)簽構(gòu)成,本文通過實(shí)例代碼講解HTML5表格語法格式，感興趣的朋友一起看看吧
    2025-04-21

  • html5的響應(yīng)式布局的方法示例詳解

    這篇文章主要介紹了HTML5中使用媒體查詢和Flexbox進(jìn)行響應(yīng)式布局的方法,簡要介紹了CSS Grid布局的基礎(chǔ)知識和如何實(shí)現(xiàn)自動(dòng)換行的網(wǎng)格布局，感興趣的朋友一起看看吧
    2025-04-21

  • 基于Canvas的Html5多時(shí)區(qū)動(dòng)態(tài)時(shí)鐘實(shí)戰(zhàn)代碼

    本文介紹了如何使用Canvas在HTML5上實(shí)現(xiàn)一個(gè)多時(shí)區(qū)動(dòng)態(tài)時(shí)鐘的web展示,通過Canvas的API,可以繪制出6個(gè)不同城市的時(shí)鐘,并且這些時(shí)鐘可以動(dòng)態(tài)轉(zhuǎn)動(dòng),每個(gè)時(shí)鐘上都會(huì)標(biāo)注出對應(yīng)的
    2025-03-11

  • HTML5 data-*自定義數(shù)據(jù)屬性的示例代碼

    HTML5的自定義數(shù)據(jù)屬性（data-*）提供了一種標(biāo)準(zhǔn)化的方法在HTML元素上存儲額外信息,可以通過JavaScript訪問、修改和在CSS中使用,文章還介紹了高級用法,如存儲JSON數(shù)據(jù)、事
    2025-03-11

  • HTML5中下拉框＜select＞標(biāo)簽的屬性和樣式詳解

    在HTML5中，下拉框（<select>標(biāo)簽）作為表單的重要組成部分，為用戶提供了一個(gè)從預(yù)定義選項(xiàng)中選擇值的方式,本文將深入探討<select>標(biāo)簽的屬性、樣式，并重點(diǎn)介
    2025-02-27

  • HTML5 Input 日期選擇器詳解

    本文介紹了HTML5InputDatePicker對象表示HTML``元素,是HTML5中的新對象,介紹了日期、周、月份、時(shí)間、日期+時(shí)間、本地日期時(shí)間等不同類型的日期選擇器，感興趣的朋友一起看
    2025-02-17

  • HTML5超鏈接和圖片基礎(chǔ)用法詳解

    本文介紹了HTML5中的超鏈接、相對路徑和圖片的使用方法,超鏈接可以創(chuàng)建指向另一個(gè)文檔或頁面內(nèi)部書簽的鏈接,相對路徑用于在同一服務(wù)器內(nèi)部跳轉(zhuǎn)頁面,圖片標(biāo)簽用于引入外部圖
    2025-02-17

  • HTML5超鏈接的創(chuàng)建方法

    本文介紹了HTML5超鏈接的創(chuàng)建方法,包括基本語法、創(chuàng)建圖像超鏈接的邊框去除方法以及錨點(diǎn)鏈接的使用,還討論了超鏈接的四種不同狀態(tài)（link、visited、hover、active）的CSS樣
    2025-02-17

  • HTML5使用details標(biāo)簽：展開/收縮信息

    最近看一些技術(shù)網(wǎng)站發(fā)現(xiàn)了details 標(biāo)簽的妙用，這個(gè)不用js即可實(shí)現(xiàn)展開/收縮信息，很方便用來讓用戶先才答案，然后下面點(diǎn)擊再給出答案的效果，這里就為大家簡單介紹一下，
    2024-11-03

最新評論