ホームページ  >  記事  >  ウェブフロントエンド  >  純粋な CSS を使用して鼓動する心臓を描画する方法 (コード例)

純粋な CSS を使用して鼓動する心臓を描画する方法 (コード例)

青灯夜游
青灯夜游オリジナル
2018-09-13 16:42:512591ブラウズ

この章では、純粋な CSS を使用して鼓動する心臓を描く方法を説明します。 (コード例) は参考になると思います。

最初にレンダリングを示します:

純粋な CSS を使用して鼓動する心臓を描画する方法 (コード例)

実装の原理:

1. このハートは 2 つの部分、2 つの長方形に分割できます

純粋な CSS を使用して鼓動する心臓を描画する方法 (コード例)

それぞれの境界線の半径を設定します。

2 つのグラフィックが重なった後、transform:rotate() をそれぞれ設定します。設定されたrotate() の値は、1 つの正の値と 1 つの負の値である必要があります。

純粋な CSS を使用して鼓動する心臓を描画する方法 (コード例)

純粋な CSS を使用して鼓動する心臓を描画する方法 (コード例) になります

立体的に見せるために、左側にボックスシャドウを設定します

次に、@keyframes と属性を変換してジャンプ効果を実現します。 純粋な CSS を使用して鼓動する心臓を描画する方法 (コード例)

コード例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>纯css画一下心</title>
		<style>
			body{
                height: 100%;
                margin: 0;
            }
            .demo{
                width: 1px;
                height: 1px;
                margin: 300px auto;
                position: relative;
                animation: tiaodong .8s linear infinite;
            }
            .demo::before,.demo::after{
                content: &#39;&#39;;
                position: absolute;
                width: 80px;
                height: 120px;
                background-color: red;
                border-radius: 50px 50px 0 0;
            }
           .demo::after{
                left: 28px;
                transform: rotate(45deg);
            }
             .demo::before{
                transform: rotate(-45deg);
                box-shadow: -5px -5px 10px grey;
            }
            @keyframes tiaodong{
                0%{
                    transform: scale(1);
                }
                50%{
                    transform: scale(1.05);
                }
                100%{
                    transform: scale(1);
                }
            }
		</style>
	</head>
	<body>
		<div class="demo"></div>
	</body>
</html>

は、互換性を考慮せずに after および before 疑似要素を使用して実装されており、IE 10 より前では表示されません。

前後をspan要素に置き換えることで解決できます。

-ms-transform を追加する必要があります。

span 要素を使用して描画する場合は、右側のブロックに z-index 属性を設定する必要があります。

以上が純粋な CSS を使用して鼓動する心臓を描画する方法 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。