フラット 360 Guards ロゴを実現するための純粋な CSS デモ_html/css_WEB-ITnose

数日前、誰かが w3ctech で純粋な CSS を使用して 360 Guards のロゴを書いているのを見ました。とても楽しかったです。

CSS を使って以来、このようなものを書いたことはありませんでした。趣味で試してみます。

最初はどうやって始めたらいいのか分かりませんでした。一番大変だったのは、太極拳に似ている二つのことが難しかったことです。ただし、幸いなことに、私は以前に Photoshop を使用していくつかの簡単なアイコンを描いたことがあります。そこで、私が注意深く

分析した結果です。おそらくアイデアはあると思いますが、これら 2 つのことは box-shadow 属性を使用することで実現できます。 Photoshopで描いたものとは少し違いますが、ほぼ同じです。

コードエフェクトのプレビューアドレス: http://code.w3ctech.com/detail/2501。

 1 <div class="container"> 2         <div class="content top"></div> 3         <div class="content bottom"></div> 4         <div class="content center"> 5             <div class="line x"></div> 6             <div class="line y"></div> 7         </div> 8         <div class="clip"></div> 9         <div class="circle circle-top"></div>10         <div class="circle circle-bottom"></div>11         <div class="react-top"></div>12         <div class="react-bottom"></div>13     </div>

HTML コード部分には、実際にはいくつかの冗長性があります。 React-top や React-bottom などの 2 つの部分は省略できます。割合計算が通らなかったので。したがって、

はこれら 2 つのものを使用してパッチを適用する必要がありました。

すごいです

私は Firefox の開発者ツールを使用することを好むため、これを Firefox でのみテストしました。

これは、CSS を学習しているばかりの学生にとっては良いケースです。興味があれば、ぜひ試してみてください。もちろん、より良いアイデアがある場合は、以下にメッセージを残して、お互いに話し合って一緒に進歩させることもできます。