ホームページ  >  記事  >  ウェブフロントエンド  >  Sticker.js を使用してステッカー効果_JavaScript スキルを達成する

Sticker.js を使用してステッカー効果_JavaScript スキルを達成する

WBOY
WBOYオリジナル
2016-05-16 16:17:241690ブラウズ

Sticker.js は、Web ページ上に美しいステッカー効果を作成できる小さな JavaScript ライブラリです。依存関係はなく (jQuery は必要ありません)、CSS3 をサポートするほとんどの主要なブラウザーで動作します。以下に簡単な使用例を示しますが、さらに多くの機能が発見されるのを待っています。

使用例:

HTML:

コードをコピーします コードは次のとおりです:




CSS:

コードをコピー コードは次のとおりです:

.sticker {
幅: 180px;
高さ: 180px;
}
// 画像を追加
.example-1 .sticker-img {
背景画像: url(heroes-2.png);
}
// 色を追加します
.example-2 .sticker-img {
背景色: #ff4a85;
}
// 影の不透明度を変更します
.example-2 .sticker-shadow {
不透明度: 0.6;
}

JavaScript:

コードをコピーします コードは次のとおりです:


Sticker.init('.sticker');

今すぐダウンロード オンラインデモ

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。