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

推薦する

MySQL にテーブルが存在するかどうかを確認し、それを一括で削除する方法

1. インターネットで長時間検索しましたが、判定表が存在するかどうかがわからなかったので、漠然と削除...

MySQL トランザクション分離はどのように実現されますか?

目次同時シナリオ書き込む読む読む読み取り-書き込みと書き込み-読み取りMySQL のロック行レベルロ...

CSS を使用して半透明の背景と不透明なテキストを実現する例

この記事では、CSS を使用して半透明の背景と不透明なテキストの効果を実現する方法の例を紹介します。...

Dockerコンテナ間の通信を実装する方法

シナリオ: laradock 開発環境 (php7.3+mysql5.7) がローカルに構築されてい...

ウェブデザインの概要

<br />1998年に最初の個人ページが誕生してから2008年の今日まで、デザイン業界...

スライダー検証コードを実装するJavaScript

この記事では、スライダー検証コードを実装するためのJavaScriptの具体的なコードを参考までに共...

MySQL で左結合を使用して where 条件を追加する問題の詳細な分析

現在の需要:グループとファクターの 2 つのテーブルがあります。1 つのグループは複数のファクターに...

JavaScript 手ぶれ補正のケーススタディ

原理手ぶれ補正の原理は、イベントをトリガーすることはできますが、イベントがトリガーされてから n 秒...

最も完全なpackage.json分析

目次1. 概要2. 名前フィールド3. バージョンフィールド4. 説明フィールド5. キーワードフィ...

JavaScript のフラット配列をツリー構造に変換する例

目次バックグラウンドで10,000個のデータが失われた再帰法非再帰的方法要約するバックグラウンドで1...

MySQL 文字列分割操作 (区切り文字を含む文字列のインターセプション)

区切り文字なしの文字列抽出質問の要件データベース内のフィールド値:実装効果: 1行のデータを複数行に...

モバイルレイアウト用の動的REMの実装

ダイナミックレム1. まず、現在の長さの単位を紹介しましょうpx em Mの幅 / 漢字の幅 1em...

MySQL シリーズ 3 基礎

目次チュートリアルシリーズ1. MySQL の紹介2. MySQLの開発履歴3. MariaDBの基...

MySQL SQL文を最適化するためのヒント

十分に最適化されていない、またはパフォーマンスが極端に低い SQL ステートメントに直面した場合、通...

Windows 10 で MySQL の解凍バージョンをインストールする方法の詳細なグラフィック チュートリアル

MySQL のインストールは、インストール バージョンと解凍バージョンに分かれています。インストール...