CSS3 border-radius を使用して太極拳と愛のパターンを描画する-CSSチュートリアル-php.cn

CSS3 border-radius を使用して太極拳と愛のパターンを描画する

不言

リリース： 2018-06-26 15:20:48

オリジナル

2198 人が閲覧しました

CSS3のborder-radiusを使って円弧を描くのは簡単ですが、角丸長方形を作るためだけに使うのはあまりにももったいないので、CSS3のborder-radiusを使って太極拳や恋愛模様を描いた例を紹介します。 . 必須友達は

太極図
border-radiusを参照して、境界線を丸くする効果を作成するだけでなく、イラストを描くために使用すると、実際にさまざまなクリエイティブなアイデアを生み出すことができます。著者は今日も太極拳の絵の描き方を教えるためにこれを使い続けます。

ソースコードHTMLを見る

<body>
 <p class="taichi">
  <p class="white-circle"></p>
  <p class="black-circle"></p>
 </p>
</body>

ログイン後にコピー

太極図には黒と白の丸があるので、ブロック内にさらに2つのpが配置されています。

それでは、目を開けてよく見てください。作者はまず、大きなブロックを白と黒に分けます。

ソースコードを見る CSS

.taichi {   
 position: relative;   
 width: 48px; /* 50 - 2 */
 height: 96px; /* 100 - 2 - 2 */
 background: #fff;   
 border: 2px solid #000;   
 border-width: 2px 50px 2px 2px;   
 border-radius: 50%;   
}

ログイン後にコピー

一般的なボックスモデル (Box Model) は、ブロックの枠線の幅幅と高さなので、幅と高さが100×100のブロックを作りたいのですが、枠線の幅が2pxの場合、内側は96pxしかありません。特別なのは、作成者が右枠の幅を直接 50 ピクセルに設定しているため、ブロック内の幅は 48 ピクセルだけで済むことです。

このように設定し、ボーダー半径の角丸効果を追加すると、~
2016517110833210.png (120×120)

ふふふ~になります。すでに黒と白のブロックがあり、最初に白い円を追加します:

ソースを見るコードCSS

.white-circle {   
 position: absolute;   
 top: 0;   
 left: 50%;   
 background: #fff;   
 border-radius: 50%;   
 width: 48px;   
 height: 48px;   
}

ログイン後にコピー

ここでは、完全な白い円が直接生成され、上半分の中央に配置されています:
2016517110925477.png (120×120)

黒い丸は下半分に配置されています:

ソースコードCSSを見る

.black-circle {   
 position: absolute;   
 top: 50%;   
 left: 50%;   
 background: #000;   
 border-radius: 50%;   
 width: 48px;   
 height: 48px;   
}

ログイン後にコピー

見た目すでに 9 つの画像があるように~
2016517110953720.png (120×120)

最後に、これらの 2 つの円には反対色の 2 つの小さな点がまだあります。これらの 2 つの小さな点については、::after 疑似要素 (Pseudo -elements) を使用するだけです。以上です:

ソースコード CSS を表示します

.white-circle::after {   
 content: "";   
 position: absolute;   
 top: 17px; /* (50-16)/2 */
 left: 17px; /* (50-16)/2 */
 background: #000;   
 border-radius: 50%;   
 width: 16px;   
 height: 16px;   
}   
.black-circle::after {   
 content: "";   
 position: absolute;   
 top: 17px; /* (50-16)/2 */
 left: 17px; /* (50-16)/2 */
 background: #fff;   
 border-radius: 50%;   
 width: 16px;   
 height: 16px;   
}

ログイン後にコピー

でしょう~ すごいでしょう! ?
2016517111042392.png (120×120)

Love
上記では、border-radius を使用して太極拳図を描く方法を説明し、次では、角丸効果を使用してハートを描く方法を説明します。

必要なのはpブロックだけです:

<body>
 <p class="heart"></p>
</body>

ログイン後にコピー

次にブロックの幅と高さを指定します:

ソースコードCSSを表示します

.heart {   
 position: relative;   
 width: 140px;   
 height: 115px;   
}

ログイン後にコピー

ハートを左右のブロックに分割するのも同様で、同じことが行われますfirst:: before 左側のブロックを生成する疑似要素:

