純粋な CSS_html/css_WEB-ITnose でアニメーションの天気アイコンを実装します。

2016 年 1 月 20 日 投稿: HTML & CSS . コメント

スポンサーリンク

CSS3 アニメーションのプロパティはそれほど多くありませんが、実際に重要なのは、 do it 単純なホバー状態から複雑で小さなアニメーションまで、CSS3 アニメーション プロパティを巧みに使用して実現できます。

今日は主に、よりクリエイティブで実用的な CSS 天気アイコン アニメーションを紹介します。アニメーションを追加すると、非常にリアルで鮮やかに見えます。良い参考事例です。

雨の天気アイコンの例を作成してみましょう。プロセスは実際には非常に簡単です。

STEP1: HTML 全体の構造

<div class="icon rainy"><div class="cloud"></div><div class="rain"></div></div>

STEP2: CSS を使用して雲のアイコンを描画します

CSS コードは次のとおりです

body {max-width: 42em;padding: 2em;margin: 0 auto;color: #161616;font-family: 'Roboto', sans-serif;text-align: center;background-color: currentColor;}.icon {position: relative;display: inline-block;width: 12em;height: 10em;font-size: 1em; /* control icon size here */}.cloud {position: absolute;z-index: 1;top: 50%;left: 50%;width: 3.6875em;height: 3.6875em;margin: -1.84375em;background: currentColor;border-radius: 50%;box-shadow:-2.1875em 0.6875em 0 -0.6875em,2.0625em 0.9375em 0 -0.9375em,0 0 0 0.375em #fff,-2.1875em 0.6875em 0 -0.3125em #fff,2.0625em 0.9375em 0 -0.5625em #fff;}.cloud:after {content: '';position: absolute;bottom: 0;left: -0.5em;display: block;width: 4.5625em;height: 1em;background: currentColor;box-shadow: 0 0.4375em 0 -0.0625em #fff;}.cloud:nth-child(2) {z-index: 0;background: #fff;box-shadow:-2.1875em 0.6875em 0 -0.6875em #fff,2.0625em 0.9375em 0 -0.9375em #fff,0 0 0 0.375em #fff,-2.1875em 0.6875em 0 -0.3125em #fff,2.0625em 0.9375em 0 -0.5625em #fff;opacity: 0.3;transform: scale(0.5) translate(6em, -3em);animation: cloud 4s linear infinite;}.cloud:nth-child(2):after { background: #fff; }.rain{position: absolute;z-index: 2;top: 50%;left: 50%;width: 3.75em;height: 3.75em;margin: 0.375em 0 0 -2em;background: currentColor;}.rain:after {content: '';position: absolute;z-index: 2;top: 50%;left: 50%;width: 1.125em;height: 1.125em;margin: -1em 0 0 -0.25em;background: #0cf;border-radius: 100% 0 60% 50% / 60% 0 100% 50%;box-shadow:0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2),-0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2),-1.375em -0.125em 0 rgba(255,255,255,0.2);transform: rotate(-28deg);animation: rain 3s linear infinite; /*设置动画 rain */}

STEP3: 雨のアニメーション

/* 下雨动画 Animations */ @keyframes rain {0% {background: #0cf;box-shadow:0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2),-0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2),-1.375em -0.125em 0 #0cf;}25% {box-shadow:0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2),-0.875em 1.125em 0 -0.125em #0cf,-1.375em -0.125em 0 rgba(255,255,255,0.2);}50% {background: rgba(255,255,255,0.3);box-shadow:0.625em 0.875em 0 -0.125em #0cf,-0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2),-1.375em -0.125em 0 rgba(255,255,255,0.2);}100% {box-shadow:0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2),-0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2),-1.375em -0.125em 0 #0cf;}}

ベストエフェクト: