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

推薦する

VMware Workstationはデバイス/資格情報ガードと互換性がありません

仮想マシンをインストールするときに、「VMware ワークステーションはデバイス/資格情報ガードと互...

CSSで検索ボックスを非表示にする機能を実装します（アニメーション順方向と逆方向のシーケンス）

上部のメニュー バーに検索ボックスを配置するのは一般的なシナリオですが、検索機能がそれほど頻繁に使用...

Centos 7 64 ビット デスクトップ バージョンのインストール グラフィック チュートリアル

システムが遅いと感じてソースを変更したい場合は、別の記事で整理しました https://blog.c...

ウェブサイトのコンテンツが検索エンジンに含まれないようにする方法

通常、Web サイトを構築する目的は、検索エンジンにインデックス登録してもらい、プロモーションを拡大...

nginxとIISで使用できるSSL証明書を作成する

目次SSL証明書の作成1. 秘密鍵を生成する2. 証明書要求ファイルを生成する3. CRT証明書ファ...

CSS3のbox-shadowプロパティの使い方の詳細な例

CSS には多くの属性があります。特に複数の値を設定する必要がある属性は、長期間使用しないと忘れられ...

CSS3 を使って本のページめくり効果を実現するサンプルコード

重要なポイント: 1. CSS3 3Dアニメーションをマスターする2. ページめくり後のページ内容の...

MySQL 作成ルーチン権限に関する注意事項

1. ユーザーにルーチン作成権限がある場合は、プロシージャ | 関数を作成できます。 2. ユーザー...

JSはclip-pathを使用して動的領域クリッピング機能を実装します

背景今日、CodePen を閲覧していたところ、非常に興味深い効果を見つけました。 CodePen ...

DIV 背景半透明テキスト非半透明スタイル

DIVの背景は半透明ですが、DIV内の文字は半透明ではありませんコードをコピーコードは次のとおりです...

JavaScript WebAPI、DOM、イベント、操作要素例の詳しい説明

目次ウェブAPI DOM DOMツリーDOM要素取得方法ドキュメントオブジェクトのプロパティイベント...

Centos6.6 で php7 + nginx 環境をインストールする方法

この記事では、centos6.6 で php7 + nginx 環境をインストールする方法について説...

Centos8 で Apache httpd2.4.37 を使用して Web サーバーをインストールする詳細な手順

ステップ 1: yum install httpd -y #httpd サービスをインストールします...

CSS3のfocus-withinセレクタの使用

擬似要素と擬似クラスところで、まずは疑似クラスセレクターと疑似要素セレクターについておさらいしておき...

優れたウェブサイトのコピーライティングと優れたユーザーエクスペリエンス

ウェブサイトを見るというのは、実は美しい女性を評価するようなものです。見た目を見るとき、私たちは見た...