資訊專欄INFORMATION COLUMN
摘要：效果預覽按下右側(cè)的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽?？山换ヒ曨l此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。
效果預覽
按下右側(cè)的“點擊預覽”按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。
https://codepen.io/comehope/pen/vrRmWy
可交互視頻此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。
請用 chrome, safari, edge 打開觀看。
https://scrimba.com/p/pEgDAM/c7adzTW
源代碼下載每日前端實戰(zhàn)系列的全部源代碼請從 github 下載：
https://github.com/comehope/front-end-daily-challenges
代碼解讀定義 dom，容器中包含 3 個子元素：
居中顯示：
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: darkslategray;
}
定義容器尺寸：
.parrot {
width: 10em;
height: 10em;
font-size: 30px;
}
畫出鸚鵡頭部的羽毛：
.parrot {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.parrot .outer {
position: absolute;
width: 100%;
height: 100%;
border: 1em solid;
border-color: transparent transparent orangered tomato;
border-radius: 50%;
}
畫出鸚鵡的頭部和喙的上半部分：
.parrot .middle {
position: absolute;
width: 80%;
height: 80%;
border: 4em solid;
border-color: gold transparent gainsboro white;
border-radius: 50%;
}
畫出鸚鵡的喙的下半部分：
.parrot .inner {
position: absolute;
width: 40%;
height: 40%;
border: 2em solid;
border-color: transparent orange transparent transparent;
border-radius: 50%;
}
用偽元素畫出鸚鵡的眼睛：
.parrot .inner::before {
content: "";
position: absolute;
width: 1em;
height: 1em;
background-color: black;
border-radius: 50%;
left: -2em;
top: -0.5em;
}
把畫面轉(zhuǎn)正：
.parrot > * {
transform: rotate(45deg);
}
設置鼠標懸停效果，懸停時鸚鵡的頭轉(zhuǎn)向另一側(cè)：
.parrot > * {
transition: 0.5s;
}
.parrot:hover .outer {
transform: rotate(225deg);
border-color: transparent transparent tomato orangered;
}
.parrot:hover .middle {
transform: rotate(calc(225deg - 360deg));
border-color: transparent gold white gainsboro;
}
.parrot:hover .inner {
transform: rotate(135deg);
}
最后，修改懸停時鸚鵡的配色：
.parrot:hover .outer {
border-color: transparent transparent lightseagreen darkcyan;
}
.parrot:hover .middle {
border-color: transparent gold white gainsboro;
}
.parrot:hover .inner {
border-color: transparent orange transparent transparent;
}
大功告成！
文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116746.html
摘要：效果預覽按下右側(cè)的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽?？山换ヒ曨l此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。 showImg(https://segmentfault.com/img/bVbcwMZ?w=500&h=500); 效果預覽 按下右側(cè)的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。 https://codepen.io/comehop...
摘要：過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發(fā)布的項目前端每日實戰(zhàn)專欄每天分解一個前端項目，用視頻記錄編碼過程，再配合詳細的代碼解讀，是學習前端開發(fā)的活的參考書視頻演示如何用純創(chuàng)作一個表達懷念童年心情的條紋彩虹心特效視頻演示如 過往項目 2018 年 5 月份項目匯總（共 30 個項目） 2018 年 4 月份項目匯總（共 8 個項目） 2018 年 6 月份發(fā)布的項目 ...
摘要：過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發(fā)布的項目前端每日實戰(zhàn)專欄每天分解一個前端項目，用視頻記錄編碼過程，再配合詳細的代碼解讀，是學習前端開發(fā)的活的參考書視頻演示如何用純創(chuàng)作一個表達懷念童年心情的條紋彩虹心特效視頻演示如 過往項目 2018 年 5 月份項目匯總（共 30 個項目） 2018 年 4 月份項目匯總（共 8 個項目） 2018 年 6 月份發(fā)布的項目 ...
閱讀 1839·2021-11-11 16:55
閱讀 761·2019-08-30 15:53
閱讀 3599·2019-08-30 15:45
閱讀 747·2019-08-30 14:10
閱讀 3276·2019-08-30 12:46
閱讀 2134·2019-08-29 13:15
閱讀 2035·2019-08-26 13:48
閱讀 942·2019-08-26 12:23
