在繼上一次寫了抖音上的時鐘屏保,被我改造完用來表白後,有個兄弟給我評論,下一篇《淘寶上超火的水晶發光相冊,被我買來用於表白》,恰好我之前寫過這個小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 = 30
if(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.5s
imgs[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(() => {
//這裏的操作是將原來的文本替換掉,換成魔方的html
let 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].children
for(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的話,看圖操作。
文章最後再附上之前寫的鋼鐵程序員寫給女朋友的情話