資訊專欄INFORMATION COLUMN
摘要：源代碼下載每日前端實戰(zhàn)系列的全部源代碼請從下載代碼解讀沒有元素，直接寫。設(shè)置頁面空間用偽元素設(shè)置背景圖案平移背景圖案讓背景圖案轉(zhuǎn)動起來平移頁面縮放頁面最后，增加變色效果大功告成
效果預(yù)覽
按下右側(cè)的“點擊預(yù)覽”按鈕可以在當(dāng)前頁面預(yù)覽，點擊鏈接可以全屏預(yù)覽。
https://codepen.io/comehope/pen/JBqjqm
可交互視頻此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。
請用 chrome, safari, edge 打開觀看。
https://scrimba.com/p/pEgDAM/cD3KwTw
源代碼下載每日前端實戰(zhàn)系列的全部源代碼請從 github 下載：
https://github.com/comehope/front-end-daily-challenges
代碼解讀沒有 dom 元素，直接寫 css。
設(shè)置頁面空間：
body {
position: fixed;
margin: 0;
width: 100vw;
height: 100vh;
}
用偽元素設(shè)置背景圖案：
body::before {
content: "";
position: fixed;
width: 200vmax;
height: 200vmax;
background-color: steelblue;
color: turquoise;
background-image:
linear-gradient(
45deg,
currentColor 25%,
transparent 25%, transparent 75%,
currentColor 75%),
linear-gradient(
45deg,
currentColor 25%,
transparent 25%, transparent 75%,
currentColor 75%);
background-position: 0 0, 5vmax 5vmax;
background-size: 10vmax 10vmax;
平移背景圖案：
body::before {
top: 50%;
left: 50%;
animation:
9s move infinite ease-in-out alternate;
}
@keyframes move {
from {
left: -40%;
top: -40%;
}
to {
left: -60%;
top: -60%;
}
}
讓背景圖案轉(zhuǎn)動起來：
body::before {
animation:
9s move infinite ease-in-out alternate,
9s -1.5s rotating infinite ease-in-out alternate;
}
@keyframes rotating {
to {
transform: rotate(180deg);
}
}
平移頁面：
body {
top: 50%;
left: 50%;
animation:
3s move infinite ease-in-out alternate;
}
縮放頁面：
body {
animation:
3s move infinite ease-in-out alternate,
3s zoom infinite ease-in-out alternate;
}
@keyframes zoom {
to {
transform: scale(10);
}
}
最后，增加變色效果：
@keyframes rotating {
to {
transform: rotate(180deg);
filter: hue-rotate(1turn);
}
}
大功告成！
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/113720.html
摘要：源代碼下載每日前端實戰(zhàn)系列的全部源代碼請從下載代碼解讀沒有元素，直接寫。設(shè)置頁面空間用偽元素設(shè)置背景圖案平移背景圖案讓背景圖案轉(zhuǎn)動起來平移頁面縮放頁面最后，增加變色效果大功告成 showImg(https://segmentfault.com/img/bVbfl2x?w=400&h=301); 效果預(yù)覽 按下右側(cè)的點擊預(yù)覽按鈕可以在當(dāng)前頁面預(yù)覽，點擊鏈接可以全屏預(yù)覽。 https://...
摘要：過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發(fā)布的項目前端每日實戰(zhàn)專欄每天分解一個前端項目，用視頻記錄編碼過程，再配合詳細(xì)的代碼解讀，是學(xué)習(xí)前端開發(fā)的活的參考書視頻演示如何用純創(chuàng)作一臺咖啡機視頻演示如何用 過往項目 2018 年 6 月份項目匯總（共 27 個項目） 2018 年 5 月份項目匯總（共 30 個項目） 2018 年 4 月份項目匯總（...
摘要：過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發(fā)布的項目前端每日實戰(zhàn)專欄每天分解一個前端項目，用視頻記錄編碼過程，再配合詳細(xì)的代碼解讀，是學(xué)習(xí)前端開發(fā)的活的參考書視頻演示如何用純創(chuàng)作一臺咖啡機視頻演示如何用 過往項目 2018 年 6 月份項目匯總（共 27 個項目） 2018 年 5 月份項目匯總（共 30 個項目） 2018 年 4 月份項目匯總（...
閱讀 2038·2021-10-08 10:05
閱讀 1882·2021-09-22 15:31
閱讀 3003·2021-09-22 15:13
閱讀 3478·2021-09-09 09:34
閱讀 2072·2021-09-03 10:46
閱讀 3113·2019-08-30 15:56
閱讀 1697·2019-08-30 15:53
閱讀 2351·2019-08-30 15:44
