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

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

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

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

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

前提知識:

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

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

box-shadow

##box-shadow:Shadow

使用法: box-shadow: h-shadow v-shadow ブラー スプレッド カラー インセット;

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

border-radius

border-radius: 角丸の設定

margin

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

左上隅

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

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

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

linear-gradient()

linear-gradient()

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

background-image: Linear-gradient(direction, color-stop1, color-stop2, ...);

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

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

border-radius# を介して周囲の丸い角を設定します。 ## を追加し、

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

##充電効果

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

top

水の位置を制御します。

top

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

アニメーションは非常に簡単です。

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

このときの注意点は次のとおりです:

私たちの上部のコンテナは角が丸くなっているので、アニメーションが 100% に達すると、コンテナの角が丸くなっているはずです。

水位が動いています。立体感を高めるために、影を設定すると累進的な効果が得られるので、色は少し濃い目にするのがベストです。色は近いほど良いです。

• 色を変更するかパス:
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);
            }
          }

を制御します

水の波紋の特殊効果

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

translate

属性は、

x

、

y

の値を変換し、角度を常に回転させて使用しています。なぜこの値になっているかというと、分かりません、分かりました。 。 。知っている人はコメント欄にメッセージを残してください。<pre class='brush:php;toolbar:false;'>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); } }</pre><p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/256/812/408/1650250971855508.gif?x-oss-process=image/resize,p_40" class="lazy" title="1650250971855508.gif" alt="水の波紋のバッテリー充電アニメーション効果を実現する純粋な CSS"></p> <p>此时，我们发现这个效果并不太真实，进行多覆盖两个，改变旋转值和<code>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);
    }
}

此时的效果就非常真实了

End

不得不说css真的很神奇，最神秘的莫过于css，喜欢的点个赞??支持下吧(●￣(ｴ)￣●)

（学习视频分享：web前端）

以上が水の波紋のバッテリー充電アニメーション効果を実現する純粋な CSSの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。