七夕情人节表白-纯JS实现3D心形+图片旋转
七夕情人节就快到了,这里献上纯js表白神器-心里都是你,预览:
技术点:css-3d、js-随机色、js-transform
1.html:
<div class="heart">
<div class="cube">
<div>
<img src="data:images/1.jpg" width="100" height="100" alt="">
</div>
<div>
<img src="data:images/2.jpg" width="100" height="100" alt="">
</div>
<div>
<img src="data:images/3.jpg" width="100" height="100" alt="">
</div>
<div>
<img src="data:images/4.jpg" width="100" height="100" alt="">
</div>
<div>
<img src="data:images/5.jpg" width="100" height="100" alt="">
</div>
<div>
<img src="data:images/6.jpg" width="100" height="100" alt="">
</div>
</div>
</div>
2.css:
*{
margin:;
padding:;
}
body{
background:#000;
overflow:hidden;
}
.heart{
position:absolute;
left:;
right:;
top:;
bottom:;
width:200px;
height:260px;
margin: auto;
transform-style:preserve-3d;
perspective:800px;
animation:rot 15s linear infinite;
}
@keyframes rot{
from{transform:rotateY(0deg) rotateX(0deg)}
to{transform:rotateY(360deg) rotateX(360deg)}
}
.rib{
position:absolute;
width:200px;
height:260px;
border:solid red;
border-width:1px 1px 0 0;
border-radius:100% 100% 0/40% 100% 0;
transition: all 1s;
}
.cube{
position:absolute;
left:;
right:;
top:;
bottom:;
margin:auto;
width:100px;
height:100px;
color:red;
transform-style:preserve-3d;
transform:translateZ(50px);
}
.cube div{
position:absolute;
width:100px;
height:100px;
}
.cube div:nth-child(1){
left:;
top:-100px;
transform-origin:bottom;
transform:rotateX(90deg);
}
.cube div:nth-child(2){
left:;
top:100px;
transform-origin:top;
transform:rotateX(-90deg);
}
.cube div:nth-child(3){
left:-100px;
top:0px;
transform-origin:right;
transform:rotateY(-90deg);
}
.cube div:nth-child(4){
left:100px;
top:0px;
transform-origin:left;
transform:rotateY(90deg);
}
.cube div:nth-child(5){
left:;
top:0px;
}
.cube div:nth-child(6){
left:;
top:0px;
transform:translateZ(-100px);
}
3.js:
var heart = document.getElementsByClassName("heart")[0];
for (var i = 0; i < 36; i++) {
var oDiv = document.createElement("div");
oDiv.className = "rib";
// 画36条心形曲线
oDiv.style.transform = "rotateY(" + 10 * i + "deg) rotateZ(45deg) translateX(30px)";
var n = 0;
setInterval(function() {
if (n < 36) {
document.getElementsByClassName('rib')[n].style.borderColor = getRandomColor();
n = n + 1;
} else {
n = 0;
}
},1000)
console.log(n)
heart.appendChild(oDiv);
} // 随机色
var getRandomColor = function(){
return '#' +
(function(color){
return (color += '0123456789abcdef'[Math.floor(Math.random()*16)])
&& (color.length == 6) ? color : arguments.callee(color);
})('');
}
图片资源自行填充。
下图效果只是添加了一个hover改变div的transform属性,大家可以扩展制作。
七夕情人节表白-纯JS实现3D心形+图片旋转的更多相关文章
- 纯JS写最简单的图片轮播
非常简单的一个大图轮播,通过将控制显示位置来进行轮播效果,写来给正在学习的新手朋友们参考交流. 先看效果:(实际效果没有这么快) 先看布局: <div id="display" ...
- [deviceone开发]-心形点赞动画示例
一.简介 这个示例展示do_Animator组件的简单使用,通过点击"点赞"按钮,不断弹出心形图片,向上动画漂移到顶部消失.间隔时间和上下左右移动的步长都是一定范围的随机值.二.效 ...
- [deviceone开发]-直播APP心形点赞动画示例
一.简介 这个示例展示do_Animator组件的简单使用,通过点击"点赞"按钮,不断弹出心形图片,向上动画漂移到顶部消失.间隔时间和上下左右移动的步长都是一定范围的随机值. 二. ...
- 七夕节表白3d相册制作(html5+css3)
七夕节表白3d相册制作 涉及知识点 定位 阴影 3d转换 动画 主要思路: 通过定位将所有照片叠在一起,在设置默认的样式以及照片的布局,最后通过设置盒子以及照片的旋转动画来达到效果. 代码如下: &l ...
- JQ实现情人节表白程序
JQ实现情人节表白页面 效果图: 表白利页,你值得拥有哦! 代码如下,复制即可使用: <!doctype html> <html> <head> <meta ...
- 纯JS实现俄罗斯方块,打造属于你的游戏帝国
纯JS俄罗斯方块,打造属于你的游戏帝国. 本文原始作者博客 http://www.cnblogs.com/toutou 俄罗斯方块(Tetris, 俄文:Тетрис)是一款电视游戏机和掌上游戏机游戏 ...
- F2工作流引擎之-纯JS Web在线可拖拽的流程设计器(八)
Web纯JS流程设计器无需编程,完全是通过鼠标拖.拉.拽的方式来完成,支持串行.并行.分支.异或分支.M取N路分支.会签.聚合.多重聚合.退回.传阅.转交,都可以非常方便快捷地实现,管理员 ...
- [原创]纯JS实现网页中多选复选框checkbox和单选radio的美化效果
图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...
- 纯js异步无刷新请求(只支持IE)
纯js异步无刷新请求 下载地址:http://pan.baidu.com/s/1slakL1F 所以因为非IE浏览器都禁止跨域请求,所以以只支持IE. <HTML> <!-- 乱码( ...
随机推荐
- LeetCode 4.反转整数
给定一个 32 位有符号整数,将整数中的数字进行反转. 示例 1: 输入: 123 输出: 321 示例 2: 输入: -123 输出: -321 示例 3: 输入: 120 输出: 21 注意: ...
- scala 基础到高阶
本文打算对这小段时间学习 scala 以及 spark 编程技术做个小结,一来温故而知新,而来为以后查阅方便 spark scala 入门小例子 文本文件 UserPurchaseHistory.c ...
- 兼容 IE6+ 获取图片大小
昨天说了 HTML5 的file对象可以获取到文件的 文件名,文件大小,文件类型,最后一次修改日期.其实 IE6-9 也可以变向的获取到,虽然没那么方便,但至少可以取到.来看例子吧: <!doc ...
- AngularJS开发指南:表达式
---恢复内容开始--- 表达式是类似Javascript的代码片段,通常在绑定中用到,写在双大括号中如{{表达式}}.表达式是用$parse方法来处理的. 下面是一些合法的AngularJS表达式 ...
- java代码实现图片处理功能。对图片质量进行压缩。
java图片处理有点头疼,找了很多资料.在这里进行一个汇总,记录下个人的体验,也希望对大家有所帮助. 需求:浏览的图片需要在1M一下. 1.真正对图片的质量进行压缩的(不是通过修改图片的高,宽进行缩小 ...
- 判断gps是否在国内
参考文章:[WP7]判断GPS坐标是否在中国 根据国家行政边界判定(光线投射算法) 按需求调整了原文中的部分边界值,测试几组边界附近内外坐标,结果较为准确. /** * 判断GPS坐标是否在多边形中 ...
- xml json
简单概括的话就是,xml本身是一种格式规范,是一种包含了数据以及数据说明的文本格式规范. 比如,我们要给对方传输一段数据,数据内容是“too young,too simple,sometimes na ...
- ssh-copy-id 复制公钥到远程server
ssh-copy-id -i ~/.ssh/mykey.pub user@host 复制完成后可以测试: ssh -i ~/.ssh/mykey user@host
- Tesseract-OCR 3.05 多过语言文字识别(运行程序+中英日韩语言包)
最新版本 静态编译 tesseract 3.05.00dev leptonica-1.73 libgif 5.1.3 : libjpeg 8c : libpng 1.6.16 : libtiff 3. ...
- apache本地配置多域名(wampserver本地配置多域名)
我们在本地开发时,一般是在浏览器输入 http://localhost/项目文件夹名来测试网页文件,你有没有想过在本地在浏览器输入你自己设定的一个域名进入项目文件夹中去,本地配置多域名可以测试二级域名 ...