社区
学习
工具库
AI工具
休闲
搜索
简体中文
首页 web前端 H5教程 HTML5制作3D爱心动画教程 献给女友浪漫的礼物_html5教程技巧

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
May 16, 2016 pm 03:47 PM

　　谁说程序员不懂得浪漫，看看程序员是怎么浪漫的，今天小编在国外的网站上看到一个利用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一个交友技能，谢谢阅读，希望能帮到大家，请继续关注脚本之家，我们会努力分享更多优秀的文章。

本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

显示更多

热门文章

R.E.P.O.能量晶体解释及其做什么（黄色晶体）
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
刺客信条阴影：贝壳谜语解决方案
2 周前 By DDD
R.E.P.O.如果您听不到任何人，如何修复音频
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25：如何解锁Myrise中的所有内容
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
显示更多

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里
7455
15
CakePHP 教程
1375
52
steam的账户名称是什么格式
77
11
win11激活密钥永久
40
19
NYT连接提示和答案
14
9
显示更多
Related knowledge
如何使用视口元标记来控制移动设备上的页面缩放？ 如何使用视口元标记来控制移动设备上的页面缩放？ Mar 13, 2025 pm 08:00 PM

本文讨论了使用视口元标记来控制移动设备上的页面缩放，重点是宽度和初始尺度之类的设置，以获得最佳响应和性能。

如何使用地理位置API处理用户位置隐私和权限？ 如何使用地理位置API处理用户位置隐私和权限？ Mar 18, 2025 pm 02:16 PM

本文讨论了使用GeOlocation API管理用户位置隐私和权限，并强调要求权限，确保数据安全性并遵守隐私法律的最佳实践。

如何将HTML5拖放API用于交互式用户界面？ 如何将HTML5拖放API用于交互式用户界面？ Mar 18, 2025 pm 02:17 PM

本文介绍了如何使用HTML5拖放API来创建交互式用户界面，详细介绍了使元素可拖动的步骤，处理关键事件并通过自定义反馈来增强用户体验。它还讨论了一个常见的陷阱

如何使用HTML5页面可见性API检测页面何时可见？ 如何使用HTML5页面可见性API检测页面何时可见？ Mar 13, 2025 pm 07:51 PM

本文讨论了使用HTML5页面可见性API来检测页面可见性，提高用户体验并优化资源使用情况。关键方面包括暂停媒体，减少CPU负载以及基于可见性变化管理分析。

如何使用HTML5 Websockets API进行客户端和服务器之间的双向通信？ 如何使用HTML5 Websockets API进行客户端和服务器之间的双向通信？ Mar 12, 2025 pm 03:20 PM

本文解释了HTML5 Websockets API，用于实时双向客户服务器通信。 它详细详细介绍了客户端（JavaScript）和服务器端（Python/Flask）的实现，以应对可伸缩性，状态管理，一个挑战

h5项目怎么运行 h5项目怎么运行 Apr 06, 2025 pm 12:21 PM

运行 H5 项目需要以下步骤：安装 Web 服务器、Node.js、开发工具等必要工具。搭建开发环境，创建项目文件夹、初始化项目、编写代码。启动开发服务器，使用命令行运行命令。在浏览器中预览项目，输入开发服务器 URL。发布项目，优化代码、部署项目、设置 Web 服务器配置。

如何使用HTML5通知API显示桌面通知？ 如何使用HTML5通知API显示桌面通知？ Mar 13, 2025 pm 07:57 PM

本文介绍了如何使用HTML5通知API显示桌面通知，重点关注许可要求，自定义和浏览器支持。

如何使用共享工人在HTML5中共享背景处理？ 如何使用共享工人在HTML5中共享背景处理？ Mar 18, 2025 pm 02:06 PM

本文解释了如何使用HTML5中的共享工人进行共享背景处理，详细的设置，福利，沟通效率和调试技术。

See all articles