CSS3で実装された天気アイコンのアニメーション効果

CSS3で実装された天気アイコンのアニメーション効果

成果を達成する

実装コード

html

<div class="wrapper">
  <div class="sun"></div>
  <div class="クラウド">
    <div class="cloud1">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <div class="cloud1 c_shadow">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
  
  <div class="cloud_s">
    <div class="cloud1">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <div class="cloud1 c_shadow">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
  
  <div class="cloud_vs">
    <div class="cloud1">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <div class="cloud1 c_shadow">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
  <div class="ヘイズ"></div>
  <div class="haze_stripe"></div>
  <div class="haze_stripe"></div>
  <div class="haze_stripe"></div>
  <div class="雷"></div>
  <div class="雨">
     <ul>
       <li></li>
       <li></li>
       <li></li>
    </ul>
  </div>
  <div class="みぞれ">
     <ul>
       <li></li>
       <li></li>
       <li></li>
    </ul>
  </div>
  <div class="text">
    <ul>
      <li>晴れ</li>
      <li>晴れ</li>
      <li>曇り</li>
      <li>曇り</li>
      <li>曇り</li>
      <li>かすんでいる</li>
      <li>雷雨</li>
      <li>雨</li>
      <li>みぞれ</li>
    </ul>
  </div>
</div>

CSS3

