![見出し画像](https://assets.st-note.com/production/uploads/images/24398518/rectangle_large_type_2_49f77378c35e5370f9a3c167cd47492f.png?width=1200)
#26 今週作ったCSSアニメーション 【ぴよぴよコーダーの開発日記】
今流行り?の区切りが斜めになっている表現が次々にスライドダウンしていくだけのアニメーション
斜めの表現には、css-separator-generator というジェネレータを使いました。むしろ、このジェネレータ試したかったからアニメーション作ったという気もする。
テキストには特に意味はないです。工夫したところといえば、この斜め表現、四角を平行四辺形にしているにすぎないので、一辺だけを斜めにするために、before疑似要素で上に四角をかぶせて見えないようにしたところ。
後は、後ろにコンテンツが続く場合は、margin-top:100vhにしたところかな。
この記事が気に入ったらサポートをしてみませんか?