html と CSS を使用して恋愛エフェクトを作成する方法についての詳細な図解説明

CSS はページのレイアウトにおいて非常に重要な役割を果たします。CSS は HTML で構築されたページを美しくするだけでなく、CSS を使ってハートを描くことができますか?この記事では、HTML と CSS を使用してハートの形を描画する方法と、CSS3 を使用して愛のエフェクトを実装するコードを紹介します。これは一定の参考価値があるので、興味のある友人は参照してください。

HTML と CSS を使用してハートを描画するには、境界線の半径フィレット、位置、アニメーションアニメーションなど、CSS の多くのプロパティを使用する必要があります。不明な場合は、以前の記事を読むか、こちらを参照してください。 CSS ビデオ チュートリアル 、お役に立てれば幸いです。

例による説明: ハートは 2 つの円と 1 つの正方形で構成されていると見なされます。正方形の一辺の長さが円の直径になります。

HTML 部分:

3 つの div を使用して、それぞれ左の円、右の円、正方形を表します。

<div class="box">
   <div class="round1"></div>
   <div class="round2"></div>
   <div class="bottom"></div>
</div>

CSS 部分:

境界半径を使用します。 50 %それを円として設定し、transform:rotate(45deg) を使用して正方形を 45 度回転させ、円と組み合わせてハートの形を形成します

.box{
    width:180px;
    height:160px;
    margin:100px auto;
    animation:size 1s infinite;
    animation-direction:alternate;
    transition:1s all;
    border: 1px solid black;
   }
   .round1{
    width:100px;
    height:100px;
    border-radius:50%;
    background-color:hotpink;
    left: 0;
    top: 0;
    position:absolute;
   }
   .round2{
    width:100px;
    height:100px;
    border-radius:50%;
    background-color:hotpink;
    position:absolute;
    right: 0;
    top: 0;
   }
   .bottom{
    width:100px;
    height:100px;
    background-color:hotpink;
    position:absolute;
    top:40px;
    left:40px;
    transform:rotate(45deg);
   }
   @keyframes size{
    0%{
     transform:scale(0.6);
    }
    100%{
     transform:scale(1);
    }
   }

最後に、CSS3 のアニメーション アニメーションを使用して、次のことを実現します。愛の特殊効果を使用すると、愛が自動的に拡大縮小され、その効果は次のようになります。

上記は、HTML と CSS を使用して愛を描画する方法を紹介しました。初心者の方は、ハートを描くことができないので、自分で試してみてください。この記事が役立つことを願っています。関連するビデオ チュートリアルの詳細については、CSS3 ビデオ チュートリアルをご覧ください。

さらに優れた CSS3、html5、および JavaScript 特殊効果コードは、次の場所で入手できます: js 特殊効果コレクション

以上がhtml と CSS を使用して恋愛エフェクトを作成する方法についての詳細な図解説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。