HTML5 3D爱心动画及其制作过程

之前有看到过很多基于HTML5或者CSS3制作的爱心动画，不过基本上都是2D平面的，今天在国外的网站上看到一个基于HTML5 3D的爱心动画，对于HTML5爱好者来说，不免兴奋了一把。下面将分享一下这个3D爱心动画的实现过程，可以一起来看看。

当然你也可以先看一下DEMO演示

这么好看的HTML5爱心动画，我们当然要把源代码分享给大家，下面是小编整理的源代码，主要是HTML代码和CSS代码。

HTML代码：

<div class=’heart3d’>

<div class=’rib1′></div>

<div class=’rib2′></div>

<div class=’rib3′></div>

<div class=’rib4′></div>

<div class=’rib5′></div>

<div class=’rib6′></div>

<div class=’rib7′></div>

<div class=’rib8′></div>

<div class=’rib9′></div>

<div class=’rib10′></div>

<div class=’rib11′></div>

<div class=’rib12′></div>

<div class=’rib13′></div>

<div class=’rib14′></div>

<div class=’rib15′></div>

<div class=’rib16′></div>

<div class=’rib17′></div>

<div class=’rib18′></div>

<div class=’rib19′></div>

<div class=’rib20′></div>

<div class=’rib21′></div>

<div class=’rib22′></div>

<div class=’rib23′></div>

<div class=’rib24′></div>

<div class=’rib25′></div>

<div class=’rib26′></div>

<div class=’rib27′></div>

<div class=’rib28′></div>

<div class=’rib29′></div>

<div class=’rib30′></div>

<div class=’rib31′></div>

<div class=’rib32′></div>

<div class=’rib33′></div>

<div class=’rib34′></div>

<div class=’rib35′></div>

<div class=’rib36′></div>

</div>

这么多div，主要是构造爱心的线条区域。

下面是CSS3代码，对这些线条进行渲染，以便其有3D的视觉效果。

.heart3d {

  position: absolute;

  top:;

  right:;

  bottom:;

  left:;

  margin: auto;

  width: 100px;

  height: 160px;

  -webkit-transform-style: preserve-3d;

  transform-style: preserve-3d;

  -webkit-animation: spin 15s infinite linear;

  animation: spin 15s infinite linear;

}

.heart3d [class^="rib"] {

  position: absolute;

  width: 100px;

  height: 160px;

  border: solid #f22613;

  border-width: 1px 1px 0 0;

  border-radius: 50% 50% 0 / 40% 50% 0;

}

.heart3d [class$="1"] {

  -webkit-transform: rotateY(10deg) rotateZ(45deg) translateX(30px);

  transform: rotateY(10deg) rotateZ(45deg) translateX(30px);

}

.heart3d [class$="2"] {

  -webkit-transform: rotateY(20deg) rotateZ(45deg) translateX(30px);

  transform: rotateY(20deg) rotateZ(45deg) translateX(30px);

}

.heart3d [class$="3"] {

  -webkit-transform: rotateY(30deg) rotateZ(45deg) translateX(30px);

  transform: rotateY(30deg) rotateZ(45deg) translateX(30px);

}

.heart3d [class$="4"] {

  -webkit-transform: rotateY(40deg) rotateZ(45deg) translateX(30px);

  transform: rotateY(40deg) rotateZ(45deg) translateX(30px);

}

.heart3d [class$="5"] {

  -webkit-transform: rotateY(50deg) rotateZ(45deg) translateX(30px);

  transform: rotateY(50deg) rotateZ(45deg) translateX(30px);

}

.heart3d [class$="6"] {

  -webkit-transform: rotateY(60deg) rotateZ(45deg) translateX(30px);

  transform: rotateY(60deg) rotateZ(45deg) translateX(30px);

}

.heart3d [class$="7"] {

  -webkit-transform: rotateY(70deg) rotateZ(45deg) translateX(30px);

  transform: rotateY(70deg) rotateZ(45deg) translateX(30px);

}

