コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > H5 チュートリアル > 本文

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

WBOY
リリース： 2016-05-16 15:47:18
オリジナル
3785 人が閲覧しました

プログラマーはロマンチックになる方法を知らないなんて誰が言ったでしょうか? 今日は、バレンタインデーに愛する人に贈る、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.

関連ラベル：
html5动画 html5动画制作
ソース：php.cn
前の記事：HTML5 描画時計アニメーション_html5 チュートリアル スキル 次の記事：html5 css3 サンプル チュートリアル html5 および css3_html5 チュートリアル スキルで実装された小型ロボットの歩行アニメーション
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
0ms スリープを省略すると CSS トランジションが中断されるのはなぜですか? FLIP アニメーションを実装して、正しく理解できているかどうかを確認しようとしています。このコードペン (間違ったコードですみません。ただいじっているだけです) で、sleep ...
から 2024-04-06 16:29:50
0
2
490
非表示のサイドパネルを表示: チェックが入っています アニメーション化されたハンバーガー メニューを介してビューに切り替える機能を備えたナビゲーション メニューをサイド パネルに追加したいと考えています。 JSを使わずにCSSだけで作...
から 2024-04-06 15:49:33
0
1
319
CSS Tailwind を使用した画像ホバー カード アニメーションが期待どおりに動作しません。 <html><body><divclass="groupcardmy-14mx-3w-80h-100bg-gray-800rounded-x...
から 2024-04-06 13:43:17
0
1
356
スクロール背景画像の不透明度を下げ、最小不透明度を制限します 背景画像を取得して、スクロール時に不透明度を下げ、ランディングページから離れると、vanillajavascriptを使用して不透明度を最小値0.5に下げようとしています。スクロー...
から 2024-04-04 23:50:53
0
1
1329
`:after` 疑似要素をスタイル付きコンポーネントに正しく適用するための React.js ガイド この美しい下線アニメーションを見つけました。 <ul><li><ahref="#">概要</a></li&...
から 2024-04-04 22:28:08
0
1
1322
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート