資訊專欄INFORMATION COLUMN
摘要：效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。可交互視頻此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。
效果預覽
按下右側的“點擊預覽”按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。
https://codepen.io/comehope/pen/WgxbaZ
可交互視頻此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。
請用 chrome, safari, edge 打開觀看。
https://scrimba.com/p/pEgDAM/c86pbcE
源代碼下載每日前端實戰系列的全部源代碼請從 github 下載：
https://github.com/comehope/front-end-daily-challenges
代碼解讀定義 dom，容器中包含若干子元素，每個子元素中包含一個字母：
A W E S O M E
定義容器尺寸：
body {
margin: 0;
height: 100vh;
}
.text {
width: 100%;
height: 100%;
}
設置子元素的布局方式：
.text {
display: flex;
justify-content: space-between;
}
.text span {
width: 100%;
}
定義文本樣式：
.text span {
color: darkslategray;
background-color: rgb(127, 140, 141);
font-family: serif;
font-size: 12vmin;
text-shadow: 1px 1px 1px white;
display: flex;
align-items: center;
justify-content: center;
}
設置文本的背景的漸變色，奇數位的文字和偶數位的文字的漸變方向是相反的：
.text span:nth-child(odd) {
background: linear-gradient(
to bottom,
rgba(127, 140, 141, 0.2) 0%,
rgba(127, 140, 141, 0) 33%,
rgba(127, 140, 141, 0.7) 66%,
rgba(127, 140, 141, 0.2) 100%
);
}
.text span:nth-child(even) {
background: linear-gradient(
to top,
rgba(127, 140, 141, 0.2) 0%,
rgba(127, 140, 141, 0) 33%,
rgba(127, 140, 141, 0.7) 66%,
rgba(127, 140, 141, 0.2) 100%
);
}
增加文字之間的分隔線，第1個文字之前不用加分隔線：
.text span {
position: relative;
}
.text span:not(:first-child)::before {
content: "";
position: absolute;
width: 10px;
height: 90%;
background-color: black;
left: -5px;
border-left: 1px solid white;
border-radius: 50%;
}
讓分隔線上下錯位：
.text span:not(:first-child):nth-child(odd)::before {
top: 2%;
}
.text span:not(:first-child):nth-child(even)::before {
bottom: 2%;
}
大功告成！
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52939.html
摘要：效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。可交互視頻此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。 showImg(https://segmentfault.com/img/bVbf1cP?w=400&h=300); 效果預覽 按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。 https://codepen.io/comehop...
摘要：過往項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目，用視頻記錄編碼過程，再配合詳細的代碼解讀，是學習前端開發的活的參考書頻演示如何用純創作一種按鈕被瞄準的交互特效視頻演示如何用純創作一個同心圓弧旋轉特效視頻演 過往項目 2018 年 4 月份項目匯總（共 8 個項目） 2018 年 5 月份發布的項目 《前端每日實戰》專欄每天分解一個前端項目，用視頻記錄...
摘要：過往項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目，用視頻記錄編碼過程，再配合詳細的代碼解讀，是學習前端開發的活的參考書頻演示如何用純創作一種按鈕被瞄準的交互特效視頻演示如何用純創作一個同心圓弧旋轉特效視頻演 過往項目 2018 年 4 月份項目匯總（共 8 個項目） 2018 年 5 月份發布的項目 《前端每日實戰》專欄每天分解一個前端項目，用視頻記錄...
閱讀 2048·2019-08-30 15:52
閱讀 2440·2019-08-29 18:37
閱讀 790·2019-08-29 12:33
閱讀 2839·2019-08-29 11:04
閱讀 1522·2019-08-27 10:57
閱讀 2092·2019-08-26 13:38
閱讀 2759·2019-08-26 12:25
閱讀 2445·2019-08-26 12:23
