メニューリストを横から順番に表示させる cssのみ
投稿日:
cssだけで簡単にメニューなどのリストに動きを付けます。
今回は、右から現れてくるように作ってみました。
さっそくですが、以下にサンプルがありますので、興味がある方はコピペして使ってください。
See the Pen
JjGJyee by show-be (@show-be)
on CodePen.
色を変えたり、サイズを調整したり、横並びにしたりするには、cssを変更してください。
<ul> <li class="menu">Orange</li> <li class="menu">Apple</li> <li class="menu">Melon</li> <li class="menu">Pineapple</li> <li class="menu">Grape</li> <li class="menu">Strawberry</li> </ul>
.menu { display: block; padding: 5px 20px; width: 30%; margin-bottom: 10px; background: #599999; color: #fff; list-style: none; text-align: left; line-height: 2; opacity: 0; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); } .menu:nth-child(1) { -webkit-animation: delay 0.5s ease 0.5s 1 forwards; animation: delay 0.5s ease 0.5s 1 forwards; } .menu:nth-child(2) { -webkit-animation: delay 0.5s ease 1s 1 forwards; animation: delay 0.5s ease 1s 1 forwards; } .menu:nth-child(3) { -webkit-animation: delay 0.5s ease 1.5s 1 forwards; animation: delay 0.5s ease 1.5s 1 forwards; } .menu:nth-child(4) { -webkit-animation: delay 0.5s ease 2s 1 forwards; animation: delay 0.5s ease 2s 1 forwards; } .menu:nth-child(5) { -webkit-animation: delay 0.5s ease 2.5s 1 forwards; animation: delay 0.5s ease 2.5s 1 forwards; } .menu:nth-child(6) { -webkit-animation: delay 0.5s ease 3s 1 forwards; animation: delay 0.5s ease 3s 1 forwards; } @-webkit-keyframes delay { 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } @keyframes delay { 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } }
jsを使って同じように作った記事です。→『メニューリストを横から順番に表示させる jsとcss』
関連記事
-
-
簡単にファイルをダウンロードできるWordPressプラグイン
WordPressで作成したwebサイトにファイルをダウンロードする機能を追加するために、プラグインを利用して簡単にやってしまおう!ってことで、「WordPress Download M …
-
-
WordPress テーマTwenty Sixteenでメンバー紹介や選手一覧などを作ってみた②
4.まずは、function.phpに追加 テーマによっては、変更しなくてもきれいに表示されることもあります。 ※function.phpに追加する前に、念のためfunction.php …
- PREV
- スクロールボタン コピペでできる
- NEXT
- メニューリストを横から順番に表示させる jsとcss