HTML5 3D爱心动画及其制作过程
2024-06-09 01:58:11
之前有看到过很多基于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: 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爱心动画及其制作过程相关推荐
- 随着国产动漫的崛起，越来越好奇3D动漫的制作过程了
我们首先来了解一下,3d动画的定义. 三维动画软件在计算机中首先建立一个虚拟的世界,设计师在这个虚拟的三维世界中按照要表现的对象的形状尺寸建立模型以及场景,再根据要求设定模型的运动轨迹.虚拟摄影机的运 ...
- 好看的照片效果html,9款超绚丽的HTML5 3D图片动画特效
1.SVG玫瑰花盛开动画 SVG还是很强大的,我们之前也分享过很多利用SVG绘制出来的各种动画特效.比如超炫酷的SVG轮船行驶动画和HTML5 SVG圆形钢琴动画都是用SVG实现的超酷动画.今天我们要 ...
- 3D人物动画如何制作？DAZ Studio 4来帮你！
3D人物动画制作工具-DAZ Studio 4.使用DAZ Studio 4 Mac破解版,用户可以自由选择虚拟人物,动物,道具,车辆,配件,环境等元素,只需要设置好相应的效果或者动作就可以完成制作了 ...
- android 自定义园动画,Android动画：一个等待动画的制作过程
看到一个很好玩的gif等待动画,记录一下制作过程. 先上图,展示一下这gif. 图中四个空心圆,一个实心园,依次作规则双星运动. 三个晚上,目前已经已经实现了.又学到了不少东西,这几天把博客写完. 放 ...
- linux开机动画制作教程,【转载】开机动画的制作过程（bootanimation.zip）
Android bootanimation 制作过程 这个东西一直想研究,今天无意发现转过来看看 Android bootanimation制作过程: android启动动画需要一个bootanima ...
- 8款超酷的HTML5 3D图片动画源码
1.HTML5移动端图片左右切换动画 今天要给大家分享一款很不错的图片左右切换焦点图动画,并且支持移动端触摸滑动.功能上,这款HTML5图片播放器支持鼠标滑动.手机端触摸滑动以及自动播放.外观上,这款 ...
- Android开发中App演示Gif效果动画的制作过程详讲
相信大家在做好App时,都想录制一段Gif动态效果.但可能苦于不知如何去实现,或者没有比较好的软件去实现.今天我给大家来详细的讲下整个过程=================== 首先,需要录制好一段视 ...
- HTML5 3D旋转动画案例
效果 代码 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF- ...
- html5卷轴展开动画,8款基于Jquery的WEB前端动画特效
超级绚丽,20款前端动画特效,轰炸你的眼睛,一定要看到最后! 1.超炫酷的30个jQuery按钮悬停动画 按钮插件是最常见的jQuery插件之一,因为它用途广泛,而且配置起来最为方便.今天我们要分享的 ...
最新文章
- Altium Designer中敷铜间距修改问题
- PIX的AAA认证配置
- Python 打印嵌套list中每个数据（遍历列表）
- 今天你的网站被攻击了吗？
- Linux下Qt使用QAudio相关类进行音频采集,使用Windows下的Matlab软件播放
- gis投影中未定义的地理转换_ArcGIS中5分钟搞懂坐标系相关知识
- 合并多行查询数据到一行：使用自连接、FOR XML PATH('')、STUFF或REPLACE函数
- netlink 0010 -- Generic Netlink 实现通信
- 基于python的车牌识别系统设计与实现
- 数据通路——专用数据通路
- 更适合运动的耳机，设计时尚轻巧好用，南卡Runner CC3上手
- LeeCode 108 递归
- WERTYU UVA - 10082
- Widows下安装SCALA
- VMware与宿主机文件夹共享、虚拟机磁盘映射
- （动归三剑客）打家劫舍 （动归三剑客）
- 在线将html文件转pdf,在线将html转换成pdf文件 示例源码
- STM32驱动Marvell8801介绍（十五） ---- Marvell8801开启open热点/开启wpa热点/开启wpa2热点
- 低代码内参：低代码平台 Airtable 再获 7.35 亿美元的融资，一年内估值翻倍达117亿美元
- C# 文本框只能输入数字和退格键