用純CSS製作有動畫的天氣圖示方法教學-css教學-PHP中文網

用純CSS製作有動畫的天氣圖示方法教學

小云云

發布： 2017-12-14 13:15:20

原創

1961 人瀏覽過

靜態的天氣圖標看久了顯得呆板，那麼下面就分享一個很有才創意的用CSS實現天氣帶動畫的天氣圖標，代碼都分享出來，以這個例子作為參考希望你能得到啟發。 enjoy!本文我們主要和大家分享用純CSS製作帶動畫的天氣圖標方法教程，希望能幫助大家。

　　下面我們來做一個會下雨的天氣圖示實例，過程其實很簡單喔。

　　STEP1: 整体HTML架构
　　STEP2: 用CSS绘制云朵图标
　　CSS代码如下
　　body {
　　max-width: 42em;
　　padding: 2em;
　　margin: 0 auto;
　　color: #161616;
　　font-family: &#39;Roboto&#39;, 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: &#39;&#39;
　　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: &#39;&#39;
　　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;
　　}
　　}

登入後複製