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;
}