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 ...

随机推荐

Python笔记-集合，拷贝
对于列表,元组,集合的异同,有如下解释 #list ----> 允许重复的集合,修改# tuple ----> 允许重复的集合,不修改# set ----> 不允许重复的集合下面是示 ...
Vsftp精解之安装配置及原理（一）
简介 Vsftp(Very Secure FTP)是一个基于GPL发布的类Unix系统上使用的FTP服务器软件,是一款小巧而又易用FTP服务器程序,Vsftpd 在安全性.高性能及稳定性三个方面有很好 ...
Learning Bayesian Network Classifiers by Maximizing Conditional Likelihood
Abstract Bayesian networks are a powerful probabilistic representation, and their use for classifica ...
Python的平凡之路（19）
一.Django请求生命周期对于所有的web框架来说本质就是一个socket服务端,浏览器是socket客户端 ...
android densityDpi 的由来
---恢复内容开始--- 今天做屏幕适配的时候,发现一个奇怪的现象: HTC D820u/ 红米Note/HONOR H30-L02 /Coolpad 8297-T01 4款手机的分辨率均为 1280 ...
Apache Tomcat开机后台启动
作为软件开发人员,经常接触Tomcat,完成的项目,需要部署到服务器上的Tomcat,才能供其他人访问浏览. 因为存在以下问题,所以需要把Tomcat设置为后台自动启动: 1.服务器可能因环境故障面临 ...
随感一：android handler传值更改ui
handler+looper传值更改activity的UI 博客开了一段时间,一直想写点自己的学习经验及体会,等着以后长时间不用再要用到的时候直接拿过来上手.想了想,之前用到handler, 看了几篇 ...
C++网络编程之select
select函数决定一个或者多个套接字(socket)的状态,如果需要的话,等待执行异步I/O. int select( __in int nfds, __inout fd_ ...
在web中使用windows控件，实现摄像头功能
最近做的一个Web版的视频会议项目,需要在网页中播放来自远程摄像头采集的实时视频,我们已经有了播放远程实时视频的使用C#编写的windows控件,如何将其嵌入到网页中去了?这需要使用一种古老的技术,A ...
ibatis
ibatis学习笔记(一)>>>>>>>sqlMapConfig.xml文件详解 1.sqlMapConfig.xml配置文件详解: Xml代码 1. < ...

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

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

随机推荐

热门专题

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

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