Dev Log#40-8月24日

今日の勉強内容

✅ 1. ファイルの内容のトレース
✅ 2. 中継中継中継脚注

1.管理内容

👉 html










👉 css

2.トウィッチ猫の足

👉 html

👉 css


👉 結果

きょうの学習後期

今日の授業は最後にトウィッチ猫の実習を終えた.今日の授業で一番印象に残ったのは、画像にアップロードされたアニメーションの効果です.

.video-section .video-wrap .image-wrap {
	position: relative;
	width: 333px;
	height: 186px;

	background-color: #9147ff;
}

.video-section .video-wrap .image-wrap img {
	width: 100%;
	height: 100%;

	transition: transform 0.15s linear;
}

.video-section .video-wrap .image-wrap:hover img {
	transform: translate(10px, -10px);
}

まず、image-wrapで相対位置を設定し、image-wrapでサスペンション仮想セレクタを使用して移動します.また、imgに遷移属性値を入力して自然なアニメーション効果を反映します.
今回のトウィッチカピケイト実習では、これまで試したことのない新しいレイアウトを使用しました.ヘッダーとleftセクションを固定し、leftとcontentで単独でスクロールし、topとleftをそれぞれ適切な高さに指定してコンテンツセクションのコンテンツを表示し、画面を右側と下側から0に指定して拡張します.また,反応型サイトではないのでmin-width属性値を別途適用した.今回の位置授業の核心はレイアウトで、新しい情報をたくさん把握しました.これは各方面からカピケットに役立つ実習です.明日も真剣に👩🏻‍💻🔥