CSSスニペット：シンプルなパララックスとアニメーションしながらゆっくり拡大/縮小するヘッダ | かちびと.net

Result css html,body{ margin:0; height:120%; } .header{/*ヘッダ部分*/ position:relative; overflow:hidden; display:flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; align-content: flex-start; height:50vw; min-height:400px; max-height:550px; min-width:300px; color:#eee; } .header:after{/*下部にうっすらグラデーションで影を作る*/ content:""; width:100%; height:40%; position:absolute; bottom:0; left:0;