CSS3 box-reflect を使用して反射効果を作成する方法-CSSチュートリアル-php.cn

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

不言

リリース： 2018-06-20 17:04:50

オリジナル

2342 人が閲覧しました

以前は、この効果を実現するには、デザイナーを見つけてページに画像を挿入するしかありませんでしたが、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="http://7s1r1c.com1.z0.glb.clouddn.com/t_sdfsdfs123.jpg" alt="" />   
</p>   
<p class="box2">   
  <img src="http://7s1r1c.com1.z0.glb.clouddn.com/t_sdfsdfs123.jpg" alt="" />   
</p>   
<p class="box3">   
  <img src="http://7s1r1c.com1.z0.glb.clouddn.com/t_sdfsdfs123.jpg" 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);   
}

ログイン後にコピー

効果は次のとおりです: