如何不用 transition 和 animation 也能做網頁動畫
阿新 • • 發佈:2018-11-21
效果預覽
按下右側的“點選預覽”按鈕可以在當前頁面預覽,點選連結可以全屏預覽。
https://codepen.io/comehope/pen/BxbQJj
可互動視訊教程
此視訊是可以互動的,你可以隨時暫停視訊,編輯視訊中的程式碼。
請用 chrome, safari, edge 開啟觀看。
原始碼下載
本地下載
每日前端實戰系列的全部原始碼請從 github 下載:
https://github.com/comehope/front-end-daily-challenges
程式碼解讀
定義 dom,一個容器中包含 4 個子元素,每個子元素的內容就是一堆斜線:
<div class="frame"> <div class="wall top"><marquee>////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</marquee></div> <div class="wall right"><marquee>////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</marquee></div> <div class="wall bottom"><marquee>////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</marquee></div> <div class="wall left"><marquee>////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</marquee></div> </div>
居中顯示:
body {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
定義容器尺寸:
.frame {
width: 100vmin;
height: 100vmin;
background-color: whitesmoke;
}
隱藏超出容器的內容:
.wall {
overflow: hidden;
}
把 4 個元素向四個方向旋轉,互相垂直:
.wall { transform-origin: 0 0; } .wall.top { transform: rotate(0deg); } .wall.right { transform: rotate(90deg); } .wall.bottom { transform: rotate(180deg); } .wall.left { transform: rotate(270deg); }
定位它們,形成一個正方形:
.frame {
position: relative;
}
.wall {
position: absolute;
width: 100%;
}
.wall.top {
top: 0;
left: 0;
}
.wall.right {
top: 0;
left: 100%;
}
.wall.bottom {
top: 100%;
left: 100%;
}
.wall.left {
top: 100%;
left: 0;
}
對 4 個元素進行 3d 旋轉:
.frame {
perspective: 40vmin;
}
.wall.top {
transform: rotate(0deg) rotateX(-90deg);
}
.wall.right {
transform: rotate(90deg) rotateX(-90deg);
}
.wall.bottom {
transform: rotate(180deg) rotateX(-90deg);
}
.wall.left {
transform: rotate(270deg) rotateX(-90deg);
}
把斜線加粗、放大:
.wall {
font-size: 75vmin;
font-weight: bold;
}
最後,把 dom 中的斜線用 <marquee> 標籤包圍起來:
<div class="frame">
<div class="wall top"><marquee>////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</marquee></div>
<div class="wall right"><marquee>////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</marquee></div>
<div class="wall bottom"><marquee>////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</marquee></div>
<div class="wall left"><marquee>////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</marquee></div>
</div>
大功告成!