• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营

    • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    HTML5制作3D爱心动画教程 献给女友浪漫的礼物

    　　谁说程序员不懂得浪漫，看看程序员是怎么浪漫的，今天小编在国外的网站上看到一个利用HTML5和CSS3制作的3D爱心动画，在情人节时送给心爱的人，还是非常不错的。当然了。背景我们可以用一些浪漫元素。如加上女朋友漂亮的照片。这样可以制作一个廉价又很有意义的情人节礼物。大家可以点解DEMO来看看。先上效果图：

    　　实现代码如下：

    　　html代码：

    XML/HTML Code复制内容到剪贴板
    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，主要是构造爱心的线条区域。

    　　CSS代码：

    CSS Code复制内容到剪贴板
    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. }  

    　　对这些线条进行渲染，以便其有3D的视觉效果。

    　　然后定义了一组名称为spin的HTML5动画：

    CSS Code复制内容到剪贴板
    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代码实现的3D爱心动画效果，浪漫的小伙子可以试着学习一下哦，又get一个交友技能，谢谢阅读，希望能帮到大家，请继续关注脚本之家，我们会努力分享更多优秀的文章。

    上一篇：html5 css3实例教程 一款html5和css3实现的小机器人走路动画
    下一篇：实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
  • 相关文章
    • 

    © 2016-2020 巨人网络通讯

    时间：9:00-21:00 (节假日不休)

    地址：江苏信息产业基地11号楼四层

    《增值电信业务经营许可证》 苏B2-20120278

    HTML5制作3D爱心动画教程 献给女友浪漫的礼物 HTML5,制作,爱心,动画教程,