検索

ホームページ  >  記事  >  ウェブフロントエンド  >  ガールフレンドへのロマンチックなギフト、3D ラブ アニメーションを作成する HTML5 チュートリアル_html5 チュートリアル スキル

ガールフレンドへのロマンチックなギフト、3D ラブ アニメーションを作成する HTML5 チュートリアル_html5 チュートリアル スキル

WBOY
WBOYオリジナル
2016-05-16 15:47:183796ブラウズ

プログラマーはロマンチックになる方法を知らないなんて誰が言ったでしょうか? 今日は、バレンタインデーに愛する人に贈る、HTML5 と CSS3 を使用して作成された 3D の恋愛アニメーションを見てみましょう。 、まだとても良いです。もちろん。背景にロマンチックな要素を使用できます。たとえば、ガールフレンドの美しい写真を追加します。安価でありながら意味のあるバレンタインデーのギフトになります。デモをクリックしてご覧ください。まずレンダリング:

実装コードは次のとおりです:

htmlコード:

XML/HTML コードコンテンツをクリップボードにコピー
  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 クラス='rib15' >div>
  17. <div クラス='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 クラス='rib35' >div>
  37. <div クラス='rib36' >div>
  38. div>

この多次元は、主に愛する心を構築する線条領域です。

CSS代コード：

CSS コード剪定板への复制コンテンツ
  1. .heart3d {
  2. 位置: 絶対;   
  3. トップ: 0;   
  4. 右右: 0;   
  5. 下下: 0;   
  6. 左: 0;   
  7. マージン: 自動;   
  8. 幅: 100px;   
  9. 高さ: 160px;   
  10. -webkit-transform-style: preserve-3d;   
  11. transform-style: preserve-3d;   
  12. -webkit-animation: スピン 15秒 無限 リニア;   
  13. アニメーション: スピン 15 秒 無限 リニア;   
  14. }
  15. .heart3d [クラス^="リブ"] {
  16. 位置: 絶対;   
  17. 幅: 100px;   
  18. 高さ: 160px;   
  19. ボーダー: 実線 #f22613;   
  20. ボーダー幅: 1px 1px 0 0 ;   
  21. 境界線-半径: 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(130度) rotateZ(45度) translateX(30px);   
  73. transform: rotateY(130deg) rotateZ(45deg) translateX(30px);   
  74. }
  75. .heart3d [class$="14"] {
  76. -webkit-transform: rotateY(140度) rotateZ(45度) translateX(30px);   
  77. transform: rotateY(140度) rotateZ(45度) translateX(30px);   
  78. }
  79. .heart3d [class$="15"] {
  80. -webkit-transform: rotateY(150度) rotateZ(45度) translateX(30px);   
  81. transform: rotateY(150deg) rotateZ(45deg) translateX(30px);   
  82. }
  83. .heart3d [class$="16"] {
  84. -webkit-transform: rotateY(160度) rotateZ(45度) translateX(30px);   
  85. transform: rotateY(160度) rotateZ(45度) translateX(30px);   
  86. }
  87. .heart3d [class$="17"] {
  88. -webkit-transform: rotateY(170度) rotateZ(45度) translateX(30px);   
  89. transform: rotateY(170度) rotateZ(45度) translateX(30px);   
  90. }
  91. .heart3d [class$="18"] {
  92. -webkit-transform: rotateY(180度) rotateZ(45度) translateX(30px);   
  93. transform: rotateY(180deg) rotateZ(45deg) translateX(30px);   
  94. }
  95. .heart3d [class$="19"] {
  96. -webkit-transform: rotateY(190度) rotateZ(45度) translateX(30px);   
  97. transform: rotateY(190度) rotateZ(45度) 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(220度) rotateZ(45度) translateX(30px);   
  109. transform: rotateY(220deg) rotateZ(45deg) translateX(30px);   
  110. }
  111. .heart3d [class$="23"] {
  112. -webkit-transform: rotateY(230度) rotateZ(45度) translateX(30px);   
  113. transform: rotateY(230deg) rotateZ(45deg) translateX(30px);   
  114. }
  115. .heart3d [class$="24"] {
  116. -webkit-transform: rotateY(240度) rotateZ(45度) translateX(30px);   
  117. transform: rotateY(240度) rotateZ(45度) translateX(30px);   
  118. }
  119. .heart3d [class$="25"] {
  120. -webkit-transform: rotateY(250度) rotateZ(45度) translateX(30px);   
  121. transform: rotateY(250度) rotateZ(45度) translateX(30px);   
  122. }
  123. .heart3d [class$="26"] {
  124. -webkit-transform: rotateY(260度) rotateZ(45度) translateX(30px);   
  125. transform: rotateY(260度) rotateZ(45度) translateX(30px);   
  126. }
  127. .heart3d [class$="27"] {
  128. -webkit-transform: rotateY(270度) rotateZ(45度) translateX(30px);   
  129. transform: rotateY(270度) rotateZ(45度) translateX(30px);   
  130. }
  131. .heart3d [class$="28"] {
  132. -webkit-transform: rotateY(280度) rotateZ(45度) translateX(30px);   
  133. transform: rotateY(280度) rotateZ(45度) translateX(30px);   
  134. }
  135. .heart3d [class$="29"] {
  136. -webkit-transform: rotateY(290度) rotateZ(45度) 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(340度) rotateZ(45度) translateX(30px);   
  157. transform: rotateY(340度) rotateZ(45度) translateX(30px);   
  158. }
  159. .heart3d [class$="35"] {
  160. -webkit-transform: rotateY(350度) rotateZ(45度) translateX(30px);   
  161. transform: rotateY(350度) rotateZ(45度) translateX(30px);   
  162. }
  163. .heart3d [class$="36"] {
  164. -webkit-transform: rotateY(360度) rotateZ(45度) translateX(30px);   
  165. transform: rotateY(360度) rotateZ(45度) translateX(30px);   
  166. }

3D の視覚効果を得るために、これらの線条は染まります。

その後、一組の名前はspinのHTML5アニメーションと決定されました：

CSS コード剪定板への复制コンテンツ
  1. @-webkit-keyframes spin {
  2. to {
  3. -webkit-transform: rotateY(360deg) rotateX(360deg);   
  4. transform: rotateY(360deg) rotateX(360deg);   
  5. }
  6. }
  8. @keyframes spin {
  9. to {
  10. -webkit-transform: rotateY(360deg) rotateX(360deg);   
  11. transform: rotateY(360deg) rotateX(360deg);   
  12. }
  13. }

The above is the 3D love animation effect achieved by HTML code and CSS code. Romantic young men can try to learn it and get another friendship skill. Thank you for reading. I hope it can help everyone. Please continue to pay attention to Script House. We Will try to share more excellent articles.

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：HTML5 描画時計アニメーション_html5 チュートリアル スキル次の記事：HTML5 描画時計アニメーション_html5 チュートリアル スキル

関連記事

続きを見る