ろうそくを溶かす（水滴）サンプルコードを実現する純粋な CSS

成果を達成する

雨が降ったら服を集めましょう

実装のアイデア

フィルターのコントラストとぼかしを利用して溶ける効果を実現します。
親要素にコントラストを設定し、子要素にぼかしを設定すると、2 つをブレンドする効果が得られます。

コード

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <title>水滴効果</title>
  <link rel="スタイルシート" type="text/css" href="css/index.css">
</head>
<本文>
  <div class="hpc">雨が降ったら服をしまっておく</div>
</本文>
</html>

html,本文{
  マージン: 0;
  パディング: 0;
  幅: 100%;
  高さ: 100%;
  オーバーフロー: 非表示;
  背景: #000;
  フィルター:コントラスト(20);
}


。両方{
  左: 0;
  コンテンツ： "";
  幅: 10px;
  高さ: 20px;
  下: -20px;
  境界線の半径: 50%;
  位置: 絶対;
  背景色: #fff;
}
.hpc{
  上: 80px;
  左: 100px;
  色: #fff;
  幅: 400ピクセル;
  高さ: 107px;
  フォントサイズ: 6rem;
  フィルター: ぼかし(3px);
  フォントスタイル: 斜体;
  位置: 相対的;
  変換: skewY(5deg);
  フォントファミリ: "Comic Sans MS";
  下境界線: 10px 実線 #fff;

  ＆：：前に{
    @extend .both;
    アニメーション: 6 秒のイーズインアウト無限移動;
  }

  ＆：：後{
    @extend .both;
    アニメーション: 6 秒移動、1 秒のイーズインアウト、無限;
  }

  @keyframes 移動{
    70%
      下: -20px;
      変換: translate(380px, 5px);
    }
    80%
      変換: translate(380px, 3px);
      不透明度: 1;
    }
    100%{
      変換: translate(380px, 180px);
      不透明度: 0;
    }
  }
}

SCSS を CSS に変換してインポートするだけです。

純粋な CSS でろうそくが溶ける (水滴) を実装するサンプルコードに関するこの記事はこれで終わりです。CSS でろうそくが溶ける関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: MySQLが内部一時テーブルを使用するタイミングについて簡単に説明します。

>>: 判定条件を使用してCSSファイルをインポートする