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. 代码部分:介绍贺卡的脚本逻辑 ...

随机推荐

分析jvm线程堆栈
目录一.java线程状态二.使用jstack生成进程dump文件三.统计dump文件中处于不同状态的线程数量四.举例分析不同状态的线程 1.分析BLOCKED (on object monit ...
Java获取此次请求URL以及服务器根路径的方法
http://www.jb51.net/article/71693.htm ********************************************** 本文介绍了Java获取此次请求 ...
Shell获取格式化日期
Shell获取格式化日期 shell date 获取昨天日期使用date -d 选项: date +"%Y%m%d" -d "+n days" 今天的后n天日 ...
S3C2440串口的基本使用
2440A有三个串口,我们使用串口0对它进行了解熟悉. 首先肯定是应该找到手册上串口0所对应的引脚,然后配置相应寄存器. 串口0对应GPIO H的 2,3 串口在单片机中我们已经有很多使用经验了,对于 ...
pypi配置国内开源镜像
### windows ------------------------------------------------- 在用户目录下新建 pip文件夹,新建pip.ini文件 [global] i ...
基于html5海贼王单页视差滚动特效
分享一款基于html5海贼王单页视差滚动特效是一款流行滑落网页特效代码.效果图如下: 在线预览源码下载实现的代码: <div class="top"> < ...
java基础篇---I/O技术(二)
接着上篇http://www.cnblogs.com/oumyye/p/4314412.html java I/O流---内存操作流 ByteArrayInputStream和ByteArrayOut ...
android studio connot resolve
使用AS的时候,肯定会遇到这个问题. 我使用清除缓存都不能解决,不过无意中发现代码变了. final Button select = (Button) findViewById(android.R.i ...
引用Interop.SQLDMO.dll后的注意事项。
SQLDMO.dll是个好东西,ASP.NET利用它可以实现在线备份.还原数据库等各种功能.近日有客户要求为其在后台添加一个管理数据库的功能.于是就出现了这篇文章. 由于客户的数据库和WEB服 ...
am335x 配置 GPIO 为可输入也可输出
主要配置设备树如下模式即可 0x1AC (PIN_INPUT_PULLUP | MUX_MODE7)

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

HTML代码：

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

随机推荐

热门专题