ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSを使用して遠近効果を実現する方法

CSSを使用して遠近効果を実現する方法

不言オリジナル: 2018-06-21 17:32:493267ブラウズ

この記事は単なるテストであり、その目的は他の人にインスピレーションを与えることです。この方法がどれほど実用的かは気にしませんが、少なくとも問題を解決する方法を提供してくれるでしょう。この記事があなたのお役に立てば幸いです。

今日はCSSを使用して遠近効果を実現するというアイデアを思いつきました。最初は、オフセットを介して複数の ps を使用してシャドウ効果を追加する一般的な方法を考えましたが、これには多くの ps が必要であり、理想的ではありません。そこで、CSS のプロパティである border を思いつきました。これは、境界線の接合部に斜めの効果を生み出すことができます。これは 2 つの p で実現できます。最初に最終的な効果を見てから、実装プロセスを分析しましょう。

まず、境界線がどのように斜めの効果を生成するかを見てみましょう。次のコードを HTML の先頭に追加すると、そのような効果が表示されます。

.border{width:0;height:0;border-width:50px;border-color:#f00 #0f0 #00f #000;border-style:solid;}

上記の基盤により、私たちはあなたを遠近効果を実現するために 2 つの追加の p を使用できます。

1. HTML コードは次のとおりです:

<p class="perspective-outer">
 <p class="perspective-r"></p>
 <p class="perspective-b"></p>
 <p class="perspective-inner">透视效果元素</p>
</p>

2. CSS コード:

.perspective-outer{
 position:relative;
 width:170px;/*要实现透视效果元素的宽度＋透视距离*/
 height:140px;/*要实现透视效果元素的高度＋透视距离*/
}
.perspective-inner{
 border:1px solid #f60;
 height:118px;
 width:148px;
 background-color:#fff;
}
.perspective-r,
.perspective-b{
 position:absolute;
 width:0;
 height:0;
}
.perspective-r{
 right:0;
 height:100px;/*要实现透视效果元素的高度(120px) - (border-top:20px)*/
 border-left:20px solid #000;/*右边透视距离*/
 border-top:20px solid #fff;/*下边透视距离*/
}
.perspective-b{
 bottom:0;
 width:150px;/*最外元素的宽度(170px) - border-left*/
 border-left:20px solid #fff;
 border-top:20px solid #000;
}

.perspective-outer は高さと幅を定義し、それらを相対的に配置して、パースペクティブ領域が右側と右側に配置されるようにします。高さと幅の値は、遠近効果を実現する要素の高さに対応する遠近距離を加えたものになります。 .perspective-r は高さの値を設定するだけでよく、その値は .perspective-outer の高さから border-top を引いたものです。 .perspective-b は幅の値を設定するだけでよく、その値は .perspective- の幅です。外側のマイナスボーダー左。 .perspective-r の border-top と .perspective-b の border-left の幅の値によって遠近角が決まります。 .perspective-r の border-left と .perspective-b の border-top の幅の値によって遠近距離が決まります。このうち、.perspective-r の border-top と .perspective-b の border-left の色は親要素の背景色です。ここでのテストページの親要素は body なので白です。

3. 追記

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

CSSを使用して遠近効果を実現する方法

関連記事