HTML5制作3D爱心动画教程献给女友浪漫的礼物_html5教程技巧

来源：动视网责编：小OO 时间：2020-11-27 15:19:13

HTML5制作3D爱心动画教程献给女友浪漫的礼物_html5教程技巧

实现代码如下：html代码。XML/HTML Code复制内容到剪贴板。这么多div，主要是构造爱心的线条区域。CSS代码。

推荐度：

点击下载本文 文档为doc格式

导读实现代码如下：html代码。XML/HTML Code复制内容到剪贴板。这么多div，主要是构造爱心的线条区域。CSS代码。

　　谁说程序员不懂得浪漫，看看程序员是怎么浪漫的，今天小编在国外的网站上看到一个利用HTML5和CSS3制作的3D爱心动画，在情人节时送给心爱的人，还是非常不错的。当然了。背景我们可以用一些浪漫元素。如加上女朋友漂亮的照片。这样可以制作一个廉价又很有意义的情人节礼物。大家可以点解DEMO来看看。先上效果图：

　　实现代码如下：

　　html代码：

XML/HTML Code复制内容到剪贴板

　　这么多div，主要是构造爱心的线条区域。

　　CSS代码：

CSS Code复制内容到剪贴板


 .heart3d { 
  position: absolute; 
  top: 0; 
  rightright: 0; 
  bottombottom: 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); 
 } 



　　对这些线条进行渲染，以便其有3D的视觉效果。
　　然后定义了一组名称为spin的HTML5动画：
CSS Code复制内容到剪贴板


 @-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教程技巧

实现代码如下：html代码。XML/HTML Code复制内容到剪贴板。这么多div，主要是构造爱心的线条区域。CSS代码。

推荐度：

点击下载本文 文档为doc格式

标签：礼物教程 3d

热门焦点

HTML5制作3D爱心动画教程献给女友浪漫的礼物_html5教程技巧

HTML5制作3D爱心动画教程献给女友浪漫的礼物_html5教程技巧

HTML5制作3D爱心动画教程献给女友浪漫的礼物_html5教程技巧

最新推荐

猜你喜欢

热门推荐