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