url をインポートします(https://fonts.googleapis.com/css?family=Raleway+Dots);

体{
  マージン: 0;
  パディング: 0;
  背景: #33495f;
}

.ラッパー{
  幅: 150ピクセル;
  高さ: 150px;
  位置: 絶対;
  上: calc(50% - 75px);
  左: calc(50% - 75px);
}

。太陽{
  位置: 絶対;
  下: 0px;
  右: 0px;
  幅: 85px;
  高さ: 85px;
  背景: #f9db62;
  境界線の半径: 360px;
  不透明度: 1;
  アニメーション: 太陽 10 秒 0 秒 線形無限;
}

。雲{
  位置: 絶対;
  下: 12px;
  左: 8px;
  zインデックス: 2;
  不透明度: 0;
  アニメーション: クラウド 10 秒 0 秒 線形 無限;
}

.cloud .cloud1:not(.c_shadow) ul li{
  アニメーション: cloudi 10s 0.1s 線形無限;
}

.cloud .cloud1:not(.c_shadow):before{
  アニメーション: cloudi 10s 0s 線形無限;
}

.cloud_s{
  位置: 絶対;
  下: 70px;
  左: 150px;
  変換: スケール(0.7,0.7) 行列(-1, 0, 0, 1, 0, 0);
  zインデックス: 1;
  不透明度: 0;
  アニメーション: cloud_s 10s 0s 線形無限;
}

.cloud_s .c_shadow{
  変換: スケール(1.02,1.02);
}

.cloud_vs{
  位置: 絶対;
  下: 90px;
  左: 30px;
  変換: スケール(0.5,0.5);
  zインデックス: 0;
  不透明度: 0;
  アニメーション: cloud_vs 10s 0s 線形無限;
}

.c_shadow{
  z-index: 4 !重要;
  左: -5px;
  下: -3px !重要;
}

.c_shadow:前{
  背景: #33495f !重要;
}

.c_shadow ul li{
  幅: 60px !重要;
  高さ: 60px !重要;
  背景: #33495f !重要;
  フロート: 左;
  位置: 絶対;
  下: -2px !重要;
  境界線の半径: 360px;
}

.c_shadow ul li:nth-child(2){
  幅: 80px !重要;
  高さ: 80px !重要;
  背景: #33495f !重要;
  フロート: 左;
  境界線の半径: 360px;
  位置: 絶対;
  下部: 16px !重要;
  左: 25px !important;
}

.c_shadow ul li:nth-child(3){
  幅: 70px !重要;
  高さ: 70px !重要;
  背景: #33495f !重要;
  フロート: 左;
  境界線の半径: 360px;
  位置: 絶対;
  下: 6px !重要;
  左: 60px !important;
}

.c_shadow ul li:最後の子{
  幅: 60px !重要;
  高さ: 60px !重要;
  背景: #33495f !重要;
  フロート: 左;
  境界線の半径: 360px;
  位置: 絶対;
  下: 0px;
  左: 90px;
}


.cloud1{
  位置: 絶対;
  下: 0px;
  zインデックス: 5;
}

.cloud1:前{
  コンテンツ： '';
  位置: 絶対;
  下: 0px;
  左: 28px;
  幅: 90ピクセル;
  高さ: 20px;
  背景: #fff;
}

.cloud1 ul{
  リストスタイル: なし;
  マージン: 0;
  パディング: 0;
}

.cloud1 ul li{
  幅: 50px;
  高さ: 50px;
  背景: #fff;
  フロート: 左;
  境界線の半径: 360px;
}

.cloud1 ul li:nth-child(2){
  幅: 70ピクセル;
  高さ: 70px;
  背景: #fff;
  フロート: 左;
  境界線の半径: 360px;
  位置: 絶対;
  下: 18px;
  左: 25px;
}

.cloud1 ul li:nth-child(3){
  幅: 60ピクセル;
  高さ: 60px;
  背景: #fff;
  フロート: 左;
  境界線の半径: 360px;
  位置: 絶対;
  下: 8px;
  左: 60px;
}

.cloud1 ul li:最後の子{
  幅: 50px;
  高さ: 50px;
  背景: #fff;
  フロート: 左;
  境界線の半径: 360px;
  位置: 絶対;
  下: 0px;
  左: 90px;
}

.ヘイズ{
  背景: #33495f;
  位置: 絶対;
  下: 50px;
  左: 0px;
  幅: 200ピクセル;
  高さ: 45px;
  zインデックス: 6;
  不透明度: 0;
  アニメーション: ヘイズ 10 秒 0 秒 線形 無限;
}

.ヘイズ_ストライプ{
  背景: #a3b5c7;
  位置: 絶対;
  下: 75px;
  左: 20px;
  幅: 115ピクセル;
  高さ: 10px;
  zインデックス: 17;
  不透明度: 0;
  境界線の半径: 360px;
  アニメーション: haze_stripe 10 秒 0.1 秒 線形 無限;
}

.haze_stripe:n番目の子(6){
  下: 55px;
  アニメーション: haze_stripe 10 秒 0.2 秒 線形 無限;
}
.haze_stripe:最後の子{
  下: 35px;
  アニメーション: haze_stripe 10 秒 0.4 秒 線形無限;
}

。雷{
  位置: 絶対;
  下: 100px;
  左: 65px;
  幅: 12px;
  高さ: 12px;
  背景: #f9db62;
  変換: skew(-25deg);
  不透明度: 0;
  アニメーション: 雷 10 秒 0 秒 線形 無限;
}

.thunder:before{
  コンテンツ： '';
  位置: 絶対;
  上: 11px;
  左: 0px;
  幅: 25px;
  高さ: 8px;
  背景: #f9db62;
}

.thunder:after{
  コンテンツ： '';
  位置: 絶対;
  幅: 0; 
  高さ: 0;
  上: 18px;
  右: -14px;
  border-left: 5px 透明の実線;
  border-right: 5px 透明の実線;
  
  上境界線: 20px 実線 #f9db62;
  変換: skew(5deg);
}

。雨{
  位置: 絶対;
  下: 0px;
  左: 25px;
}

.rain ul{
  リストスタイル: なし;
  マージン: 0;
  パディング: 0px;
}

.rain ul li{
  フロート: 左;
  位置: 絶対;
  下: 50px;
  左: 50px;
  左マージン: 20px;
  背景: #6ab9e9;
  高さ: 40px;
  幅: 10px;
  境界線の半径: 360px;
  変換: 回転(35度);
  不透明度: 0;
}

.rain ul li:first-child{
  アニメーション: raini 10s 0s 線形無限;
}

.rain ul li:nth-child(2){
  アニメーション: rainii 10秒 0.2秒 線形無限;
}

.rain ul li:last-child{
  アニメーション: rainiii 10s 0.4s 線形無限;
}

.みぞれ{
  位置: 絶対;
  下: 0px;
  左: 25px;
}

.みぞれ ul{
  リストスタイル: なし;
  マージン: 0;
  パディング: 0px;
}

.みぞれ ul li{
  フロート: 左;
  位置: 絶対;
  下: 50px;
  左: 50px;
  左マージン: 20px;
  背景: #fff;
  高さ: 40px;
  幅: 10px;
  境界線の半径: 360px;
  変換: 回転(35度);
  不透明度: 0;
}

.sleet ul li:first-child{
  アニメーション: raini 10 秒 1.0 秒 線形無限;
}

.sleet ul li:nth-child(2){
  アニメーション: rainii 10秒 1.4秒 線形無限;
}

.sleet ul li:last-child{
  アニメーション: rainiii 10秒 1.6秒 線形無限;
}

。文章{
  位置: 絶対;
  下: 0px;
}

.text ul{
  リストスタイル: なし;
  マージン: 0;
  パディング: 0;
}

.text ul li{
  位置: 絶対;
  下: -50px;
  幅: 150ピクセル;
  色: #fff;
  フォントファミリー: 'Raleway Dots'、筆記体;
  フォントの太さ: 100;
  フォントサイズ: 20px;
  テキスト配置: 中央;
  不透明度: 0;
}

.text ul li:first-child{
  アニメーション: fade_in 10.0s 0s 線形無限;
}

.text ul li:nth-child(2){
  アニメーション: fade_in 10.0s 1.6s 線形無限;
}

.text ul li:nth-child(3){
  アニメーション: fade_in 10.0s 2.4s 線形無限;
}

.text ul li:nth-child(4){
  アニメーション: fade_in 10.0s 3.4s 線形無限;
}

.text ul li:nth-child(5){
  アニメーション: fade_in 10.0s 4.0s 線形無限;
}

.text ul li:nth-child(6){
  アニメーション: fade_in 10.0s 5.4s 線形無限;
}

.text ul li:nth-child(7){
  アニメーション: fade_in 10.0s 6.4s 線形無限;
}

.text ul li:nth-child(8){
  アニメーション: fade_in 10.0s 7.2s 線形無限;
}

.text ul li:nth-child(9){
  アニメーション: fade_in 10.0s 8.2s 線形無限;
}

@keyframes 太陽{
  0%{
    不透明度: 1;
    下: 35px;
    右: 35px;
  }
  4%
    下: 80px;
    右: 80px;
  }
  4.5%
    下: 75px;
    右: 75px;
    不透明度: 1;
  }
  40%
    不透明度: 1;
  }
  41%
    下: 75px;
    右: 75px;
    不透明度: 0;
  }
  100%{
    不透明度: 0;
    下: 0px;
    右: 0px;
  }
}

@keyframes クラウド{
  0%{
    変換: スケール(0.8);
    左: 120px;
    下: 35px;
    不透明度: 0;
  }
  2%{
    不透明度: 1;
  }
  3.5%
    下: 35px;
    左: 10px;
    不透明度: 1;
  }
  16%
    変換: スケール(0.8);
  }
  18%
    変換: スケール(0.95);
  }
  19%
    変換: スケール(0.9);
  }
  48%
    不透明度: 1;
    下: 35px;
  }
  50%{
    下: 70px;
  }
  64%
    
  }
  96%
    不透明度: 1;
  }
  100%{
    不透明度: 0;
    下: 70px;
    左: 10px;
  }
}

@keyframes クラウド_s{
  0%{
    変換: スケール(0.6);
    不透明度: 0;
    下: 40px;
    左: 18px;
  }
  23％{
    不透明度: 0;
  }
  24％{
    不透明度: 1;
    下: 40px;
    左: 30px;
  }
  28%
    不透明度: 1;
    下: 85px;
    左: 60px;
  }
  32%
    変換: スケール(0.6);
  }
  34%
    変換: スケール(0.75);
  }
  35%
    変換: スケール(0.7);
  }
  48%
    不透明度: 1;
  }
  49%
    不透明度: 0;
  }
  100%{
    変換: スケール(0.7);
    不透明度: 0;
    下: 85px;
    左: 60px;
  }
}

@keyframes クラウド_vs{
  0%{
    不透明度: 0;
    下: 85px;
    左: 60px;
  }
  39%
    不透明度: 0;
  }
  40%
    不透明度: 1; 
    下: 85px;
    左: 60px;
  }
  42%
    下部: 125px;
    左: 10px;
  }
  43%
    下: 120px;
    左: 15px;
  }
  48%
    不透明度: 1;
  }
  49%
    不透明度: 0;
  }
  100%{
    不透明度: 0;
    下: 120px;
    左: 15px;
  }
}

@keyframes ヘイズ{
  0%{
    不透明度: 0;
  }
  48%
    高さ: 0px;
    不透明度: 0;
  }
  49%
    高さ: 45px;
    不透明度: 1;
  }
  57%
    不透明度:1;
    高さ: 45px;
  }
  58%
    不透明度: 0;
    高さ: 0px;
  }
}

@keyframes haze_stripe{
  0%{
    不透明度: 0;
  }
  48%
    不透明度: 0;
  }
  49%
    不透明度: 1;
  }
  56%
    不透明度:1;
  }
  57%
    不透明度: 0;
  }
}

@keyframes クラウド{
  0%{
    背景: #fff;
  }
  56%
    背景: #fff;
  }
  57%
    背景: #92a4b6;
  }
  100%{
    背景: #92a4b6;
  }
}

@keyframes 雷{
  0%{
    不透明度: 0;
    下: 100px;
    左: 65px;
  }
  62%
    不透明度: 0;
    下: 100px;
    左: 65px;
  }
  64%
    不透明度: 1;
    下: 50px;
    左: 60px;
  }
  65%
    不透明度: 1;
    下: 55px;
    左: 61px;
  }
  72%
    不透明度: 1;
    下: 55px;
    左: 61px;
  }
  73%
    不透明度: 0;
  }
  100%{
    不透明度: 0;
    下: 55px;
  }
}

