コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > 心臓の鼓動

心臓の鼓動

WBOY
リリース： 2016-09-21 13:56:13
オリジナル
2422 人が閲覧しました

写真はありません。CSS3 を使用して鼓動するハートを作成します。

HTML:

リーリー

まず、2 つの div をフローティングにし、左上隅と右上隅を丸くします。

リーリー

は次のようになります:

次に、2 つの div を回転します。左側の div は、右下隅を回転ポイントとして使用し、時計回りに 45 度回転します。右側の div は、左下隅を回転ポイントとして使用し、反時計回りに 45 度回転します。

リーリー
ハートの形が出てきます:

心臓をドキドキさせてアニメーションを追加してください:

リーリー
さて、鼓動する心臓が完成しました。

完全な CSS:

リーリー

関連ラベル：
跳动的心
ソース：php.cn
前の記事：cssプロパティ 次の記事：インスピレーションをもたらす 20 個の斬新なフォント デザイン スケッチを共有します
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
width プロパティを追加してコンテンツを左に移動します。 ボディに余白を設けました。 main {left margin: 200px; right margin: 200px; textalignment: center} テキストを1...
から 2024-04-06 22:01:35
0
3
816
Javafx でインライン CSS スタイルを動的に変更する アプリケーションが最大化されているときにペインの背景画像を変更しようとしています。私の背景はインライン CSS を使用して設定されています。スタイル用に 2 つの異なる変数と if...
から 2024-04-06 20:57:16
0
1
487
CSS でフローティング要素を水平ではなく垂直にスタックするにはどうすればよいですか? 片側にメインコンテンツ、もう一方に追加コンテンツがある 2 つの列を持つ Web ページを作成しようとしています。ただし、float プロパティを使用して追加の列を左に揃えているた...
から 2024-04-06 20:45:26
0
2
386
3 レベル階層のカスタム分類を使用して woocommerce 関連製品を選択します 「スポーツ」というカスタム分類を持つ woocommerce ストアがあります。分類には、親、子、子という 3 つのレベルがあります。たとえば、屋内スポーツ > アリーナ ス...
から 2024-04-06 20:05:30
0
1
544
opentbs を使用して odt ファイルを生成するときに発生する問題: 同じキーの値が別の列ではなく同じ行に表示されます。 PHPでodtを作成するためにOpenTbsというライブラリを使っていますが、列と行が動的に生成されるので利用しています。行と列の作成方法は知っていますが、それらを整理する方法がわ...
から 2024-04-06 20:18:18
0
1
483
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート