資訊專欄INFORMATION COLUMN
摘要：源代碼下載每日前端實戰(zhàn)系列的全部源代碼請從下載代碼解讀定義，容器中包含文本居中顯示定義文字樣式用偽元素定義邊框尺寸把邊框分為兩部分，拼在一起把上邊框和右邊框下沉一層為下邊框和在邊框加上陰影最后，讓邊框轉(zhuǎn)起來大功告成
效果預覽
按下右側(cè)的“點擊預覽”按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。
https://codepen.io/comehope/pen/qYepNv
可交互視頻教程此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。
請用 chrome, safari, edge 打開觀看。
https://scrimba.com/p/pEgDAM/cQ73Vt8
源代碼下載每日前端實戰(zhàn)系列的全部源代碼請從 github 下載：
https://github.com/comehope/front-end-daily-challenges
代碼解讀定義 dom，容器中包含文本：
ERROR 404
居中顯示：
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(20%, 20%, 20%);
}
定義文字樣式：
.warning {
color: whitesmoke;
font-size: 100px;
font-family: sans-serif;
font-weight: bold;
}
用偽元素定義邊框尺寸：
.warning {
position: relative;
padding: 0.6em 0.4em;
}
.warning::before,
.warning::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0.2em solid;
box-sizing: border-box;
}
把邊框分為兩部分，拼在一起：
.warning::before,
.warning::after {
border: 0.2em solid transparent;
color: orangered;
}
.warning::before {
border-top-color: currentColor;
border-right-color: currentColor;
}
.warning::after {
border-bottom-color: currentColor;
border-left-color: currentColor;
}
把上邊框和右邊框下沉一層：
.warning::before {
z-index: -1;
}
為下邊框和在邊框加上陰影：
.warning::after {
box-shadow: 0.3em 0.3em 0.3em rgba(20%, 20%, 20%, 0.8);
}
最后，讓邊框轉(zhuǎn)起來：
.warning::before,
.warning::after {
animation: rotating 10s infinite;
}
@keyframes rotating {
to {
transform: rotate(360deg);
}
}
大功告成！
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/113371.html
摘要：源代碼下載每日前端實戰(zhàn)系列的全部源代碼請從下載代碼解讀定義，容器中包含文本居中顯示定義文字樣式用偽元素定義邊框尺寸把邊框分為兩部分，拼在一起把上邊框和右邊框下沉一層為下邊框和在邊框加上陰影最后，讓邊框轉(zhuǎn)起來大功告成 showImg(https://segmentfault.com/img/bVbbyr9?w=500&h=500); 效果預覽 按下右側(cè)的點擊預覽按鈕可以在當前頁面預覽，點...
摘要：過往項目年月份項目匯總共個項目年月份發(fā)布的項目前端每日實戰(zhàn)專欄每天分解一個前端項目，用視頻記錄編碼過程，再配合詳細的代碼解讀，是學習前端開發(fā)的活的參考書頻演示如何用純創(chuàng)作一種按鈕被瞄準的交互特效視頻演示如何用純創(chuàng)作一個同心圓弧旋轉(zhuǎn)特效視頻演 過往項目 2018 年 4 月份項目匯總（共 8 個項目） 2018 年 5 月份發(fā)布的項目 《前端每日實戰(zhàn)》專欄每天分解一個前端項目，用視頻記錄...
摘要：過往項目年月份項目匯總共個項目年月份發(fā)布的項目前端每日實戰(zhàn)專欄每天分解一個前端項目，用視頻記錄編碼過程，再配合詳細的代碼解讀，是學習前端開發(fā)的活的參考書頻演示如何用純創(chuàng)作一種按鈕被瞄準的交互特效視頻演示如何用純創(chuàng)作一個同心圓弧旋轉(zhuǎn)特效視頻演 過往項目 2018 年 4 月份項目匯總（共 8 個項目） 2018 年 5 月份發(fā)布的項目 《前端每日實戰(zhàn)》專欄每天分解一個前端項目，用視頻記錄...
閱讀 1980·2023-04-25 15:45
閱讀 1218·2021-09-29 09:34
閱讀 2507·2021-09-03 10:30
閱讀 2015·2019-08-30 15:56
閱讀 1470·2019-08-29 15:31
閱讀 1274·2019-08-29 15:29
閱讀 3206·2019-08-29 11:24
閱讀 3064·2019-08-26 13:45
