ホームページ >ウェブフロントエンド >htmlチュートリアル >CSSBox - _html/css_WEB-ITnose の純粋な CSS ライトボックスの代替品

CSSBox - _html/css_WEB-ITnose の純粋な CSS ライトボックスの代替品

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル
2016-06-24 11:28:201210ブラウズ

CSSBox

CSSBox - 1 つの CSS ライトボックスの代替。サンプル ページは、gh-pages ブランチ、またはオンラインの GitHub Pages で入手できます。

Why CSSBox?

  • 実際は軽量 (コメントを含む 903b、コメントを除く 607b) 、縮小されていません!)
  • 画像を中央に配置します
  • 画像に素敵でリアルな影を追加します
  • 背景を暗くします
  • 完全に反応し、どの画面サイズでも動作します
  • かなりフェードインするアニメーションがあります
  • JavaScriptは絶対に使用しません

使用方法

cssbox.css をサーバーにアップロードし、CSS にスタイルシート リンクを追加します。

次のように画像を追加します:

<img  class="cssbox_thumb lazy"  src="/static/imghwm/default1.png"  data-src="image_thumbnail.png"  tabindex=1 / alt="CSSBox - _html/css_WEB-ITnose の純粋な CSS ライトボックスの代替品" ><span class="cssbox_full"><img  src="/static/imghwm/default1.png"  data-src="image_full.png"  class="lazy" / alt="CSSBox - _html/css_WEB-ITnose の純粋な CSS ライトボックスの代替品" ></span>

訪問者がサムネールをクリックすると、フルサイズのプレビューがサムネールの中央に表示されます。 screen.

ライセンス

Creative Commons Zero 1.0

项目地址: https://github.com/TheLastProject/CSSBox

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