脚本宝典收集整理的这篇文章主要介绍了HTML5制作3D爱心动画教程 献给女友浪漫的礼物,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
谁说程序员不懂得浪漫,看看程序员是怎么浪漫的,今天小编在国外的网站上看到一个利用HTML5和CSS3制作的3D爱心动画,在情人节时送给心爱的人,还是非常不错的。当然了。背景我们可以用一些浪漫元素。如加上女朋友漂亮的照片。这样可以制作一个廉价又很有意义的情人节礼物。大家可以点解DEMO来看看。先上效果图:
实现代码如下:
html代码:
- <div class=’heart3d’>
- <div class=’rib1&PRime;></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,主要是构造爱心的线条区域。
CSS代码:
对这些线条进行渲染,以便其有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);
- }
- }
以上就是HTML代码和CSS代码实现的3D爱心动画效果,浪漫的小伙子可以试着学习一下哦,又get一个交友技能,谢谢阅读,希望能帮到大家,请继续关注脚本宝典,我们会努力分享更多优秀的文章。
脚本宝典总结
以上是脚本宝典为你收集整理的HTML5制作3D爱心动画教程 献给女友浪漫的礼物全部内容,希望文章能够帮你解决HTML5制作3D爱心动画教程 献给女友浪漫的礼物所遇到的问题。
如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。