ろうそくを溶かす（水滴）サンプルコードを実現する純粋な 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が内部一時テーブルを使用するタイミングについて簡単に説明します。
推薦する
mysql 実行プラン ID が空である (UNION キーワード) の詳細な説明
導入作業プロセス中に、遅いクエリが調整されることがあります。 MySQL SQL ステートメントのチ...
node.js でマルチコア CPU を最大限に活用する方法
目次概要node.js でマルチコア CPU を最大限に活用する方法Node で子プロセスを作成する...
IE6 の歪み問題
質問： <form...> の下の <input type="hidde...
MySQLデータベースのリアルタイムバックアップの知識ポイントを詳しく解説
序文リアルタイムのデータベース バックアップの必要性は非常に一般的です。MySQL 自体はレプリケー...
ナビゲーションバーのドロップダウンメニューのサンプルコードを実装するためのHTML+CSS
効果コード内の画像は自分で変更できますドロップダウンメニューのHTMLコード <ヘッダークラ...
Vue でユーザー権限に基づいてルートを動的に追加する方法
ユーザーの権限に応じて異なるメニュー ページを表示します。知識ポイントルートガード（事前ガードを使用...
Linuxのseqコマンドを使用して数字のシーケンスを生成します（推奨）
Linux の seq コマンドは、数字のリストを非常に高速に生成でき、使いやすく柔軟性に優れてい...
MySQL パフォーマンス最適化のヒント
MySQL パフォーマンスの最適化MySQL はインターネット企業で広く使用されており、MySQL ...
VMWare12 グラフィックチュートリアルで Apple Mac OS X をインストールする
1. はじめに:友人はシステム知識を学びたいと考えており、Apple のラップトップを使用していまし...
HTML テーブルの境界線を設定する際のヒント
HTML を初めて使用する多くの人にとって、テーブル <table> は最もよく使用され...
発生したブラウザの互換性の問題と解決策（推奨）について
序文：先週の日曜日、先輩から3ページ作るのを手伝って欲しいと頼まれました。データのやり取りなどはなく...
CSS 複数 3 列適応レイアウト実装の詳細な説明
序文従来のWEBレイアウトに沿うため、すべてヘッダーとフッターモードの左・中央・右レイアウトで書かれ...
Linux でユーザーを完全に削除する 2 つの方法
Linux 操作実験環境: Centos7 仮想マシンまず、共通ユーザーgubeiqingを作成しま...
ウェブページの HTML コード: スクロールテキストの作成
このセクションでは、Web ページ内のテキストをスクロールしたり、スクロール プロパティを制御できる...
Hadoopカウンターとデータクリーニングの適用
データクリーニング (ETL)コアビジネスの MapReduce プログラムを実行する前に、まずデー...