您现在的位置是：网站首页> 编程资料编程资料
HTML5制作3D爱心动画教程 献给女友浪漫的礼物html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法
2021-09-01
1235人已围观
简介 这篇文章主要为大家介绍了一个利用HTML5和CSS3制作的3D爱心动画的教程，可以再任何的时间地点送给自己的女友，相当的浪漫，关键是代码相当简单，直接复制也可以哦
谁说程序员不懂得浪漫，看看程序员是怎么浪漫的，今天小编在国外的网站上看到一个利用HTML5和CSS3制作的3D爱心动画，在情人节时送给心爱的人，还是非常不错的。当然了。背景我们可以用一些浪漫元素。如加上女朋友漂亮的照片。这样可以制作一个廉价又很有意义的情人节礼物。大家可以点解DEMO来看看。先上效果图：
实现代码如下：
html代码：
XML/HTML Code复制内容到剪贴板
- <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，主要是构造爱心的线条区域。
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"] {
提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
相关内容
- html5 css3实例教程 一款html5和css3实现的小机器人走路动画html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法
- 实例教程 利用html5和css3打造一款创意404页面html5实现的模拟电视没有信号错误404页面动画效果源码html5和svg实现太空人404错误页面动画模板特效源码
- 基于html5实现的图片墙效果HTML5实现倾斜悬挂图片墙响应鼠标可移动效果HTML5实践-图片设置成灰度图html5 拖拽上传图片实例演示HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览HTML5实现的3D相册图片轮播动画特效源码HTML5图片预览实例分享利用HTML5的新特点实现图片文件异步上传一款超炫HTML5 3D立体图片相册效果HTML5 3D骨牌鼠标滑过图片呈现3D的效果在HTML5 Canvas中放入图片和保存为图片的方法
- html5版canvas自由拼图实例canvas拼图功能实现代码示例
- HTML5地理定位实例HTML5地理定位_动力节点Java学院整理HTML5实现获取地理位置信息并定位功能简单html5代码获取地理位置h5实现获取用户地理定位的实例代码
- 使用 HTML5 Canvas 制作水波纹效果点击图片就会触发canvas三角函数模拟水波效果的示例代码
- 一款html5 canvas实现的图片玻璃碎片特效html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法
- html5中的input新属性range使用记录HTML5新增的8类INPUT输入类型介绍html禁止清除input文本输入缓存的两种方法HTML5 input placeholder 颜色修改示例HTML 5 input placeholder 属性如何完美兼任ieHTML5 input元素类型：email及url介绍html5 input属性使用示例html4和html5区别之如何在一个input上添加焦点实现代码HTML5 input新增type属性color颜色拾取器的实例代码
- 浅谈html5 响应式布局吃透移动端 Html5 响应式布局
- html5+svg学习指南之SVG基础知识基于html5实现的svg图标手机菜单动态特效源码html5基于svg实现圆形进度统计动画特效源码基于HTML5 SVG制作汉堡包菜单按钮分段动画效果深入解析HTML5使用SVG图像时的viewBox属性用法HTML5+SVG实现的线性图表特效源码 可绘制图表区域颜色HTML5 SVG实现的Loading动画加载特效源码深入浅析HTML5中的SVG
点击排行
本栏推荐
