[大邱AI学校]10824開発ログ42

2582 ワード
テキストリンク

[勉強の内容]


Twitterホームページ中間練習2


hoverプロパティの適用



マウスを離すと、左の要素のように画像が移動し、次のように背景色の紫色の効果が適用されます.
.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);
}
背景画面をimgタグの親領域に適用し、親タグにぶら下がったときのimgタグの変化を適用します.
.video-section .video-wrap .image-wrap:hover img
transform:transformを使用して移動する座標を設定し、imgタグにtransformのプロパティを設定します.

border断線の設定border断線ノセッテイborder断線:バックグラウンドカラーの入力バックグラウンドカラーノニュウリョク



写真に示すようにborder-bottomの上には、中間断線に設定された「より多くのビュー」というボタンがあります.断線を防ぐために、[その他のビュー](More View)ボタンでメインの背景色と同じ背景色を指定すると、断線の効果が得られます.

[困難な点]


[勉強の感想]


今日はビデオリストが重複しているので、比較的簡単に行えます.「ツイッター位置」の練習では、スクロールバーを画面全体ではなく必要なコンテンツにのみ表示させ、固定して使用することが重要です.
EXTJS画像アップロードプレビュー(ローカルアップロード前プレビューとサーバー画像プレビューを含む)
権限の選択