ろうそくを溶かす（水滴）サンプルコードを実現する純粋な CSS
|
成果を達成する
実装のアイデア フィルターのコントラストとぼかしを利用して溶ける効果を実現します。 コード <!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が内部一時テーブルを使用するタイミングについて簡単に説明します。
推薦する
WindowsでcmdからDOSウィンドウに入り、MySQLデータベースにアクセスします。
1. win + R を押して cmd と入力し、DOS ウィンドウに入ります。 2. MySQL...
Java で ffmpeg を呼び出してビデオ形式を flv に変換する方法の詳細な説明
Java で ffmpeg を呼び出してビデオ形式を flv に変換する方法の詳細な説明注:以下のプ...
docker-compose でデプロイしたときに MySQL にアクセスできなくなる問題の簡単な分析
Docker-ComposeとはCompose プロジェクトは、以前の fig プロジェクトから派生...
WiFi 開発 | WiFi ワイヤレス テクノロジーの紹介
目次WiFiワイヤレステクノロジーの紹介1. WiFiテクノロジーの概要2. ESP8266の紹介W...
Ubuntuのインストール Matlab2020b の詳細なチュートリアルとリソース
目次1. リソースファイル2. インストール2.1 詳細な手順2.1.1 ディスクイメージのマウント...
Linux での MySql centos7 のバイナリコンパイルとインストールに関するチュートリアル
// これをインストールするのに丸一日かかったので、記録するためにメモを書きました。 //何か問題が...
CSSでemを開く正しい方法の詳細な説明
「通常 1em=16px」と言うのはなぜですか?ユーザーのブラウザによってレンダリングされるデフォル...
初心者のためのMySQL外部キーの設定方法
目次外部キーの役割mysql 外部キー設定方法要約する外部キーの役割データの一貫性、整合性を維持し、...
負荷分散の基礎知識とnginxを使用した負荷分散の簡単な例
Nginx は、一般的に 7 層の負荷分散に使用できます。この記事では、負荷分散に関する基本的な知識...
MySQLインデックスの作成について知っておくべきこと
目次序文： 1. インデックスメソッドを作成する2. インデックスを作成するために必要な権限序文： ...
MySQLデータベースの追加、削除、変更操作の詳細な説明
データの挿入テーブル名（列名1、列名2、列名3）の値（値1、値2、値3）に挿入します。ユーザーに(u...
MySQL シリーズ データベース設計 3 つのパラダイム チュートリアルの例
目次1. データベース設計の3つのパラダイムに関する知識の説明1. デザインパラダイムとは何ですか?...
seata docker 高可用性デプロイメントの詳細な紹介
バージョン1.4.2公式ドキュメントドッカーハブ起動する環境変数SEATA_CONFIG_NAMEを...
ウェブサイトのフッター沈下現象に対する3つの解決策を詳しく解説
背景多くのウェブサイトのデザインは、一般的にコンテンツ+フッターの2つの部分で構成されています。コン...
mysql8 共通テーブル式 CTE 使用例の分析
この記事では、例を使用して、MySQL 8 の共通テーブル式 (CTE) の使用方法を説明します。ご...