CSS3 box-reflect を使用して反射効果を作成する方法

以前は、この効果を実現するには、デザイナーを見つけてページに画像を挿入するしかありませんでしたが、CSS3 の登場により、純粋なコードで実現できるようになりました。これは、CSS3 の box-reflect プロパティを使用します。次の記事では、CSS3 を使用して反射効果を作成する方法を紹介します。必要な方は参考にしてください。

互換性

これは CSS3 のプロパティなので、もちろん互換性を確認する必要があります: クリックして表示

次に、box-reflect の使用方法を学びましょう。

構文は次のとおりです:

  -webkit-box-reflect：none | <direction> <offset>? <mask-box-image>?
  box-reflect:none | <direction> <offset>? <mask-box-image>?

属性の説明:

none: この値は、反射がないことを示すデフォルト値です。

方向: 反射を生成する方向

上: オブジェクトの上にある反射を指定します。 下: オブジェクトの下にある反射を指定します。 左: オブジェクトの左側にある反射を指定します。 右: オブジェクトの右側にある反射を指定します。オブジェクト

offset: 画像と反射の間の距離

length: 長さの値を使用して、反射とオブジェクトの間の距離を定義します。負の値のパーセンテージを指定できます。パーセンテージを使用して、反射とオブジェクトの間の間隔を定義します。負の値も可能です。

mask-box-image: 反射のマスク効果を設定するために使用します。

値は次のとおりです:

none: マスク画像なし URL: 絶対アドレスまたは相対アドレスを使用して指定します。画像。 Linear-gradient: 線形グラデーションを使用してマスク イメージを作成します。 Radial-gradient: 放射状(放射状)グラデーションを使用してマスク イメージを作成します。繰り返し線形グラデーション: 繰り返し線形グラデーションを使用してバックマスク イメージを作成します。反復放射状グラデーション: 反復放射状 (放射状) グラデーションを使用してマスク イメージを作成します。

机上で話すだけでは十分ではありません。事例を通じて効果を確認する必要があります。

反射の方向

この例では、3 つの画像を作成しました:

<p class="box1">   
  <img src="/static/imghwm/default1.png"  data-src="http://7s1r1c.com1.z0.glb.clouddn.com/t_sdfsdfs123.jpg"  class="lazy"   alt="" />   
</p>   
<p class="box2">   
  <img src="/static/imghwm/default1.png"  data-src="http://7s1r1c.com1.z0.glb.clouddn.com/t_sdfsdfs123.jpg"  class="lazy"   alt="" />   
</p>   
<p class="box3">   
  <img src="/static/imghwm/default1.png"  data-src="http://7s1r1c.com1.z0.glb.clouddn.com/t_sdfsdfs123.jpg"  class="lazy"   alt="" />   
</p>

CSS は次のとおりです:

.box1,.box2,.box3{   
  width:120px;   
  float:left;   
  margin-right:180px;   
}   
img{   
  width:100%;   
}   
.box1 img{   
  -webkit-box-reflect:right;   
  box-reflect:right;   
}   
.box2 img,.box3 img{   
  -webkit-box-reflect: above;   
  box-reflect:above;   
}   
.box3{   
  padding-top:200px;   
}

レンダリングは次のとおりです。

ここで質問があります。box2 と box3 の画像はどちらも box-reflect:above で設定されており、上部に投影が生成されます。なぜ box2 では効果が確認できないのですか?その理由は、box3 には padding-top:200px を設定しましたが、box2 には設定しなかったためです。これは、生成された反射を表示するためのスペースがないためであると当初推定されています。

反射とオブジェクトの間の距離

反射を生成する方向を理解した後、2 番目の属性を見て、例を見てみましょう:

まだ 3 つの画像を使用していますが、スタイル:

.box1 img{   
  -webkit-box-reflect:below 30px;   
  box-reflect:below 30px;   
}   
.box2 img{   
  -webkit-box-reflect:below -30px;   
  box-reflect:below -30px;   
}   
.box3 img{   
  -webkit-box-reflect:below 5%;   
  box-reflect:below 5%;   
}

レンダリングは次のとおりです:

次に、最後の属性を学習します。

マスク効果

(1) グラデーションを使用して反射にマスキング効果を追加します

  .box1 img{   
  -webkit-box-reflect:below 0 -webkit-linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,.0) 30%,rgba(250,250,250,.3));   
  box-reflect:below 0 linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,.0) 30%,rgba(250,250,250,.3));   
}

効果は次のとおりです:

背景画像を使用してマスキングを追加します反射への効果

まず第一に、五芒星の PNG 画像が必要です:

.box2 img{   
  -webkit-box-reflect:below 0 url(http://7s1r1c.com1.z0.glb.clouddn.com/t_star.png);   
  box-reflect:below 0 url(http://7s1r1c.com1.z0.glb.clouddn.com/t_star.png);   
}

効果は次のとおりです:

上記はコンテンツ全体ですこの記事が皆さんの学習に役立つことを願っています。その他の関連コンテンツについては、PHP 中国語 Web サイトを参照してください。

関連する推奨事項:

IE フィルターで CSS3 を使用してグラデーションとドロップ シャドウ効果を実現する方法

CSS を使用してマウスを上に移動してアイコンの回転効果を実現する方法

以上がCSS3 box-reflect を使用して反射効果を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。