CSS3を使用して画像に簡単な影効果を実現する方法（完全なコードが添付されています）-CSSチュートリアル-php.cn

CSS3を使用して画像に簡単な影効果を実現する方法（完全なコードが添付されています）

坏嘻嘻

リリース： 2018-09-29 17:48:13

オリジナル

6913 人が閲覧しました

前の記事では、css3 を使用してテキストの影効果を実現する方法を説明しました。この記事では、曲面/楕円投影効果と吊り下げという 2 つの特殊効果を含む、画像の影効果を実現する方法を引き続き説明します。投影効果。困っている友人は参考にしていただければ幸いです。

css3 を使用して画像の影効果を実現する原理

グラフィックにはメイン投影が必要で、別のグラフィックにはラジアンが必要です独自のシャドウ効果を使用して 2 つのグラフィックを重ね、色を一致させてから円弧シャドウを公開すると、湾曲したシャドウの効果が確認できます。

#text-shadow 属性設定

水平オフセット、右に正の値、左に負の値。
垂直オフセット。正の値が下がり、負の値が上がります。

#css3 を使用して面/楕円投影効果を実現します

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>曲面/椭圆投影效果</title>
  <style>
.shadow_wrap{
  width: 100%;background:#E6EEF6;max-width: 600px;margin: auto;overflow: hidden;
}
.shadow1{
  background-color: #9ecf68;
}
.shadow2{
  background-color: #00bcd4;
}
.shadow1,.shadow2{
position:relative;
width:40%;
    height:200px;
    float:left;
    margin:5% 15px;
    border-radius:5px;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1) inset;
}
.shadow_wrap h3{
  width:87%;
  height:100px;
  margin-left:6%;
  text-align:center;
  padding-top:60px;
  color:#fff;
}
/**styling shadows**/
.shadow1:before, .shadow1:after{
  position:absolute;
  content:"";
  bottom:12px;left:15px;top:80%;
  width:45%;
  background:#9B7468;
  z-index:-1;
  -webkit-box-shadow: 0 20px 15px #9B7468;
  -moz-box-shadow: 0 20px 15px #9B7468;
  box-shadow: 0 20px 15px #9B7468;
  -webkit-transform: rotate(-6deg);
  -moz-transform: rotate(-6deg);
  transform: rotate(-6deg);
}
.shadow1:after{
  -webkit-transform: rotate(6deg);
  -moz-transform: rotate(6deg);
  transform: rotate(6deg);
  right: 15px;left: auto;
}
.shadow2:before, .shadow2:after{
  position:absolute;
  content:"";
  top:100px;bottom:5px;left:30px;right:30px;
  z-index:-1;
  box-shadow:0 0 40px 13px #486685;
  border-radius:100px/20px; 
}
</style>
</head>
<body>
<div class="shadow_wrap">
  <div class="shadow1">
    <h3>椭圆投影1</h3>
  </div>
  <div class="shadow2">
    <h3>椭圆投影2</h3>
  </div>
</div>
</body>
</html>

ログイン後にコピー

効果は次のとおりです。画像

#css3 を使用してフローティング投影効果を実現します CSS3を使用して画像に簡単な影効果を実現する方法（完全なコードが添付されています）

#次のような効果を実現します。図に示すとおりです。

CSS3を使用して画像に簡単な影効果を実現する方法（完全なコードが添付されています） ##概要

使用方法box-shadow を直接指定します: 5px 5px 10px black inset 属性を使用してスタイルを設定するだけです。最初の 2 つの値 (5px 5px) は水平方向と垂直方向のオフセットで、正の値は影を左と下にオフセットし、3 番目の値 (10px) はその逆を設定します。ぼかし距離、黒は色です。最後のインセットは要素の内側にシャドウを作成します。これは内側のシャドウを削除することで外側のシャドウを設定します。これは純粋な CSS を使用して実現される効果で、DIV レイヤーの領域境界にシャドウ効果を追加すると非常に鮮やかに見えますが、CSS コードは比較的単純なので、学習する価値があります。。

ボックスシャドウの CSS 実装方法

関連コンテンツのリンクについては、このサイトの css3 部分にあるビデオチュートリアルをご覧ください:

http://www.php.cn/course/list/14.html

以上がCSS3を使用して画像に簡単な影効果を実現する方法（完全なコードが添付されています）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。