[CSSチュートリアル】ピュアCSSでロウソクの溶ける(水滴)を実現するサンプルコード
2022-02-02 18:46:37
効果の実現
実装のアイデア
フィルターフィルタのコントラストとぼかしを利用して、溶けるような効果を実現しました。
親要素にコントラスト、子要素にぼかしを設定することで、ぼかし効果を実現しています。
コード
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>waterdrop effect</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<div class="hpc">Rain collection shirt</div>
</body>
</html>
html,body{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: #000;
filter: contrast(20);
}
.both{
left: 0;
content: "";
width: 10px;
height: 20px;
bottom: -20px;
border-radius: 50%;
position: absolute;
background-color: #fff;
}
.hpc{
top: 80px;
left: 100px;
color: #fff;
width: 400px;
height: 107px;
font-size: 6rem;
filter: blur(3px);
font-style: italic;
position: relative;
transform: skewY(5deg);
font-family: "Comic Sans MS";
border-bottom: 10px solid #fff;
&::before{
@extend .both;
animation: move 6s ease-in-out infinite;
}
&::after{
@extend .both;
animation: move 6s 1s ease-in-out infinite;
}
@keyframes move{
70%{
bottom: -20px;
transform: translate(380px, 5px);
}
80%{
transform: translate(380px, 3px);
opacity: 1;
}
100%{
transform: translate(380px, 180px);
opacity: 0;
}
}
}
SCSSをCSSに変換してインポートするだけです。
純粋なCSSロウソク溶かし(水滴)サンプルコードの記事はこれで終わりです、もっと関連するCSSロウソク溶かしコンテンツは、スクリプトハウスの過去の記事を検索するか、以下の関連記事を引き続きご覧ください、今後ともスクリプトハウスをよろしくお願いします。
関連
-
[css3]CSS3のダイヤモンドパズルは、divの背景画像を回転させない機能だけを実現するために
-
[Div+CSSチュートリアル】divの背景を透明にする設定例
-
[CSSチュートリアル】カラフルで知的なシャドウ効果を実現するCSS
-
[css3]CSS3遷移回転遠近法2D3Dアニメーションなどの効果を持つサンプルコード
-
[CSSチュートリアル]実装ステップの吸引上部と下部のH5レイアウトのための純粋なCSSソリューション
-
[CSSチュートリアル]適応的な幅と高さの矩形の16:9の例を達成するためのCSS
-
[css3]CSS3:overflowプロパティ
-
[css3]css3 elastic box flexによる3カラムレイアウトの実装。
-
[CSSチュートリアル]スクロールバーを非表示にし、サンプルコードの内容をスクロールすることができますするCSS
-
[css3】background属性の8つの属性値について解説(インタビュー記事)
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[CSSチュートリアル】overflow:hiddenの役割を解説(overflow hidden、clear float、外周マージンの崩れを解決する)。
-
[CSSチュートリアル】子要素のmargin-topが親要素の移動を引き起こす問題解決
-
[css3]スクロールバー美化効果を実現するcss3サンプルコード
-
[css3] CSS3を使ってヘッダーアニメーション効果を作成する
-
[css3]css3によるフレックスレイアウト幅の解決方法が有効でない件
-
[css3]CSS3は本当にSCSSに取って代わるのだろうか?
-
[CSSチュートリアル】SCSS50%スタイルコード削減のための14の実践レッスン
-
[css3] 翻訳効果のあるcss3例(翻訳:translate)
-
[CSSチュートリアル]フレックス内のボタンを縦に中央寄せにしない意外な解決法
-
[CSSチュートリアル]cssで背景画像の上にテキストを実現する