結果のプレビュー
押してフルスクリーンプレビューへのリンクをクリックして、現在のページをプレビューする権利「プレビュー]をクリックします」ボタンをクリックします。
https://codepen.io/comehope/pen/vrRmWy
インタラクティブビデオ
このビデオでは、対話型である、あなたがビデオを編集して、コードのビデオを一時停止することができます。
クロム、サファリ、エッジオープンビューを使用してください。
https://scrimba.com/p/pEgDAM/c7adzTW
ソースコードのダウンロード
毎日のフロントエンド戦闘シリーズ完全なソースコードはgithubのからダウンロードできます。
https://github.com/comehope/front-end-daily-challenges
コード読み取り
DOMを定義、サブ容器は、3つの要素が含まれています。
<div class="parrot">
<div class="outer"></div>
<div class="middle"></div>
<div class="inner"></div>
</div>
中央揃え:
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;
}
正画像:
.parrot > * {
transform: rotate(45deg);
}
提供マウスオーバー効果、他の側面を置くためにオウムのヘッド:
.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;
}
私たちは完了です。