水の波紋のバッテリー充電アニメーション効果を実現する純粋な CSS

この記事では、CSSを上手に使って、水の波紋のバッテリー充電アニメーション効果を実現する方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

フロントエンドを構成する 3 つの主要な言語は、html、cssであることがわかっています。とjs、その中で最も謎なのはcssですが、なぜそんなことを言うのですか?アニメーションやトランジションなどの属性が登場してからは、思いつかなければできないことはないと言っていいでしょう ~

前回の記事では携帯電話の充電について紹介しました。アニメーションエフェクト、今日も続きます。前回の記事に比べて、少し簡単な記事ですが、彼女のためにここに書きます~

特殊効果:バッテリーチャージ特殊効果、全体の特殊効果は上部に表示されます

前提知識:

この特殊効果を完了するには、次のことを知っておく必要があります前提条件となる属性がいくつかあります。簡単に紹介しましょう:

animation、transform、filterについては詳しくは説明しません。基本的にすべてのアニメーションで使用されます。この 2 つのプロパティ。 [推奨学習:css ビデオ チュートリアル]

box-shadow

##box-shadow:Shadow

• h-shadow: 必須、水平方向のシャドウ位置、負の値も許可されます
• v-shadow: 必須。垂直影の位置。負の値が許可されます
• blur: ぼかしの距離
• spread: 影のサイズ
• color: 影の色
• inset: 影を外側の影(開始時)から内側の影に変更します

border-radius

border-radius: 角丸の設定

およびpadding と同じ 4 つの値を設定できます。つまり、各半径の 4 つの値の順序は、

、右上隅、です。右下隅、左下隅。

• 右下隅を省略した場合は、左上隅も同じになります。
• 右上角を省略した場合は左上角となります。

: グラデーション。2 つ以上を表すグラデーションを作成するために使用されます。色の線形グラデーションの画像。使用法:

direction
• : 角度の値を使用してグラデーションの方向 (または角度) を指定し、方向を指定します。
color...
• : どの色がどの色に順番に変化するか
コンテナ

シートの底にコンテナ、その上に小さな蓋の 2 つの div を設定します。主に

box -shadow影を追加して立体感を高めます

配置レイアウトを使用できますここで

水の位置を制御します。

の値が大きいほど、水は低くなります。topの値が小さいほど、水は低くなります。水位を 80% に設定し、linear-gradient()を渡して、水のグラデーションの色を設定します。

topの値を制御するだけです。これにより、次のように水が上昇します。

• 色を変更するかパス:
filter: hue-rotate();
• この属性は

• .content{ //容器 border-radius: 15px 15px 5px 5px; &::after{ position: absolute; top: 80%; background: linear-gradient(to bottom, #7abcff 0%, #00BCD4 44%, #2196F3 100%); border-radius: 0px 0px 5px 5px; box-shadow: 0 14px 28px rgba(33, 150, 243, 0), 0 10px 10px rgba(9, 188, 215, 0.08); animation: change 10s linear infinite; filter: hue-rotate(90deg); } } @keyframes change { 30% { box-shadow: 0 14px 28px rgba(0, 150, 136, 0.83), 0px 4px 10px rgba(8, 117, 134, 0.4); } 50%{ filter: hue-rotate(60deg); } 80% { top: 20%; border-radius: 0 0 5px 5px; box-shadow: 0 14px 28px rgba(6, 136, 153, 0.2), 0 10px 10px rgba(12, 10, 112, 0.08); } 100% { top: 0%; filter: hue-rotate(0deg); border-radius: 15px 15px 5px 5px; box-shadow: 0 14px 28px rgba(7, 93, 104, 0), 0 10px 10px rgba(31, 3, 68, 0.4); } }

  ログイン後にコピー
を制御します

誰もが見たことがある特殊効果だと思いますが、上のおおよその位置に背景色を設定し、同じ背景色で覆うというアイデアです。

属性は、

、

の値を変換し、角度を常に回転させて使用しています。なぜこの値になっているかというと、分かりません、分かりました。 。 。知っている人はコメント欄にメッセージを残してください。

p{ //复盖 border-radius: 45% 47% 44% 42%; transform: translate(-50%, 0); animation: move 10s linear infinite; } @keyframes move { 100% { transform: translate(-50%, -160px) rotate(720deg); } }

此时，我们发现这个效果并不太真实，进行多覆盖两个，改变旋转值和border-radius的值来设置水面不重叠，但又有差距的效果

p{ &:nth-child(2){ border-radius: 38% 46% 43% 47%; transform: translate(-50%, 0) rotate(-135deg); } &:nth-child(3){ border-radius: 42% 46% 37% 40%; transform: translate(-50%, 0) rotate(135deg); } }