13518219792
网站建设资讯

NEWS

网站建设资讯

怎么用HTML5制作3D爱心动画

这篇文章主要讲解了“怎么用HTML5制作3D爱心动画”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么用HTML5制作3D爱心动画”吧！

创新互联公司是专业的沭阳网站建设公司，沭阳接单;提供成都做网站、成都网站设计,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行沭阳网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

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

怎么用HTML5制作3D爱心动画

实现代码如下：

html代码：

XML/HTML Code复制内容到剪贴板

  1.   

  

    •   

    •   

    •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

    • 这么多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. }  

    感谢各位的阅读，以上就是“怎么用HTML5制作3D爱心动画”的内容了，经过本文的学习后，相信大家对怎么用HTML5制作3D爱心动画这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！


    文章名称：怎么用HTML5制作3D爱心动画
    网页路径：http://cdweb.net/article/gcpepo.html

    其他资讯