純粋な CSS を使用して WeChat ロゴを実装するには、いくつのタグが必要ですか? _html/css

純粋な CSS を使用して WeChat ロゴを実装するには、いくつのタグが必要ですか? _html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:27:16

オリジナル

1557 人が閲覧しました

ブログは http://lwzhang.github.io に移転されました。

純粋な CSS で WeChat ロゴを実装するのは難しくありません。難しいのは、最小限の HTML タグでそれを実装する方法です。どうすれば1つのタグで実現できるか考えたのですが、結局わからず2つのタグを使うことになりました。

最初に 2 つのラベル要素が必要です:

    <div class="bg">        <div class="inner"></div>    </div>

ログイン後にコピー

最初に背景を描画します:

    .bg {        width: 300px;        height: 300px;        background-color: #08c406;        border-radius: 10px;        position: relative;    }

ログイン後にコピー

次に大きな楕円を描画します:

    .inner {        width: 180px;        height: 150px;        border-radius: 50%;        background-color: #fff;        position: absolute;        top: 60px;        left: 35px;    }

ログイン後にコピー

小さな楕円は .inner の ::before 疑似要素を使用して実装されます:

    &::before {        content: "";        width: 140px;        height: 120px;        border-radius: 50%;        background-color: #fff;        position: absolute;        top: 60px;        left: 90px;        border: 2px solid #08c406;    }

ログイン後にコピー

下の写真現在の結果:

内側の 4 つの円を描くにはどうすればよいですか?これは、CSS3 の box-shadow プロパティを使用することで実現できます。このプロパティは、無数の同一のものを作成できるため、繰り返しの処理に使用されます。

.bg の ::before 疑似要素を使用して、これらの円を実装します。

    &::before {       content: "";       position: absolute;       width: 16px;       height: 16px;       border-radius: 50%;       background-color: #08c406;       top: 150px;       left: 155px;       z-index: 2;       box-shadow: 70px 0 #08c406, -70px -50px 0 2px #08c406, 0 -50px 0 2px #08c406;    }

ログイン後にコピー

::before 自体は円 (小さな円) を実装し、次に box-shadow 属性を使用して他の 3 つの円を実装します。

現在のエフェクトを見てみましょう:

さて、残っているコーナーは 2 つだけです。他に使用されていないものは何か考えてみましょう。また、2 つの疑似要素、つまり ::after of .bg と ::after of .inner があり、これらは 2 つのコーナーを達成するだけです。

これらの 2 つの角は実際には普通の小さな三角形で、45 度回転されています。 CSS で小さな三角形を実装するのは一般的すぎます:

    .bg::after {        content: "";        border-width: 30px 12px;        border-style: solid;        border-color: #fff transparent transparent transparent;        position: absolute;        top: 182px;        left: 50px;        transform: rotate(45deg);    }    .inner::after {        content: "";        border-width: 30px 10px;        border-style: solid;        border-color: #fff transparent transparent transparent;        position: absolute;        top: 155px;        left: 200px;        transform: rotate(-45deg);    }

ログイン後にコピー

最終効果:

すべての CSS コード:

    @mixin pos($left, $top) {      position: absolute;      left: $left;      top: $top;    }    .bg {      width: 300px;      height: 300px;      background-color: #08c406;      border-radius: 10px;      position: relative;      &::before {       @include pos(155px, 150px);       content: "";       width: 16px;       height: 16px;       border-radius: 50%;       background-color: #08c406;       z-index: 2;       box-shadow: 70px 0 #08c406, -70px -50px 0 2px #08c406, 0 -50px 0 2px #08c406;      }      &::after {       @include pos(50px, 182px);       content: "";       border-width: 30px 12px;       border-style: solid;       border-color: #fff transparent transparent transparent;       transform: rotate(45deg);     }     .inner {       width: 180px;       height: 150px;       border-radius: 50%;       background-color: #fff;       @include pos(35px, 60px);       &::before {        @include pos(90px, 60px);        content: "";        width: 140px;        height: 120px;        border-radius: 50%;        background-color: #fff;        border: 2px solid #08c406;       }       &::after {        @include pos(200px, 155px);        content: "";        border-width: 30px 10px;        border-style: solid;        border-color: #fff transparent transparent transparent;        transform: rotate(-45deg);       }      }    }

ログイン後にコピー

このロゴが最も適しています。 CSS3 に慣れていない人は、それを実現するために box-shadow を使用することを考えない可能性があるため、この場所は 4 つの小さな円を実装するときに行う必要があります。

WeChat ロゴを実装する他の方法はありますか?これができるレーベルはありますか？実装方法を残すことを歓迎します。