資訊專欄INFORMATION COLUMN
摘要：代碼解讀定義一個名為的容器內(nèi)容居中顯示畫條紋背景在容器內(nèi)定義一個名為的容器容器留出厚邊框，容器嵌在其中設(shè)置厚邊框的立體效果容器中增加內(nèi)容內(nèi)容布局定義動畫效果最后，把動畫效果應(yīng)用到容器上大功告成知識點
效果預(yù)覽
按下右側(cè)的“點擊預(yù)覽”按鈕在當前頁面預(yù)覽，點擊鏈接全屏預(yù)覽。
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 的容器：
內(nèi)容居中顯示：
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 容器內(nèi)定義一個名為 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;
}
設(shè)置厚邊框的立體效果：
.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 容器中增加內(nèi)容：
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.
內(nèi)容布局：
.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%;
}
}
最后，把動畫效果應(yīng)用到 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/
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/113132.html
摘要：代碼解讀定義一個名為的容器內(nèi)容居中顯示畫條紋背景在容器內(nèi)定義一個名為的容器容器留出厚邊框，容器嵌在其中設(shè)置厚邊框的立體效果容器中增加內(nèi)容內(nèi)容布局定義動畫效果最后，把動畫效果應(yīng)用到容器上大功告成知識點 showImg(https://segmentfault.com/img/bVbcWRf?w=500&h=500); 效果預(yù)覽 按下右側(cè)的點擊預(yù)覽按鈕在當前頁面預(yù)覽，點擊鏈接全屏預(yù)覽。 h...
摘要：前端每日實戰(zhàn)專欄每天分解一個前端項目，用視頻記錄編碼過程，再配合詳細的代碼解讀，是學習前端開發(fā)的活的參考書以下是年月份發(fā)布的項目視頻演示如何用純創(chuàng)作一個按鈕文字滑動特效視頻演示如何用純創(chuàng)作一個矩形旋轉(zhuǎn)特效視頻演示如何用純創(chuàng)作一個容器厚條紋邊 《前端每日實戰(zhàn)》專欄每天分解一個前端項目，用視頻記錄編碼過程，再配合詳細的代碼解讀，是學習前端開發(fā)的活的參考書！ 以下是 2018 年 4 月份發(fā)...
摘要：前端每日實戰(zhàn)專欄每天分解一個前端項目，用視頻記錄編碼過程，再配合詳細的代碼解讀，是學習前端開發(fā)的活的參考書以下是年月份發(fā)布的項目視頻演示如何用純創(chuàng)作一個按鈕文字滑動特效視頻演示如何用純創(chuàng)作一個矩形旋轉(zhuǎn)特效視頻演示如何用純創(chuàng)作一個容器厚條紋邊 《前端每日實戰(zhàn)》專欄每天分解一個前端項目，用視頻記錄編碼過程，再配合詳細的代碼解讀，是學習前端開發(fā)的活的參考書！ 以下是 2018 年 4 月份發(fā)...
閱讀 1176·2021-11-15 18:14
閱讀 3649·2021-11-15 11:37
閱讀 770·2021-09-24 09:47
閱讀 2457·2021-09-04 16:48
閱讀 2190·2019-08-30 15:53
閱讀 2396·2019-08-30 15:53
閱讀 401·2019-08-30 11:20
閱讀 1247·2019-08-29 16:08
