學習鏈接：B站視頻
演示
代碼
<body>
<main>
</main>
</body>
main {
width: 100vw;
height: 100vh;
background-color: #34495e;
transform: scale(0); /* 設置縮放剛開始爲0 */
animation-name: scale, background, radius; /* 盒子添加動畫名稱 */
animation-duration: 2s, 3s, 2s; /* 設置每個動畫的時間 */
animation-fill-mode: forwards; /* 設置動畫狀態在最後定格 */
display: flex;
align-items: center;
justify-content: center;
}
main::after { /* 設置文字僞元素 */
content: '鴨鴨最帥';
font-size: 2em;
color: #ffffff;
opacity: 0;
animation-name: opacity; /* 文字添加動畫名稱 */
animation-duration: 2s; /* 設置動畫的時間 */
animation-delay: 3s; /* 設置動畫延遲時間 */
animation-fill-mode: forwards; /* 設置動畫狀態在最後定格 */
}
@keyframes opacity { /* 定義關鍵幀: 透明度 */
to {
opacity: .8;
}
}
@keyframes scale { /* 定義關鍵幀: 縮放，旋轉 */
25% {
transform: scale(0.5);
}
50% {
transform: scale(1) rotate(360deg);
}
75% {
transform: scale(0.5);
}
100% {
transform: scale(1);
}
}
@keyframes background { /* 定義關鍵幀:顏色 */
25% {
background-color: #2ecc71;
}
50% {
background-color: #f1c40f;
}
75% {
background-color: #8e44ad;
}
100% {
background-color: #e74c3c;
}
}
@keyframes radius { /* 定義關鍵幀: 圓角 */
25% {
border-radius: 50%;
}
50% {
border-radius: 0;
}
75% {
border-radius: 50%;
}
100% {
border-radius: 0;
}
}