ソースコードCSSを見る

.heart::before {   
 content: "";   
 position: absolute;   
 left: 70px;   
 top: 0;   
 width: 70px;   
 height: 115px;   
 background: red;   
 border-radius: 50px 50px 0 0;   
}

ログイン後にコピー

左上と右上の角丸のみを設定しているため、丸頭の柱になります:
2016517111117036.png (200×200)

次に、回転の中心点を変更して、左に 45 度回転させたいと思います。

ソースコードを表示する CSS

.heart::before {   
 content: "";   
 position: absolute;   
 left: 70px;   
 top: 0;   
 width: 70px;   
 height: 115px;   
 background: red;   
 border-radius: 50px 50px 0 0;   
 -webkit-transform: rotate(-45deg);   
 -moz-transform: rotate(-45deg);   
 -o-transform: rotate(-45deg);   
 transform: rotate(-45deg);   
 -webkit-transform-origin: left bottombottom;   
 -moz-transform-origin: left bottombottom;   
 -o-transform-origin: left bottombottom;   
 transform-origin: left bottombottom;   
}

ログイン後にコピー

transform-origin は要素の中心点を変更できます。背景位置と同様に、これは 2 つの値を受け入れます。1 つ目は水平方向の値を設定し、2 番目は垂直方向の値を設定します。デフォルトは中央中央ですが、ここで左下に変更します:
2016517111144455.png (200×200)

右側の部分は同じですが、回転の中心点を右下に変更し、右に回転するだけです:

元のコードを表示CSS

.heart::after {   
 content: "";   
 position: absolute;   
 top: 0;   
 left: 0;   
 width: 70px;   
 height: 115px;   
 background: red;   
 border-radius: 50px 50px 0 0;   
 -webkit-transform: rotate(45deg);   
 -moz-transform: rotate(45deg);   
 -o-transform: rotate(45deg);   
 transform: rotate(45deg);   
 -webkit-transform-origin: rightright bottombottom;   
 -moz-transform-origin: rightright bottombottom;   
 -o-transform-origin: rightright bottombottom;   
 transform-origin: rightright bottombottom;   
}

ログイン後にコピー

両側が生成されると真っ赤なハートが現れます
2016517111209126.png (200×200)

なんと〜中和の鍾さんになぜ動けないのかと聞かれました…関係ないのでアニメーションを付けます効果を与えます:

ソースコードCSSを表示します

.heart {   
 -webkit-animation: jump 1s infinite ease-out;   
 -moz-animation: jump 1s infinite ease-out;   
 -o-animation: jump 1s infinite ease-out;   
 animation: jump 1s infinite ease-out;   
}   
@-webkit-keyframes jump {   
 0%, 60%, 75%, 90%, 100% {   
  -webkit-transform: scale(1);   
 }   
 15% {   
  -webkit-transform: scale(0.6);   
 }   
 30% {   
  -webkit-transform: scale(1);   
 }   
 45% {   
  -webkit-transform: scale(0.7);   
 }   
}   
@-moz-keyframes jump {   
 0%, 60%, 75%, 90%, 100% {   
  -moz-transform: scale(1);   
 }   
 15% {   
  -moz-transform: scale(0.6);   
 }   
 30% {   
  -moz-transform: scale(1);   
 }   
 45% {   
  -moz-transform: scale(0.7);   
 }   
}   
@-o-keyframes jump {   
 0%, 60%, 75%, 90%, 100% {   
  -o-transform: scale(1);   
 }   
 15% {   
   -o-transform: scale(0.6);   
 }   
 30% {   
  -o-transform: scale(1);   
 }   
 45% {   
  -o-transform: scale(0.7);   
 }   
}   
@keyframes jump {   
 0%, 60%, 75%, 90%, 100% {   
  transform: scale(1);   
 }   
 15% {   
  transform: scale(0.6);   
 }   
 30% {   
  transform: scale(1);   
 }   
 45% {   
  transform: scale(0.7);   
 }   
}

ログイン後にコピー

アニメーション全体が飛び跳ねるジャンプのように見えるように、transformscale(x, y)を通してハートのサイズを変更します:
2016517111241939.gif (200×200)