如何用純 CSS 創作一個記事本翻頁動畫
阿新 • • 發佈:2018-11-22
效果預覽
按下右側的“點選預覽”按鈕可以在當前頁面預覽,點選連結可以全屏預覽。
https://codepen.io/comehope/pen/qKOPGw
可互動視訊教程
此視訊是可以互動的,你可以隨時暫停視訊,編輯視訊中的程式碼。
請用 chrome, safari, edge 開啟觀看。
https://scrimba.com/p/pEgDAM/c6GV2Ay
原始碼下載
本地下載
每日前端實戰系列的全部原始碼請從 github 下載:
https://github.com/comehope/front-end-daily-challenges
程式碼解讀
定義 dom,一個 book 容器中包含一個 page 容器,page 中再包含 5 個 <span>,page 用於繪製書頁,<span> 用於繪製筆劃:
<div class="book"> <div class="page"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </div>
重定義盒模型:
* {
box-sizing: border-box;
}
定義書的尺寸:
.book {
--sw: 0.3em; /* stroke width */
width: 15em;
height: 10em;
background-color: white;
border: var(--sw) solid cadetblue;
border-radius: var(--sw);
font-size: 20px;
}
定義書頁的尺寸:
.book { position: relative; } .book .page { height: inherit; width: calc(50% + var(--sw) + var(--sw) / 2); background-color: inherit; border: inherit; border-radius: inherit; position: absolute; top: calc(-1 * var(--sw)); right: calc(-1 * var(--sw)); }
繪製書頁上的筆劃:
.book .page {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 8% 5%;
}
.book .page span {
display: block;
width: 100%;
border-top: var(--sw) solid cadetblue;
border-radius: inherit;
}
定義筆劃動畫效果,依次畫出 5 個筆劃:
.book .page span {
animation: 4s linear infinite;
transform-origin: left;
transform: scaleX(0);
}
.book .page span:nth-child(1) {
animation-name: stroke-1;
}
.book .page span:nth-child(2) {
animation-name: stroke-2;
}
.book .page span:nth-child(3) {
animation-name: stroke-3;
}
.book .page span:nth-child(4) {
animation-name: stroke-4;
}
.book .page span:nth-child(5) {
animation-name: stroke-5;
}
@keyframes stroke-1 {
0% {
transform: scaleX(0);
}
10%, 100% {
transform: scaleX(1);
}
}
@keyframes stroke-2 {
10% {
transform: scaleX(0);
}
20%, 100% {
transform: scaleX(1);
}
}
@keyframes stroke-3 {
20% {
transform: scaleX(0);
}
30%, 100% {
transform: scaleX(1);
}
}
@keyframes stroke-4 {
30% {
transform: scaleX(0);
}
40%, 100% {
transform: scaleX(1);
}
}
@keyframes stroke-5 {
40% {
transform: scaleX(0);
}
50%, 100% {
transform: scaleX(1);
}
}
最後,定義書頁翻動的效果:
.book .page {
animation: flip 4s linear infinite;
transform-origin: left;
transform-style: preserve-3d;
}
@keyframes flip {
55% {
transform: rotateY(0) translateX(0) skewY(0);
}
70% {
transform: rotateY(-90deg) translateX(calc(-1 * var(--sw) / 2)) skewY(-20deg);
}
80%, 100% {
transform: rotateY(-180deg) translateX(calc(-1 * var(--sw))) skewY(0);
}
}
.book .page span {
backface-visibility: hidden;
}
大功告成!
原文地址:https://segmentfault.com/a/1190000015142453