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

随机推荐

tomcat 远程命令执行漏洞复现
影响范围 Apache Tomcat 7.0.0 - 7.0.81 不受影响的版本 Apache Tomcat 8.x Apache Tomcat 9.x 漏洞分析在Tomcat安装目录下的配置文件 ...
GridView“GridView1”激发了未处理的事件“RowDeleting”
GridView“GridView1”激发了未处理的事件“RowDeleting”. 原因:1.模板列或者buttoncommand里的commandname=“Delete”,“Update”等关键 ...
【Java笔记】配置文件java.util.Properties类的使用
配置文件的路径:项目名/src/main/resources/mmall.properties mmall.properties的内容是键值对.例如假设写了ftp服务器的一些信息. ftp.serve ...
[服务]Crontab和每隔10S执行一次
转自:https://www.cnblogs.com/juandx/archive/2015/11/24/4992465.html linux下定时执行任务的方法在LINUX中你应该先输入cron ...
TCP粘包， UDP丢包， nagle算法
一.TCP粘包 1. 什么时候考虑粘包如果利用tcp每次发送数据,就与对方建立连接,然后双方发送完一段数据后,就关闭连接,这样就不会出现粘包问题(因为只有一种包结构,类似于http协议,UDP不会出 ...
WIN7下重建图标缓存（解决MFC.exe桌面图标显示异常问题）
WIN7下重建图标缓存使用WIN7时,MFC工程生成的应用程序图标,如果更改为自定义的ICON图标之后可能在桌面上显示的依旧是上一次的图标,改个名或换个路径都能恢复正常,说明在WIN7系统下图标的缓 ...
maven 从私仓库下载jar包
pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w ...
测试word发表博客
哈哈哈我测试一下 <ul class="clearfix"> <li> <div><img src="{IMG_PATH}qr ...
v8是怎么实现更快的 await ？深入理解 await 的运行机制
最近v8团队发表一篇博客Faster async functions and promises, 预计在v7.2版本实现更快的异步函数和promise. 文章内容看起来不是很容易理解,背后的原理比较隐 ...
利用R里的options函数进行光标和数字位数设置
用R写代码时,打字水平不高,有时候不知道乱按了一些键(现在我还不知道哪个键),光标就变成了加粗的竖直线,又改不回去.这种情况下我们可以用options函数进行光标设置,例如:options(promp ...

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

HTML代码：

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

随机推荐

热门专题