HTML5 3D爱心动画晚来的七夕礼物

这么好看的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: 0;

  right: 0;

  bottom: 0;

  left: 0;

  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或者CSS3制作的爱心动画,不过基本上都是2D平面的,今天在国外的网站上看到一个基于HTML5 3D的爱心动画,对于HTML5爱好者来说,不免兴奋了一把.下面将分享一下这 ...
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 ...
C语言控制台打印3D爱心图案
非常多程序猿都认为自己的编程工作十分的鼓噪乏味.一整天面对的都是一些写不完的代码和改不完的Bug.今天我们要给大家分享一些有趣的C语言代码,也许能够为你无聊的工作带来一丝乐趣. 这些代码能够完毕几个不 ...
8个经典HTML5 3D动画赏析
HTML5技术已经越来越被我们所接受,特别是一些3D的动画特效.本文介绍的8个HTML5 3D动画并没有特别华丽的界面,但是比较实用,涉及到3D图片.3D图表.3D按钮等方面,一起来看看. 1.HTM ...

随机推荐

高精度快速预览打开dwg文件的CAD控件CAD Image DLL介绍及下载
CAD Image DLL对于DXF格式, DWG格式(AutoCAD R12 到AutoCAD 2004/2005), PLT 以及 HPGL/HPGL2文件都有快速的显示速度和精度,开发者再也不会 ...
int->string-------------c
void intToString(int n,char a[]){ int i=1,m=n; while((n/=10)!=0) i++; int j=0; for(;j<i;j++){ a ...
对于.NET Socket连接的细节记录
如果客户端直接连接一个不存在的服务器端,客户端会抛出异常: 如果在连接过程中,客户端强制关闭了连接(没有调用Close直接关闭了程序),服务器端会抛出异常: 如果在连接过程中,客户端调用了Close, ...
Fragment中的onKeyDown事件让Activity处理--处理特殊按键比如移动终端扫描
一些特殊按键事件需要在Activity中处理public void onKeyDown(int keyCode, KeyEvent event){ //让Activity处理 getActivity( ...
第五章搭建S3C6410开发板的测试环境
在PC上可以开发Linux驱动,重新编译成ARM架构的Linux驱动模块,但最后还是要在开发板上进行测试.目前最流行的是基于三星S3C6410 ARM11架构的开发板,很多厂商在其基础上进行了扩展,开 ...
互联网实习笔记之shell笔记
linux下面一切都是可以配置的 #vim可以有 .vimrc文件 #------.vimrc开始---- set vb t_vb= set number syntax on set hlsearch ...
jquery中的children()和contents()的区别
1.children()只会返回元素节点 2.contents()还可以返回文本节点
Spring中的自动装配
src\dayday\Person.java package dayday;/** * Created by I am master on 2016/11/28. */public class Per ...
Xcode下搭建opencv环境碰到的一些问题
写了一学期py-opencv了都快结束了突然又要折腾起c++下来,真实给自己跪了,不过环境基本都搞定了,中间碰到了一些问题这里总结一下: usr/local/include和usr/local/lib ...
System.arrayCopy()和普通数组复制之间的效率差别
都是System.arrayCopy() 效率高,到底有多高呢,拉出来遛遛就知道了: package JCF.ArrayList; import java.util.Date; public clas ...

HTML5 3D爱心动画 晚来的七夕礼物

HTML5 3D爱心动画 晚来的七夕礼物的更多相关文章

随机推荐

热门专题

HTML5 3D爱心动画晚来的七夕礼物

HTML5 3D爱心动画晚来的七夕礼物的更多相关文章