.heart3d [class$="8"] {

  -webkit-transform: rotateY(80deg) rotateZ(45deg) translateX(30px);

  transform: rotateY(80deg) rotateZ(45deg) translateX(30px);

}

.heart3d [class$="9"] {

  -webkit-transform: rotateY(90deg) rotateZ(45deg) translateX(30px);

  transform: rotateY(90deg) rotateZ(45deg) translateX(30px);

}

.heart3d [class$="10"] {

  -webkit-transform: rotateY(100deg) rotateZ(45deg) translateX(30px);

  transform: rotateY(100deg) rotateZ(45deg) translateX(30px);

}

.heart3d [class$="11"] {

  -webkit-transform: rotateY(110deg) rotateZ(45deg) translateX(30px);

  transform: rotateY(110deg) rotateZ(45deg) translateX(30px);

}

.heart3d [class$="12"] {

  -webkit-transform: rotateY(120deg) rotateZ(45deg) translateX(30px);

  transform: rotateY(120deg) rotateZ(45deg) translateX(30px);

}

.heart3d [class$="13"] {

  -webkit-transform: rotateY(130deg) rotateZ(45deg) translateX(30px);

  transform: rotateY(130deg) rotateZ(45deg) translateX(30px);

}

.heart3d [class$="14"] {

  -webkit-transform: rotateY(140deg) rotateZ(45deg) translateX(30px);

  transform: rotateY(140deg) rotateZ(45deg) translateX(30px);

}

.heart3d [class$="15"] {

  -webkit-transform: rotateY(150deg) rotateZ(45deg) translateX(30px);

  transform: rotateY(150deg) rotateZ(45deg) translateX(30px);

}

.heart3d [class$="16"] {

  -webkit-transform: rotateY(160deg) rotateZ(45deg) translateX(30px);

  transform: rotateY(160deg) rotateZ(45deg) translateX(30px);

}

.heart3d [class$="17"] {

  -webkit-transform: rotateY(170deg) rotateZ(45deg) translateX(30px);

  transform: rotateY(170deg) rotateZ(45deg) translateX(30px);

}

.heart3d [class$="18"] {

  -webkit-transform: rotateY(180deg) rotateZ(45deg) translateX(30px);

  transform: rotateY(180deg) rotateZ(45deg) translateX(30px);

}

.heart3d [class$="19"] {

  -webkit-transform: rotateY(190deg) rotateZ(45deg) translateX(30px);

  transform: rotateY(190deg) rotateZ(45deg) translateX(30px);

}

.heart3d [class$="20"] {

  -webkit-transform: rotateY(200deg) rotateZ(45deg) translateX(30px);

  transform: rotateY(200deg) rotateZ(45deg) translateX(30px);

}

.heart3d [class$="21"] {

  -webkit-transform: rotateY(210deg) rotateZ(45deg) translateX(30px);

  transform: rotateY(210deg) rotateZ(45deg) translateX(30px);

}

.heart3d [class$="22"] {

  -webkit-transform: rotateY(220deg) rotateZ(45deg) translateX(30px);

  transform: rotateY(220deg) rotateZ(45deg) translateX(30px);

}

.heart3d [class$="23"] {

  -webkit-transform: rotateY(230deg) rotateZ(45deg) translateX(30px);

  transform: rotateY(230deg) rotateZ(45deg) translateX(30px);

}

.heart3d [class$="24"] {

  -webkit-transform: rotateY(240deg) rotateZ(45deg) translateX(30px);

  transform: rotateY(240deg) rotateZ(45deg) translateX(30px);

}

.heart3d [class$="25"] {

  -webkit-transform: rotateY(250deg) rotateZ(45deg) translateX(30px);

  transform: rotateY(250deg) rotateZ(45deg) translateX(30px);

}

.heart3d [class$="26"] {

  -webkit-transform: rotateY(260deg) rotateZ(45deg) translateX(30px);

  transform: rotateY(260deg) rotateZ(45deg) translateX(30px);

}

.heart3d [class$="27"] {

  -webkit-transform: rotateY(270deg) rotateZ(45deg) translateX(30px);

  transform: rotateY(270deg) rotateZ(45deg) translateX(30px);

}

.heart3d [class$="28"] {

  -webkit-transform: rotateY(280deg) rotateZ(45deg) translateX(30px);

  transform: rotateY(280deg) rotateZ(45deg) translateX(30px);

}

.heart3d [class$="29"] {

  -webkit-transform: rotateY(290deg) rotateZ(45deg) translateX(30px);

  transform: rotateY(290deg) rotateZ(45deg) translateX(30px);

}

.heart3d [class$="30"] {

  -webkit-transform: rotateY(300deg) rotateZ(45deg) translateX(30px);

  transform: rotateY(300deg) rotateZ(45deg) translateX(30px);

}

.heart3d [class$="31"] {

  -webkit-transform: rotateY(310deg) rotateZ(45deg) translateX(30px);

  transform: rotateY(310deg) rotateZ(45deg) translateX(30px);

}

.heart3d [class$="32"] {

  -webkit-transform: rotateY(320deg) rotateZ(45deg) translateX(30px);

  transform: rotateY(320deg) rotateZ(45deg) translateX(30px);

}

.heart3d [class$="33"] {

  -webkit-transform: rotateY(330deg) rotateZ(45deg) translateX(30px);

  transform: rotateY(330deg) rotateZ(45deg) translateX(30px);

}

.heart3d [class$="34"] {

  -webkit-transform: rotateY(340deg) rotateZ(45deg) translateX(30px);

  transform: rotateY(340deg) rotateZ(45deg) translateX(30px);

}

.heart3d [class$="35"] {

  -webkit-transform: rotateY(350deg) rotateZ(45deg) translateX(30px);

  transform: rotateY(350deg) rotateZ(45deg) translateX(30px);

}

.heart3d [class$="36"] {

  -webkit-transform: rotateY(360deg) rotateZ(45deg) translateX(30px);

  transform: rotateY(360deg) rotateZ(45deg) translateX(30px);

}

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

@-webkit-keyframes spin {

  to {

    -webkit-transform: rotateY(360deg) rotateX(360deg);

    transform: rotateY(360deg) rotateX(360deg);

  }

}

@keyframes spin {

  to {

    -webkit-transform: rotateY(360deg) rotateX(360deg);

    transform: rotateY(360deg) rotateX(360deg);

  }

}

好了，以上分享的HTML5 3D爱心动画还不错吧，送给你女朋友作为小小的礼物吧。源代码下载>>

HTML5 3D爱心动画及其制作过程的更多相关文章

