戦闘へのWebフロントエンドの取得：CSSの絵画や卵形のハート型

免責事項：この記事はブロガーオリジナル記事です、続くBY-SAのCC 4.0を著作権契約、複製、元のソースのリンクと、この文を添付してください。

このリンク： https://blog.csdn.net/wewfdf/article/details/102691630

ハート型

変換-origin属性セットポイントを使用すると、異なる起源を達成するために

図1に示すように、要素はポイント変換原点を変更（トランスフォーム原点が原点の変形例であり、原点は、回転や変形約元素です）

注意：このプロパティは、唯一の時間のtransformプロパティを設定する際に役割を果たしています。

ケースが設定されていない場合、デフォルトは、その中心位置の要素を指すようになります。即ち、変換原点を使用することなく、変換、回転変換、スケール、スキュー、原点と自身の中心位置に基づいて行列演算属性。

変換原産の使い方

**语法：-moz-変換起源：[| | 左| センター| 右] [| | トップ| センター| 下] **

変換原産の属性値が特定の値、EM、pxと同様の割合であることができ、トップであってもよいし、右、下、左、およびそのキーの中心。

2D変換由来の属性変更は、パラメータ値のいずれかとすることができる、パラメータ値は、2であってもよいです。2つのパラメータ値、X軸方向の水平位置の最初の値が、第二の値は、Y軸方向の垂直位置を設定するために使用されている場合。

さらに、Z軸の3番目の値を含むで3D変形変換由来の特性。次のようにその値それぞれの値を簡単に説明します：

トップ=トップ中心=中央上部には、50％0と等価です
右右=右の中心=中心と同等、または100％（100％〜50％）
**ボトム=ボトムセンター= 100％〜50％に相当**底中心
=左中央左=中央左と同等であるか、または0（50％0）
センター=中央センターが（50％〜50％）と同等または50％です
左上=左上は 00と同等です
右上=右上は 100％0と等価です
右下=右下 100％、100％に相当します
左下=左下は 0〜100％に相当します

左、中央、右水平方向値、左対応するパーセンタイル値= 0％;中央= 50％、右= 100％

上部中央の縦方向のボトム値、前記トップ= 0％;中央= 50％;底= 100％。

垂直方向に同じ値を表す値をとる場合にのみ。

使用しますと前：擬似後にコンテンツ要素を追加します。

変換原産のブラウザでのプロパティのサポートは特に高くはないので、プレフィックスを追加することを忘れないでください

測位位置：相対的および絶対的


web前端开发学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3</title>
    <style>
    .xin{
        width:90px;
        height:80px;
        position:relative;
        margin:100px auto;
        background-color:#99f;
    }
    .xin:before{
        content:" ";
        position:absolute;
        width:45px;
        height:70px;
        background-color:#f99;
        border-radius: 50px 50px 0 0;
        -webkit-transform-origin:0 100% ;
        -ms-transform-origin:0 100% ;
        -o-transform-origin:0 100% ;
        transform-origin:0 100% ;
        /*定义原点*/
        transform:rotate(-45deg);
        left:45px;
    }
    .xin:after{
        content:" ";
        position:absolute;
        width:45px;
        height:70px;
        background-color:#9f9;
        border-radius: 50px 50px 0 0;
        -webkit-transform-origin:100% 100% ;
        -ms-transform-origin:100% 100% ;
        -o-transform-origin:100% 100% ;
        transform-origin:100% 100% ;
        /*定义原点，设置原点的时候一定要加前缀，浏览器支持*/
        transform:rotate(45deg);
        right:45px;
    }
    </style>
</head>
<body>
    <div class="xin"></div>
</body>
</html>

第二に、心臓の鼓動

上記のあなたが鼓動する心臓を達成したい場合にのみ追加する必要があり、心臓の形を描画するためにCSSを使用する方法について説明アニメーションアニメーションをすることができます

ハート形の影が周囲に使用するフィルタのフィルタ特性が

