資訊專欄INFORMATION COLUMN
摘要：代碼解讀定義一個名為的容器內容居中顯示畫條紋背景在容器內定義一個名為的容器容器留出厚邊框，容器嵌在其中設置厚邊框的立體效果容器中增加內容內容布局定義動畫效果最后，把動畫效果應用到容器上大功告成知識點
效果預覽
按下右側的“點擊預覽”按鈕在當前頁面預覽，點擊鏈接全屏預覽。
https://codepen.io/zhang-ou/pen/YLqbXy
可交互視頻教程此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。
請用 chrome, safari, edge 打開觀看。
https://scrimba.com/c/cPvn6tE
源代碼下載請從 github 下載。
https://github.com/comehope/front-end-daily-challenges/tree/master/003-diagonal-stripe-border-effects
代碼解讀定義一個名為 box 的容器：
內容居中顯示：
html,
body {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
畫條紋背景：
.box {
width: 300px;
height: 300px;
background: linear-gradient(
-45deg,
white 0%,
white 25%,
hotpink 25%,
hotpink 50%,
white 50%,
white 75%,
hotpink 75%,
hotpink 100%);
background-size: 10%;
}
在 box 容器內定義一個名為 content 的容器：
box 容器留出厚邊框，content 容器嵌在其中：
.box .content {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.box {
box-sizing: border-box;
padding: 15px;
}
.box .content {
background-color: white;
}
設置厚邊框的立體效果：
.box,
.box .content {
box-shadow: 0 0 2px deeppink,
0 0 5px rgba(0, 0, 0, 1),
inset 0 0 5px rgba(0, 0, 0, 1);
border-radius: 10px;
}
content 容器中增加內容：
What is Lorem Ipsum?
Mauris volutpat risus quis nisi tempus hendrerit. Nullam nisi urna, suscipit quis risus sed, congue congue quam. Morbi sit amet suscipit ex. Vivamus vel nulla ac libero volutpat ultrices.
內容布局：
.box .content {
flex-direction: column;
box-sizing: border-box;
padding: 30px;
text-align: center;
font-family: sans-serif;
}
.box .content h2 {
color: deeppink;
}
.box .content p {
color: dimgray;
}
定義動畫效果：
@keyframes animate {
from {
background-position: 0;
}
to {
background-position: 10%;
}
}
最后，把動畫效果應用到 box 容器上：
.box {
animation: animate 2s linear infinite;
}
大功告成！
知識點linear-gradient https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
box-shadow https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
@keyframes https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes
background-size https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
background-position https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
lorem ipsum https://lipsum.com/
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52243.html
摘要：代碼解讀定義一個名為的容器內容居中顯示畫條紋背景在容器內定義一個名為的容器容器留出厚邊框，容器嵌在其中設置厚邊框的立體效果容器中增加內容內容布局定義動畫效果最后，把動畫效果應用到容器上大功告成知識點 showImg(https://segmentfault.com/img/bVbcWRf?w=500&h=500); 效果預覽 按下右側的點擊預覽按鈕在當前頁面預覽，點擊鏈接全屏預覽。 h...
摘要：前端每日實戰專欄每天分解一個前端項目，用視頻記錄編碼過程，再配合詳細的代碼解讀，是學習前端開發的活的參考書以下是年月份發布的項目視頻演示如何用純創作一個按鈕文字滑動特效視頻演示如何用純創作一個矩形旋轉特效視頻演示如何用純創作一個容器厚條紋邊 《前端每日實戰》專欄每天分解一個前端項目，用視頻記錄編碼過程，再配合詳細的代碼解讀，是學習前端開發的活的參考書！ 以下是 2018 年 4 月份發...
摘要：前端每日實戰專欄每天分解一個前端項目，用視頻記錄編碼過程，再配合詳細的代碼解讀，是學習前端開發的活的參考書以下是年月份發布的項目視頻演示如何用純創作一個按鈕文字滑動特效視頻演示如何用純創作一個矩形旋轉特效視頻演示如何用純創作一個容器厚條紋邊 《前端每日實戰》專欄每天分解一個前端項目，用視頻記錄編碼過程，再配合詳細的代碼解讀，是學習前端開發的活的參考書！ 以下是 2018 年 4 月份發...
閱讀 1697·2021-10-09 09:44
閱讀 3263·2021-09-27 13:36
閱讀 1520·2021-09-22 15:33
閱讀 1274·2021-09-22 15:23
閱讀 1159·2021-09-06 15:02
閱讀 1695·2019-08-29 16:14
閱讀 2901·2019-08-29 15:26
閱讀 2408·2019-08-28 18:08