HTML5 3D爱心动画晚来的七夕礼物
在线演示源码下载这么好看的HTML5爱心动画,我们当然要把源代码分享给大家,下面是小编整理的源代码,主要是HTML代码和CSS代码. HTML代码: <div class=’heart3d’& ...
9个超绚丽的HTML5 3D图片动画特效
在Web 1.0时代,我们的网页中图片数量非常少,而且都是以静态图片为主.HTML5的出现,推动了Web 2.0的发展,同时也催生出了很多绚丽的HTML5图片动画特效,特别是有些还有3D的动画效果.本 ...
8款超酷的HTML5 3D图片动画源码
1.HTML5移动端图片左右切换动画今天要给大家分享一款很不错的图片左右切换焦点图动画,并且支持移动端触摸滑动.功能上,这款HTML5图片播放器支持鼠标滑动.手机端触摸滑动以及自动播放.外观上,这款 ...
HTML5 3D动画效果
对以前来讲,3D动画拿到网页上展示是一件非常奢侈的事情,第一是浏览器不够先进,第二是大部分只能用flash实现伪3D.HTML5的出现,让实现网页3D动画变得非常简单,当然前提是你不要再使用像IE67 ...
7款超酷HTML5 3D动画精选应用及源码
对以前来讲,3D动画拿到网页上展示是一件非常奢侈的事情,第一是浏览器不够先进,第二是大部分只能用flash实现伪3D.HTML5的出现,让实现网页3D动画变得非常简单,当然前提是你不要再使用像IE67 ...
8款效果惊艳的HTML5 3D动画
1.HTML5 WebGL水面水波荡漾特效之前已经向各位分享过一款很逼真的HTML5水波荡漾特效,效果还算不错.今天再向大家分享一款更加给力的HTML5水波动画,画面上是一个大水池,水池底部是一颗大 ...
超给力的HTML5 3D动画欣赏及源码下载
HTML5有着非常巨大的魅力,尤其是CSS3和Cavnas,可以帮助页面渲染得非常炫酷.值得一提的是,利用HTML5的3D特性可以帮助你更加方便地在网页上实现3D动画特效.本文分享的这些HTML5 3 ...
[Mugeda HTML5技术教程之12]制作跨屏互动应用
mugeda动画平台还可以用来制作跨屏互动的动画应用,比如在PC端的大屏幕上显示动画的主界面,同时会显示出供手机扫描的二维码,手机扫描后会在手机上显示手机端动画界面.通过手机就可以和PC端的显示界面跨 ...
[Mugeda HTML5技术教程之19]制作可定制贺卡
本文档通过一个实例介绍可定制贺卡的动画的制作过程.实例包含两部分: 1. 动画部分:介绍动画制作过程中如何给祝福词和落款的文本对象命名,如何给定制按钮定义表单动作. 2. 代码部分:介绍贺卡的脚本逻辑 ...

随机推荐

Android下基于SDL的位图渲染（二）理论篇
理论篇上一篇中介绍了如何将SDL2源码应用到Android渲染中,实际上SDL本身提供的android-project实现了基于android的c运行时环境,通过上面实践篇的介绍,就是完成这个环境搭 ...
Linux中查看GNOME版本号
在使用图形终端时,可以在虚拟终端中直接输入gnome-about,会弹出如下窗口. 或者在纯命令行模式下使用下面命令: $ gnome-about --gnome-version 注:Gnome 3. ...
Chrome中使用flash引起cpu飙升问题的处理
本人使用的是Chrome 30 flash 18,在看视频或者登陆有调用flash插件的页面之后,经常会遇到Shockwave Flash插件CPU占用超过50%的情况(在Chrome的任务管理器可以 ...
LeetCode: Triangle 解题报告
Triangle Given a triangle, find the minimum path sum from top to bottom. Each step you may move to a ...
jetty 7.0 笔记
codehaus download:http://dist.codehaus.org/jetty/ 找到7.0 tar.gz 解压拉取 Lib下jar 和 Lib--jsp下jar 代码同启动 ...
STM32内部flash存储小数——别样的C语言技巧
今天在进行STM32内部falsh存储的时候,发现固件库历程的函数原型是这样的: 第一个是地址,在我的STM32中是2K一页的,第二个是要写入的数据. 问题就来了,存储一个小数该怎么办呢?固件库给的是 ...
u盘引导制作工具
https://rufus.ie/en_IE.html
mysql性能优化（一）
随着项目的上线,关注开始关注服务器的运维和优化,其中后端数据库状态查看和参数调优是比不可少的一步,可能用到的两个小工具: mysqltuner.pl tuning-primer.sh 参考: [1] ...
css优化建议
1.不要使用过小的图片做背景平铺.这就是为何很多人都不用 1px 的原因,这才知晓.宽高 1px 的图片平铺出一个宽高 200px 的区域,需要 200*200=40, 000 次,占用资源. 2.无 ...
网络构建入门技术（2）——IP子网划分
说明(2017-5-10 10:54:31): 1. 为什么要子网划分? 子网划分就是,网络位变长,主机位变短的过程.实际上就是将一个大网络,划分成多个小网络的过程. 目的就是为了解决IP地址不够用的 ...

HTML5 3D爱心动画及其制作过程

HTML代码：

HTML5 3D爱心动画及其制作过程的更多相关文章

随机推荐

热门专题