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 の構成と変更の問題について

推薦する

Linux LVM 論理ボリューム構成プロセス (作成、増加、削減、削除、アンインストール) の詳細な説明

Linux LVM論理ボリューム構成プロセスの詳細な説明多くの Linux ユーザーは、オペレーティ...

Vue.js を学ぶ際に遭遇する落とし穴

目次クラス void のポイントES6 矢印関数ヴュートファイvue-cli非同期と同期実行と展開ヒ...

JavaScriptでシンプルなスクロールウィンドウを実装する

この記事では、スクロールウィンドウを実装するためのJavaScriptの具体的なコードを参考までに紹...

CocosCreator 一般的なフレームワーク設計リソース管理

目次Cocos Creator のリソース管理に関する問題リソースの依存関係リソースの使用レスローダ...

vue-amap のインストールと使用手順

以前、Amap API を非同期にロードする方法を紹介しました。今回は、vue-amap の使用方法...

MySQLのMERGEストレージエンジンの詳細な説明

MERGE ストレージ エンジンは、MyISAM テーブルのグループを論理ユニットとして扱い、同時に...

HTML フォーム送信アクションと URL ジャンプアクションの違い

フォームのアクションは URL ジャンプとは異なります。フォームはバックグラウンドにデータを渡すこと...

MySQLパーティションテーブルは月別に分類されています

目次テーブルを作成するデータベース ファイルを表示します。入れるクエリ消去補足:Mysqlは月テーブ...

jQueryブリージングカルーセルの制作原理を詳しく解説

この記事では、jQueryブリージングカルーセル制作原理の具体的なプロセスを参考までに紹介します。具...

Nginxサービス500：内部サーバーエラーの原因の1つ

500 (内部サーバー エラー) サーバーでエラーが発生したため、要求を完了できませんでした。 50...

ホストNginx + Docker WordPress Mysqlを設定するための詳細な手順

環境Linux 3.10.0-693.el7.x86_64 Docker バージョン 18.09.0...

CSS 要素の非表示の原則と display:none および visibility:hidden

1. CSS 要素の非表示<br />CSS では、要素を非表示にする (つまり、画面の...

HTML の表のフレームとルール属性の詳細な説明

テーブル タグの frame 属性と rules 属性は境界線の表示を制御できます。フレーム プロパ...

Linux で scp コマンドを使用してファイルをリモートでコピーする方法の詳細な説明

序文scp は secure copy の略です。scp は、Linux システムの ssh ログイ...

MySQL ジョイントテーブルクエリの簡単な例

MySql は結合テーブルクエリを使用しますが、初心者には理解しにくい場合があります。以下の記事では...