Overview

gaming-cssは、ゲーミングなスタイリングするCSSです

Badge

Install

npm

npm i gaming-css

yarn

yarn add gaming-css

Usage

htmlのclass属性やcssのanimation-nameとしてパラメータに指定できます。

パラメータ名は、以下の既存プロパティ名に対応しています。

| 既存プロパティ名 | パラメータ名 | | - | - | | color | gaming-color | | background-color | gaming-background-color | | border-color | gaming-border-color | | border-top-color | gaming-border-top-color | | border-right-color | gaming-border-right-color | | border-bottom-color | gaming-border-bottom-color | | border-left-color | gaming-border-left-color | | outline-color | gaming-outline-color | | text-decoration-color | gaming-text-decoration-color | | border-inline-start-color | gaming-border-inline-start-color | | border-inline-end-color | gaming-border-inline-end-color | | border-block-start-color | gaming-border-block-start-color | | border-block-end-color | gaming-border-block-end-color | | filter | gaming-filter | | fill | gaming-fill |

htmlのclass属性に指定する

<div class="gaming-background-color">背景色<div>

複数のアニメーションするようにカスタマイズする

div {
	animation: gaming-color 5s linear infinite,
	           gaming-border-color 5s linear infinite;
}

hoverなどの疑似クラスに適用したい場合

a:hover {
    animation: gaming-background-color 5s linear infinite;
}