ホームページ > 記事 > ウェブフロントエンド > DIV+CSS効果（スムーズな投票効果などを実現するため）_html/css_WEB-ITnose
DIV+CSS効果（スムーズな投票効果などを実現するため）_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:28:481420ブラウズ
この手法の名前は CSS スプライトと呼ばれます。基本原理は、CSS で画像の背景シリーズの background-image、background-repeat、background-position などの属性を使用することです。このように画像表示を高速化する鍵となるのは、重量を軽くすることではなく、枚数を減らすことです。通常の状況では、画像の送信時間はリクエストの待ち時間よりもはるかに短いのが通常です。
追記: 3 つの CSS スプライトのサンプルのデモが特別に作成されましたので、興味のある方はご覧ください。
例
たとえば、google.cn の現在のホームページの下部ナビゲーションもこの方法で実装されています。
使用されている画像: http://www.ccvita.com/wp-content/uploads/demo/css/google.gif
効果: http://www.google.cn
コード
見つけましたインターネットから いくつかのデモがあり、次のアドレスでデモをご覧いただけます: CSS スプライトのサンプル デモ
効果 1: 垂直背景画像
効果 2: 水平背景画像
効果 3: スムーズな投票
転載元: http://www.ccvita.com/322.html#more-322
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。