フィルタ：ドロップシャドウ（0PX 0PX 20ピクセルのRGB（255,20,20））。

フィルタ属性中的ドロップシャドウ（H-シャドウV-シャドウぼかし拡散色）

**の結果を得る：**画像に影の効果を設定します。

画像の下合成影が、曖昧さが存在してもよい、図は、マスクのバージョンが特定の色で描かれてもよいシフト。ファンクションキーワードが許可されていません**「インセット」に加えて、（CSS3の背景に定義された）値を入力し受け入れます。この機能は、従来のボックスシャドウプロパティと同様です。

違いは、フィルタフィルタを通して、より良いパフォーマンスのためのいくつかのブラウザでは、ハードウェアアクセラレーションを提供し、ということです。

** H-シャドウ**横シャドー、影が左要素に表示されるドロップ。

V-シャドウ垂直方向のシェーディング、陰影が要素の上に表示されるドロップ;（ H-シャドー、影がちょうど要素の後ろに表示される場合に0の値に設定した後** V-影）

ぼかしぼやけた距離を、値が大きいほど、よりぼやけた、影が大きく、軽くなる。設定されていない場合、デフォルトは0であり、負の値を許可しない（影の境界が非常にシャープです）

普及拡大し、大きくなる正の影を、負の影が低減される。設定されていない場合、デフォルトは0である（影要素と同じサイズになります）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3</title>
    <style>
    .xin{
        width:90px;
        height:80px;
        position:relative;
        margin:100px auto;
        /*background-color:#99f;*/
        animation: test 1s linear infinite;
        filter:drop-shadow(0px 0px 20px rgb(255,20,20));
    }
    .xin:before{
        content:" ";
        position:absolute;
        width:45px;
        height:70px;
        background-color:red;
        border-radius: 200px 200px 0 0;
        -webkit-transform-origin:0 100% ;
        -ms-transform-origin:0 100% ;
        -o-transform-origin:0 100% ;
        transform-origin:0 100% ;
        /*定义原点*/
        transform:rotate(-45deg);
        left:45px;
    }
    .xin:after{
        content:" ";
        position:absolute;
        width:45px;
        height:70px;
        background-color:red;
        border-radius: 200px 200px 0 0;
        -webkit-transform-origin:100% 100% ;
        -ms-transform-origin:100% 100% ;
        -o-transform-origin:100% 100% ;
        transform-origin:100% 100% ;
        /*定义原点，设置原点的时候一定要加前缀，浏览器支持*/
        transform:rotate(45deg);
        /*right:45px;*/
    }
    @keyframes test{
          0%{
            transform: scale(0.8,0.8);
            opacity: 1;
          }
          25%{
            transform: scale(1,1);
            opacity: 0.8;
          }
          100%{
            transform: scale(0.8,0.8);
            opacity: 1;
          }
     }
    </style>
</head>
<body>
    <div class="xin"></div>

</body>
</html>

あなたと学習方法のいくつかを共有するために、六年目のプログラミング、戦闘開発が細部に注意を払う必要があります。767-273-102秋のドレス。ゼロベースのフロントエンドから起動する方法を学習します。前任者は誇らしげにプログラミングの世界に転送する方法を確認するには！常に私は、Webフロントエンドを学びたいと思っていたが、最新のチュートリアルや学習方法（ルートを学習するためのWebフロントエンドシステム、詳細なフロントエンドプロジェクトの戦闘教育ビデオ）で更新、または変更するジョブ、または大学生だけでなく、仕事のスキルをアップグレードしたいです、小さなパートナーを検討しているの参加を歓迎します。私たちは一緒に歩いていく先端の先端

第三に、卵形

境界半径 /フレーム寸法使用は、X軸とY軸に設けられています。

右上 - - 右下 - 左下時計回りに、左上です

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3</title>
    <style>
    .egg{
        width:126px;
        height:180px;
        background-color:#fa3;
        margin:100px auto;
        border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    }
    </style>
</head>
<body>
    <div class="egg"></div>
</body>
</html>