ホームページ > 記事 > ウェブフロントエンド > 純粋な CSS を使用して鼓動する心臓を描画する方法 (コード例)
純粋な CSS を使用して鼓動する心臓を描画する方法 (コード例)
- 青灯夜游オリジナル
- 2018-09-13 16:42:512579ブラウズ
この章では、純粋な CSS を使用して鼓動する心臓を描く方法を説明します。 (コード例) は参考になると思います。
最初にレンダリングを示します:
 "153682704622315純粋な CSS を使用して鼓動する心臓を描画する方法 (コード例)")
実装の原理:
1. このハートは 2 つの部分、2 つの長方形に分割できます
 "153682738011893純粋な CSS を使用して鼓動する心臓を描画する方法 (コード例)")
2 つのグラフィックが重なった後、transform:rotate() をそれぞれ設定します。設定されたrotate() の値は、1 つの正の値と 1 つの負の値である必要があります。
 "153682774316128純粋な CSS を使用して鼓動する心臓を描画する方法 (コード例)")
立体的に見せるために、左側にボックスシャドウを設定します
次に、@keyframes と属性を変換してジャンプ効果を実現します。
 "153682780259903純粋な 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: '';
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 より前では表示されません。
以上が純粋な CSS を使用して鼓動する心臓を描画する方法 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。