純粋な CSS を使用してアニメーション天気アイコンを作成する方法のチュートリアル

静的な天気アイコンは、長い間見ていると退屈に見えるので、CSSを使用して天気バンドをアニメーション化する非常に創造的で創造的な天気アイコンを共有します。このコードを使用してインスピレーションを得ていただければ幸いです。この例を参考にしてください。この記事では、主に純粋な CSS を使用してアニメーション天気アイコンを作成する方法について説明します。

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

　　STEP1: 整体HTML架构
　　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;
　　}
　　}

関連する推奨事項:

CSSアニメーションのテクニックと詳細

CSSアニメーションのプロパティの詳細な説明

CSSアニメーションとJavaScriptアニメーションの比較

以上が純粋な CSS を使用してアニメーション天気アイコンを作成する方法のチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。