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

不言
リリース: 2018-06-26 15:20:48
オリジナル
2167 人が閲覧しました

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)

以上この記事の内容全体が皆さんの学習に役立つことを願っています。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。

関連する推奨事項:

CSS でのウィンドウ単位とパーセンテージ単位の使用について

CSS3 を使用してカスタムの「W」字型ランニング トラックを実装する方法

CSS3 を使用して点滅効果を実現するテキストは右にループします

以上がCSS3 border-radius を使用して太極拳と愛のパターンを描画するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!