首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

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

Posted in HTML / CSS onNovember 05, 2014

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

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

实现代码如下：

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制作3D爱心动画教程 献给女友浪漫的礼物

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
详解css3 object-fit属性
Jul 27 HTML / CSS
CSS3五个技巧给你的网站带来出色的效果
Apr 02 HTML / CSS
实现CSS3中的border-radius(边框圆角)示例代码
Jul 19 HTML / CSS
css3实现可滑动跳转的分页插件示例
May 08 HTML / CSS
css3 仿写阿里云水纹效果的示例代码
Feb 10 HTML / CSS
css3利用transform变形结合事件完成扇形导航
Oct 26 HTML / CSS
html5中为audio标签增加停止按钮动作实现方法
Jan 04 HTML / CSS
通过Canvas及File API缩放并上传图片完整示例
Aug 08 HTML / CSS
一款利用html5和css3动画排列人物头像的实例演示
Dec 05 HTML / CSS
深入了解canvas在移动端绘制模糊的问题解决
Apr 30 HTML / CSS
AmazeUI 网格的实现示例
Aug 13 HTML / CSS
纯CSS实现酷炫的霓虹灯效果
Apr 13 HTML / CSS
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
Oct 20 #HTML / CSS
实例教程 利用html5和css3打造一款创意404页面
Oct 20 #HTML / CSS
基于html5实现的图片墙效果
Oct 16 #HTML / CSS
html5版canvas自由拼图实例
Oct 15 #HTML / CSS
HTML5地理定位实例
Oct 15 #HTML / CSS
IE9对HTML5中部分属性不支持的原因分析
Oct 15 #HTML / CSS
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
Sep 15 #HTML / CSS
越南购物网站(9) 白俄罗斯购物网站(3) 马耳他购物网站(1) 乌克兰购物网站(27) 约旦购物网站(1) 希腊购物网站(6) 罗马尼亚购物网站(10) 缅甸购物网站(1) 亚洲购物网站(6) 摩纳哥购物网站(1)
You might like
IIS环境下快速安装、配置和调试PHP5.2.0
2006/12/17 PHP
php 判断字符串中是否包含html标签
2014/02/17 PHP
一个经典的PHP文件上传类分享
2014/11/18 PHP
Yii2 批量插入、更新数据实例
2017/03/15 PHP
php中isset与empty函数的困惑与用法分析
2019/07/05 PHP
thinkphp5.1框架实现格式化mysql时间戳为日期的方式小结
2019/10/10 PHP
JavaScript入门教程(9) Document文档对象
2009/01/31 Javascript
jQuery 1.3 和 Validation 验证插件1.5.1
2009/07/09 Javascript
Jquery实现瀑布流布局（备有详细注释）
2015/07/31 Javascript
NodeJS实现阿里大鱼短信通知发送
2016/01/17 NodeJs
node.js连接mongoDB数据库 快速搭建自己的web服务
2016/04/17 Javascript
ajax跨域调用webservice的实现代码
2016/05/09 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
2016/10/15 Javascript
JS button按钮实现submit按钮提交效果
2016/11/01 Javascript
利用JS实现文字的聚合动画效果
2017/01/22 Javascript
canvas绘制爱心的几种方法总结(推荐)
2017/10/31 Javascript
详解Vue SSR（ Vue2 + Koa2 + Webpack4）配置指南
2018/11/13 Javascript
详解基于iview-ui的导航栏路径（面包屑）配置
2019/02/22 Javascript
[00:44]2016完美“圣”典 风云人物：Mikasa宣传片
2016/12/07 DOTA
一篇文章入门Python生态系统(Python新手入门指导)
2015/12/11 Python
Python代码太长换行的实现
2019/07/05 Python
python 发送邮件的四种方法汇总
2020/12/02 Python
CSS3打造磨砂玻璃背景效果
2016/09/28 HTML / CSS
html5 拖拽上传图片实例演示
2013/04/01 HTML / CSS
白兰氏健康Mall：BRAND’S
2017/11/13 全球购物
Notino罗马尼亚网站：购买香水和化妆品
2019/07/20 全球购物
美国排名第一的葡萄酒俱乐部：Firstleaf Wine Club
2020/01/02 全球购物
试述DBMS的主要功能
2016/11/13 面试题
高级工程师英文求职信
2014/03/19 职场文书
2014年小学教导处工作总结
2014/12/19 职场文书
给老师的感谢信
2015/01/20 职场文书
2015年全民国防教育日活动总结
2015/03/23 职场文书
党支部创先争优公开承诺书
2015/04/30 职场文书
红色电影观后感
2015/06/18 职场文书
JavaScript嵌入百度地图API的最详细方法
2021/04/16 Javascript
详解java如何集成swagger组件
2021/06/21 Java/Android