浪漫程序员会表白之抖音旋转立方体照片墙
在继上一次写了抖音上的时钟屏保,被我改造完用来表白后,有个兄弟给我评论,下一篇《淘宝上超火的水晶发光相册,被我买来用于表白》,恰好我之前写过这个小demo,于是我忙里偷闲把这个小demo的博客写了出来。
写在前面,源代码传到github上,在最下面,大家自行下载
这个小demo
使用的是html + css3 + javascript
实现,主要目的是锻炼我的编(撩)程(妹)技(能)术(力)!
闲言少许,书归正文,先看看效果图吧,还是因为csdn上只能上传5M的图,所以只能降帧做gif
啦
上次写的小demo,还有兄弟希望适配一下移动端,所以我简单的使用媒体查询+JavaScript,适配了下移动端。上效果图
各位看官,如果效果图不尽人意
因为在移动端没用鼠标悬浮事件,所以我改成直接将立方体放大的效果。
我在写这个项目的最初目的是为了练习一下css3中的过渡、变换和动画,所以在立方体部分几乎都是由css3来完成。我建议大家在看这个项目之前,先学习一下css3的新语法。学成之后,再做这个小demo的话,你的css3过渡、变换和动画这部分就可以通神了!
我来依次解释这个小demo是如何一步一步完成的:
从上面的演示,我们可以清楚的看到,这个小demo,总共分成四个阶段:
- 图片平铺的初始状态
- 点击后,图片逐渐由小变大,再缩小(闪烁效果)
- 图片旋转一周后逐渐缩小消失
- 出现立方体,pc端鼠标悬浮时放大,移动端直接缓慢放大
在未点击时,图片是通过js生成的:
function initImg() {const imgBox = document.getElementsByClassName("imgBox")[0]//生成图片的数量let index = 30if(document.body.clientWidth < 450){//适配移动端index = 15}for (var i = 0; i < index; i++) {var src = 0//随机生成图片的路径,大图片和小图片中随机if(Math.random()>0.5){src = Math.floor(Math.random() * 6) +1;}else{src = "0" + (Math.floor(Math.random() * 6) +1);}var img = document.createElement("img")img.src = `./img/${src}.png`imgBox.appendChild(img)}
}
代码中,获取了屏幕宽度,是为了适配移动端,当屏幕宽度小于450px时,只生成15张图片
注意图片的格式,因为后面需要变成立方体,且分大小,所以小图片是0开头的,大小是100 x 100像素,大图片是400 X 400像素,为了更清楚点,我还是放个图吧
下面就是点击时图片消失的效果了:
function bindEvent(){//获取按钮,设置点击事件const btn = document.getElementsByClassName("btn")[0]btn.onclick = function(e){//获取所有的图片let imgs = document.getElementsByTagName("img")for(let i=0;i<imgs.length;i++){setTimeout(() => {//每个图片随机延迟1s内进行变小操作//变小动画imgs[i].style.animation = "small 2s linear forwards"}, Math.random()*1000);}//此时按钮已经没用作用了,我们让按钮慢慢消失let btn = document.getElementsByClassName("btn")[0]btn.style.animation = 'display 4s linear forwards'setTimeout(() => {showCircle() // 当所有的图片都变小消失后,开始旋转一周}, 3000);}
}
不知道大家有没有注意到在调用showCircle()
,做了一个三秒延迟,是因为我们要在变小动画都结束时才可以调用。为什么是三秒呢?嘿嘿嘿嘿,因为动画时间2s + 随机延迟 最多1s。
我们来看一下动画效果:so easy
@keyframes small{0%{transform: scale(1);opacity: 1;}20%{transform: scale(0);opacity: 1;}50%{transform: scale(0);opacity: 1;}100%{transform: scale(1);opacity: 0;}
}@keyframes display{0%{ opacity: 1;}100%{ opacity: 0;}
}
当图片消失后的showCircle()
方法:
function showCircle(){let imgs = document.getElementsByTagName("img")for(let i=0;i<imgs.length;i++){imgs[i].style.animation = ''imgs[i].style.opacity = 0//旋转一圈,当然我们需要将z轴向后随机移动一些imgs[i].style.transform = "rotateY(0deg) translateZ(-"+ Math.random()*500 +"px)"//过渡时间1.5simgs[i].style.transition = "all 1.5s linear"setTimeout(() => {imgs[i].style.opacity = 1//旋转一周imgs[i].style.transform = "rotateY(-360deg) translateZ(0)"}, Math.random()*1000);}setTimeout(() => {displayImg()}, 2000);
}
接下来就是变成魔方效果了,魔方效果主要是通过css3来完成的,先看看代码操作吧。
function displayImg(){let imgs = document.getElementsByTagName("img")for(let i=0;i<imgs.length;i++){setTimeout(() => {imgs[i].style.animation = "displayImg 1s linear forwards"}, Math.random()*1000);}setTimeout(() => {//这里的操作是将原来的文本替换掉,换成魔方的htmllet wrappper = document.getElementsByClassName("wrapper")[0]wrappper.parentNode.removeChild(wrappper)var box = document.createElement("div")box.classList.add("box")let ul = document.createElement("ul")ul.classList.add("minbox")for(var j=0;j<6;j++){let li = document.createElement("li")ul.appendChild(li)}let ol = document.createElement("ol")ol.classList.add("maxbox")for(var j=0;j<6;j++){let li = document.createElement("li")ol.appendChild(li)}box.appendChild(ul)box.appendChild(ol)document.getElementsByTagName("body")[0].appendChild(box)}, 2000);
}
魔方的样式是提前写好的,加上class类的时候,会直接作用上。html结构,下面来说道说道css3的魔方效果。
css3在前端是非常重要的,前面的设置大小,居中,绝对定位等等,我就不解释了。
.minbox li:nth-child(1){background: url(../img/01.png) no-repeat 0 0;transform:translateZ(50px);
}
.minbox li:nth-child(2){background: url(../img/02.png) no-repeat 0 0;transform:rotateX(180deg) rotate(180deg) translateZ(50px);
}
.minbox li:nth-child(3){background: url(../img/03.png) no-repeat 0 0;transform:rotateX(-90deg) translateZ(50px);
}
.minbox li:nth-child(4){background: url(../img/04.png) no-repeat 0 0;transform:rotateX(90deg) translateZ(50px);
}
.minbox li:nth-child(5){background: url(../img/05.png) no-repeat 0 0;transform:rotateY(-90deg) translateZ(50px);
}
这里的六个样式是构建一个立方体,沿y轴旋转90、180deg,在移动z轴的距离,当旋转之后,旋转轴也会发生改变,所以此时只要移动z轴就可以了
@media (min-width: 450px){/* */
}
@media (max-width: 450px){/* */
}
上面的代码是为了适配移动端。具体操作看代码吧。
@keyframes move{0%{transform: rotateX(13deg) rotateY(0deg);}100%{transform:rotateX(13deg) rotateY(360deg);}
}
立方体旋转的动画就很简单啦,是无限次循环旋转360deg
在移动端时,我们把鼠标悬浮效果去掉了,通过js实现逐渐放大
if (document.body.clientWidth < 450) {//移动端时,直接让其变成大图,无鼠标悬浮效果let lis = document.getElementsByClassName("maxbox")[0].childrenfor(let i=0;i<lis.length;i++){lis[i].style.transition = "all 2s"lis[i].style.width = "200px"lis[i].style.height = "200px"lis[i].style.opacity = "0.8"lis[i].style.left = "-25px"lis[i].style.top = "-25px"}lis[0].style.transform = "translateZ(150px)"//...此处省略lis[5].style.transform = "rotateY(90deg) translateZ(150px)"
}
移动端适配这方面我接触的不多,只是按照谷歌浏览器的模拟来做的,以450px为分割点。学习之路,永无止境
设置一个旋转动画,为box类加上动画效果
animation:move 5s linear infinite;
其他的代码都大差不差,我相信各位一定可以看得懂。
下面附上源码的github地址:https://github.com/young-monk/rotate-cube
如果不会使用git的话,看图操作。
文章最后再附上之前写的钢铁程序员写给女朋友的情话
浪漫程序员会表白之抖音旋转立方体照片墙相关推荐
- HTML5七夕情人节表白网页(抖音3D立方体图像库) HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页❤抖音❤3D立方体图像库❤ HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白 这是程序 ...
- 抖音程序员HTML相册,快手抖音程序员表白女朋友3D立体相册源码html网页相册代码...
前几天分享了一套源码,今天又为大家带来一套类似的源码,希望大家喜欢! 快手抖音很火的程序员女朋友3D立体相册源码html网页相册代码,经测试在IE8浏览器下无法预览,建议使用支持HTML5与css3效 ...
- 程序员撩妹指南-抖音爆火3D相册
前言 最近, 妹子突然转发了一个抖音小视频 如图,就是拿女朋友照片做了个酷炫的相册 搞起 好的, 我懂了,这不就是标准的 "你看看别人家的老公多浪漫的意思么?!!". 小编顿时不 ...
- (对抖音程序员隔空笔芯)抖音解析去水印iteminfo接口被封死,再放一个最新的去水印原理,无视频长度限制
1.原有接口 关于抖音去水印,我写过好几篇了文章了,当然去水印方法也换了好多种.距离这次更新最近的方法也已失效. 上面提到的方法,就是用的抖音移动端网页的 iteminfo 接口,很多朋友用了很久了, ...
- 程序员失业后拍抖音,一夜之间涨粉90万,获得数十万收益
2020年你失业了吗? 你的一技之长,能支撑你养家糊口吗? 程序员失业拍抖音获千万粉丝 2018年底,95后两位年轻人,因为公司的倒闭,被迫失业了. 因为他们曾在公司的岗位上是从事3D动画制作方面的工 ...
- 推荐程序员面试秘籍!抖音Java后端123面开挂,太牛了!
前言 Spring已经是我们Java Web开发必不可少的一个框架,其大大简化了我们的开发,提高了开发者的效率.同时,其源码对于开发者来说也是宝藏,从中我们可以学习到非常优秀的设计思想以及优雅的命名规 ...
- HTML5七夕情人节表白网页(抖音-流动爱心表白)HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 爱心表白网页
HTML5七夕情人节表白网页❤抖音-流动爱心表白❤ HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 爱心表白网页 这是程序员表白 ...
- HTML5七夕情人节表白网页(抖音-罗盘时钟) HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页❤抖音罗盘时钟❤ HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白 这是程序员表白系列 ...
- 程序员表白简短html代码,【杂谈】2018浪漫七夕:7款程序员必备表白源码(超炫酷)...
2018七夕将要来临,ki4网给大家准备了七款程序员表白专用源码,让你可以一举俘获美人心,下面就来看一看这七款表白代码大全,包含html.html5.CSS.JQ编写的一些非常简单实用的表白代码,非常 ...
最新文章
- 移动芯片领域变天?苹果宣布重大决定,芯片霸主市值一夜蒸发近千亿
- xgboost 正则项_深入理解Boosting算法(4)-XGBoost
- 2013年新的开始,每周至少要写一篇博客!
- JZOJ 5184. 【NOIP2017提高组模拟6.29】Gift
- 智能布线系统,“智”在何方
- 蜗杆参数法设计_技术贴 | 减速器结构及设计的注意事项
- Linux——VMware虚拟机安装CentOS步骤
- usb接口 spec_USB连接器发展演变和趋势
- conky的自动启动
- Unix domain socket IPC
- swagger默认访问地址
- 凸优化第二章凸集 2.5分离与支撑超平面
- 中文计算机语言编程优势,十种编程语言特点比较
- 【YOLOV5-5.x 源码解读】yolo.py
- 吉比特2021秋招数据分析笔试
- F5 GTM DNS 知识点和实验 6 -智能DNS算法
- 感恩,生命的馈赠(2014年终总结)
- 共享扫码娃娃机无现金化扫码支付
- 使用eclipse遇到问题:the-package-collides-with-a-type
- 网络优化整体解决方案 企业网络优化的好帮手