【css3でHuaweiの充電を実現】予想外のCSS効果によるHuaweiの充電効果（ソースコードダウンロード付き）

[表書き] 今日は大学入学試験 2 日目です。ここで学生の皆さんの無事なスタートと、理想の大学への入学をお祈りしています。今日のめでたい日を活かして、CSS を使って以下のことを行う方法を紹介します。 Huaweiの充電効果を実現します。
関係する知識ポイント: CSS3 特殊効果、Huawei 課金特殊効果の実装、CSS 属性フィルターの適用、疑似要素の前後の柔軟な適用。CSS3は、Huawei充電のダイナミックな効果とCSSバブルのダイナミックな効果を実現します。

著作権に関する声明: 元々は CSDN Blogger で公開されました -杖を使って視覚障害者のためのコードを学ぶ、ご不明な点がございましたら、メッセージを残してプライベート メッセージを送信してください。

他に言うことはありません。最初に効果を示しましょう (完全なコードは記事の最後にあります)。

これを実装するのは実際にはそれほど難しいことではありませんが、次の 2 つの主要なステップ (円の描画とバブルのダイナミクス) を明確にする必要があります。

作成するのは簡単ではありません。気に入ってブロガーをサポートしたい場合は、ここをクリックして皇帝リストに掲載してください。

1. サークルダイナミクス（分かりやすくするために、ドームを背景を白に設定しています）

1. まず循環 dom ノードを構築します

before 属性を使用して border-radius: 50% を設定し、円形の効果を実現します

2. after 疑似要素を使用して、その周りのダイナミクスを設定します

核となるのはアニメーションプロパティの設定で、主にダイナミックエフェクトを設定します。10秒間のアニメーションエフェクト表示を設定しました。設定後は次のようになります。

.g-circle::after {
    
    
  content: "";
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0);
  width: 200px;
  height: 200px;
  background-color: #00ff6f;
  border-radius: 42% 38% 62% 49% / 45%;
  animation: rotate 10s infinite linear;
}

3. CSS3 を使用してフィルターフィルターを実現し、鮮明とぼかしの混合効果を実現します

主に、 hue-rotate、色相回転プロパティ、
contrast、画像のコントラストの調整、
blur、プロパティの設定の 3 つのプロパティの設定を適用します。
設定後の効果は次のとおりです。

.g-contrast {
    
    
  filter: contrast(10) hue-rotate(0);
  width: 300px;
  height: 400px;
  background-color: #000;
  overflow: hidden;
  animation: hueRotate 10s infinite linear;
}

.g-circle {
    
    
  position: relative;
  width: 300px;
  height: 300px;
  box-sizing: border-box;
  filter: blur(8px);
}

4. 背景の最終効果を削除する

2. 充電ダイナミクス (バブルの実現)

実際には、各ノードのオフセット値変更とサイズ変更を変更する走査周期を設定する限り、これを scss で実装するのが最も便利ですが、各バブルの属性を設定するだけで CSS でも実現できます。ノード、これは非常に問題です。

SCSS は次のコア コードを実装します。

@for $i from 0 through 15 {
    
    
      li:nth-child(#{
    
    $i}) {
    
    
        $width: 15+random(15)+px;
        left: 15 + random(70) + px;
        top: 50%;
        transform: translate(-50%, -50%);
        width: $width;
        height: $width;
        animation: moveToTop #{
    
    random(6) + 3}s ease-in-out -#{
    
    random(5000)/1000}s infinite;
      }
    }

CSS はコア コードを実装します。

16 個のノードにエフェクトを個別に設定します。

li:nth-child(0) {
    
    
  left: 55px;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  animation: moveToTop 8s ease-in-out -0.53s infinite;
}

li:nth-child(1) {
    
    
  left: 70px;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 17px;
  height: 17px;
  animation: moveToTop 6s ease-in-out -4.403s infinite;
}

li:nth-child(2) {
    
    
  left: 59px;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  animation: moveToTop 5s ease-in-out -3.403s infinite;
}

li:nth-child(3) {
    
    
  left: 69px;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 27px;
  height: 27px;
  animation: moveToTop 7s ease-in-out -3.684s infinite;
}

li:nth-child(4) {
    
    
  left: 18px;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 17px;
  height: 17px;
  animation: moveToTop 8s ease-in-out -1.552s infinite;
}

li:nth-child(5) {
    
    
  left: 50px;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  animation: moveToTop 5s ease-in-out -4.481s infinite;
}

li:nth-child(6) {
    
    
  left: 17px;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  animation: moveToTop 6s ease-in-out -4.23s infinite;
}

li:nth-child(7) {
    
    
  left: 64px;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 19px;
  height: 19px;
  animation: moveToTop 8s ease-in-out -3.49s infinite;
}

li:nth-child(8) {
    
    
  left: 77px;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 25px;
  height: 25px;
  animation: moveToTop 7s ease-in-out -4.137s infinite;
}

li:nth-child(9) {
    
    
  left: 37px;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  animation: moveToTop 5s ease-in-out -3.663s infinite;
}

li:nth-child(10) {
    
    
  left: 40px;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 27px;
  height: 27px;
  animation: moveToTop 8s ease-in-out -4.285s infinite;
}

li:nth-child(11) {
    
    
  left: 46px;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  animation: moveToTop 8s ease-in-out -1.328s infinite;
}

li:nth-child(12) {
    
    
  left: 79px;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  animation: moveToTop 9s ease-in-out -0.785s infinite;
}

li:nth-child(13) {
    
    
  left: 47px;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  animation: moveToTop 6s ease-in-out -0.821s infinite;
}

li:nth-child(14) {
    
    
  left: 43px;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 21px;
  height: 21px;
  animation: moveToTop 8s ease-in-out -1.952s infinite;
}

li:nth-child(15) {
    
    
  left: 43px;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  animation: moveToTop 7s ease-in-out -2.652s infinite;
}

効果は次のとおりです。

著作権に関する声明: 元々は CSDN Blogger に掲載されました - 杖を使って視覚障害者のためのコードを学びましょう。ご不明な点がございましたら、メッセージを残してプライベート メッセージを送信してください。

3. 完全なコードパッケージ共有

Baidu ネットワーク ディスクのダウンロード アドレス

リンク: https://pan.baidu.com/s/1VPRbAqInisTfhrPfcocOMw
抽出コード: hdd6

123 クラウド ディスクのダウンロード アドレス

リンク: https://www.123pan.com/s/ZxkUVv-5iJ4.html
抽出コード: hdd6

イースターエッグリスト

傑作を作成することに専念して、あなたの混乱を解決したいと思います。運がよければ、あなたがリストに載って手助けしてくれることを願っています。ありがとうございました!
黄邦の入口はこちら