@keyframes 雨{
  0%{
    不透明度: 0;
    下: 100px;
    左: 60px;
  }
  72%
    不透明度: 0;
    下: 100px;
    左: 60px;
  }
  73%
    不透明度: 1;
    下: 15px;
    左: 50px;
  }
  74%
    不透明度: 1;
    下: 25px;
    左: 52px;
  }
  80%
    不透明度: 1;
    下: 25px;
    左: 52px;
  }
  81%
    不透明度: 0;
    下: -15px;
    左: 6px;
  }
  100%{
    不透明度: 0;
    下: 20px;
  }
}

@keyframes rainii{
  0%{
    不透明度: 0;
    下: 100px;
    左: 30px;
  }
  72%
    不透明度: 0;
    下: 100px;
    左: 30px;
  }
  73%
    不透明度: 1;
    下: 15px;
    左: 20px;
  }
  74%
    不透明度: 1;
    下: 25px;
    左: 22px;
  }
  80%
    不透明度: 1;
    下: 25px;
    左: 22px;
  }
  81%
    不透明度: 0;
    下: -15px;
    左: -6px;
  }
  100%{
    不透明度: 0;
    下: 20px;
  }
}

@keyframes rainiii{
  0%{
    不透明度: 0;
    下: 100px;
    左: 0px;
  }
  72%
    不透明度: 0;
    下: 100px;
    左: 0px;
  }
  73%
    不透明度: 1;
    下: 15px;
    左: -10px;
  }
  74%
    不透明度: 1;
    下: 25px;
    左: -8px;
  }
  80%
    不透明度: 1;
    下: 25px;
    左: -8px;
  }
  81%
    不透明度: 0;
    下: -15px;
    左: -28px;
  }
  100%{
    不透明度: 0;
    下: 20px;
  }
}

@keyframes フェードイン{
  0%{
    不透明度: 0;
  }
  8%{
    不透明度: 1;
  }
  9%{
    不透明度: 1;
  }
  11%
    不透明度: 1;
  }
  12%
    不透明度: 0;
  }
  100%{
    不透明度: 0;
  }
}

上記は、CSS3 で実装された天気アイコンアニメーション効果の詳細です。CSS3 天気アイコンアニメーションの詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

<<:  vscodeで保存した後のHTML自動フォーマットの問題を解決する

>>:  Docker での WSL の構成と変更の問題について

推薦する

nginxコンテナ設定ファイルの独立した実装

コンテナを作成する [root@server1 ~]# docker run -it --name ...

Vue 構成リクエストの複数サーバーソリューションの詳細な説明

1. 解決策1.1 インターフェースコンテキストパスの説明2 つのバックエンド インターフェイス サ...

SQL 実践演習: オンライン モール データベースの製品カテゴリ データ操作

オンラインショッピングモールデータベース - 商品カテゴリデータ操作（I）プロジェクトの説明電子商取...

無効と読み取り専用で入力を読み取り専用に設定する

読み取り専用入力を実現するには、無効と読み取り専用の 2 つの方法があります。当然、どちらの結果も読...

Linux でのファイル コンテンツの重複排除と交差と差異の実装

1. データ重複排除日常業務では、Hive や Impala を使用してクエリとエクスポートを行う際...

JavaScriptはeコマースプラットフォームの製品詳細を実装します

この記事では、電子商取引プラットフォームで商品の詳細を表示する一般的な例を紹介します。たとえば、ある...

Vueのフロントエンドとバックエンドのポートの不一致の問題を解決する

Vue のフロントエンドとバックエンドのポートが一致していませんconfig index.jsファイ...

DIV+CSS命名規則の詳細な説明はSEO最適化に役立ちます

1. CSSファイルの命名規則提案: 文字、_、-、数字を使用します。文字で始まる必要があり、純粋な...

さまざまな種類の jQuery Web ページ検証コード プラグイン コード例

html <!DOCTYPE html> <html lang="ja&...

Linux環境でrmによって誤って削除されたファイルを回復する方法

目次序文RMの後には希望はあるのでしょうか？最前線を使ってファイルを取得するextundeleteを...

meta name="" content="の機能の詳細な説明

1. 文法: <meta name="名前" content="...

Vue3 の動的コンポーネントはどのように機能しますか?

目次1. コンポーネントの登録1.1 グローバル登録1.2 グローバルコンポーネントの登録プロセス1...

Linux NFSメカニズムの動作原理と例の分析

NFS とは何ですか?ネットワークファイルシステムネットワーク上でファイルを保存および整理するための...

Linux の sudo 脆弱性により不正な特権アクセスが発生する可能性がある

Linux で新たに発見された sudo の脆弱性を悪用すると、特定のユーザーが root としてコ...

Linux で PHP curl 拡張機能をインストールする方法の詳細な説明

この記事では、Linux で PHP curl 拡張機能をインストールする方法について説明します。ご...