資訊專欄INFORMATION COLUMN
摘要：代碼解讀定義一個(gè)名為的容器內(nèi)容居中顯示畫(huà)條紋背景在容器內(nèi)定義一個(gè)名為的容器容器留出厚邊框，容器嵌在其中設(shè)置厚邊框的立體效果容器中增加內(nèi)容內(nèi)容布局定義動(dòng)畫(huà)效果最后，把動(dòng)畫(huà)效果應(yīng)用到容器上大功告成知識(shí)點(diǎn)
效果預(yù)覽
按下右側(cè)的“點(diǎn)擊預(yù)覽”按鈕在當(dāng)前頁(yè)面預(yù)覽，點(diǎn)擊鏈接全屏預(yù)覽。
https://codepen.io/zhang-ou/pen/YLqbXy
可交互視頻教程此視頻是可以交互的，你可以隨時(shí)暫停視頻，編輯視頻中的代碼。
請(qǐng)用 chrome, safari, edge 打開(kāi)觀看。
https://scrimba.com/c/cPvn6tE
源代碼下載請(qǐng)從 github 下載。
https://github.com/comehope/front-end-daily-challenges/tree/master/003-diagonal-stripe-border-effects
代碼解讀定義一個(gè)名為 box 的容器：
內(nèi)容居中顯示：
html,
body {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
畫(huà)條紋背景：
.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)定義一個(gè)名為 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;
}
定義動(dòng)畫(huà)效果：
@keyframes animate {
from {
background-position: 0;
}
to {
background-position: 10%;
}
}
最后，把動(dòng)畫(huà)效果應(yīng)用到 box 容器上：
.box {
animation: animate 2s linear infinite;
}
大功告成！
知識(shí)點(diǎn)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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/113132.html
摘要：代碼解讀定義一個(gè)名為的容器內(nèi)容居中顯示畫(huà)條紋背景在容器內(nèi)定義一個(gè)名為的容器容器留出厚邊框，容器嵌在其中設(shè)置厚邊框的立體效果容器中增加內(nèi)容內(nèi)容布局定義動(dòng)畫(huà)效果最后，把動(dòng)畫(huà)效果應(yīng)用到容器上大功告成知識(shí)點(diǎn) showImg(https://segmentfault.com/img/bVbcWRf?w=500&h=500); 效果預(yù)覽 按下右側(cè)的點(diǎn)擊預(yù)覽按鈕在當(dāng)前頁(yè)面預(yù)覽，點(diǎn)擊鏈接全屏預(yù)覽。 h...
摘要：前端每日實(shí)戰(zhàn)專欄每天分解一個(gè)前端項(xiàng)目，用視頻記錄編碼過(guò)程，再配合詳細(xì)的代碼解讀，是學(xué)習(xí)前端開(kāi)發(fā)的活的參考書(shū)以下是年月份發(fā)布的項(xiàng)目視頻演示如何用純創(chuàng)作一個(gè)按鈕文字滑動(dòng)特效視頻演示如何用純創(chuàng)作一個(gè)矩形旋轉(zhuǎn)特效視頻演示如何用純創(chuàng)作一個(gè)容器厚條紋邊 《前端每日實(shí)戰(zhàn)》專欄每天分解一個(gè)前端項(xiàng)目，用視頻記錄編碼過(guò)程，再配合詳細(xì)的代碼解讀，是學(xué)習(xí)前端開(kāi)發(fā)的活的參考書(shū)！ 以下是 2018 年 4 月份發(fā)...
摘要：前端每日實(shí)戰(zhàn)專欄每天分解一個(gè)前端項(xiàng)目，用視頻記錄編碼過(guò)程，再配合詳細(xì)的代碼解讀，是學(xué)習(xí)前端開(kāi)發(fā)的活的參考書(shū)以下是年月份發(fā)布的項(xiàng)目視頻演示如何用純創(chuàng)作一個(gè)按鈕文字滑動(dòng)特效視頻演示如何用純創(chuàng)作一個(gè)矩形旋轉(zhuǎn)特效視頻演示如何用純創(chuàng)作一個(gè)容器厚條紋邊 《前端每日實(shí)戰(zhàn)》專欄每天分解一個(gè)前端項(xiàng)目，用視頻記錄編碼過(guò)程，再配合詳細(xì)的代碼解讀，是學(xué)習(xí)前端開(kāi)發(fā)的活的參考書(shū)！ 以下是 2018 年 4 月份發(fā)...
閱讀 1163·2021-11-15 18:14
閱讀 3627·2021-11-15 11:37
閱讀 754·2021-09-24 09:47
閱讀 2427·2021-09-04 16:48
閱讀 2182·2019-08-30 15:53
閱讀 2378·2019-08-30 15:53
閱讀 390·2019-08-30 11:20
閱讀 1232·2019-08-29 16:08
