css3實現的天氣型別圖示程式碼例項

admin發表於2017-02-21

原文網址 : https://www.softwhy.com/article-1549-1.html

經常看天氣預報的朋友應該都會注意到，不同的天氣型別，會使用不同的圖示表示。

非常的形象直觀，下面就分享一段程式碼例項，它利用css3實現了天氣型別圖示效果，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/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;
}
.sun {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.5em;
  height: 2.5em;
  margin: -1.25em;
  background: currentColor;
  border-radius: 50%;
  box-shadow: 0 0 0 0.375em #fff;
  animation: spin 12s infinite linear;
}
.rays {
  position: absolute;
  top: -2em;
  left: 50%;
  display: block;
  width: 0.375em;
  height: 1.125em;
  margin-left: -0.1875em;
  background: #fff;
  border-radius: 0.25em;
  box-shadow: 0 5.375em #fff;
}
.rays:before,.rays:after {
  content: '';
  position: absolute;
  top: 0em;
  left: 0em;
  display: block;
  width: 0.375em;
  height: 1.125em;
  transform: rotate(60deg);
  transform-origin: 50% 3.25em;
  background: #fff;
  border-radius: 0.25em;
  box-shadow: 0 5.375em #fff;
}
.rays:before {
  transform: rotate(120deg);
}
.cloud + .sun {
  margin: -2em 1em;
}
.rain,.lightning,.snow {
  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;
}
.bolt {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -0.25em 0 0 -0.125em;
  color: #fff;
  opacity: 0.3;
  animation: lightning 2s linear infinite;
}
.bolt:nth-child(2) {
  width: 0.5em;
  height: 0.25em;
  margin: -1.75em 0 0 -1.875em;
  transform: translate(2.5em, 2.25em);
  opacity: 0.2;
  animation: lightning 1.5s linear infinite;
}
.bolt:before,.bolt:after {
  content: '';
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  margin: -1.625em 0 0 -1.0125em;
  border-top: 1.25em solid transparent;
  border-right: 0.75em solid;
  border-bottom: 0.75em solid;
  border-left: 0.5em solid transparent;
  transform: skewX(-10deg);
}
.bolt:after {
  margin: -0.25em 0 0 -0.25em;
  border-top: 0.75em solid;
  border-right: 0.5em solid transparent;
  border-bottom: 1.25em solid transparent;
  border-left: 0.75em solid;
  transform: skewX(-10deg);
}
.bolt:nth-child(2):before {
  margin: -0.75em 0 0 -0.5em;
  border-top: 0.625em solid transparent;
  border-right: 0.375em solid;
  border-bottom: 0.375em solid;
  border-left: 0.25em solid transparent;
}
.bolt:nth-child(2):after {
  margin: -0.125em 0 0 -0.125em;
  border-top: 0.375em solid;
  border-right: 0.25em solid transparent;
  border-bottom: 0.625em solid transparent;
  border-left: 0.375em solid;
}
.flake:before,.flake:after {
  content: '\2744';
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -1.025em 0 0 -1.0125em;
  color: #fff;
  opacity: 0.2;
  animation: spin 8s linear infinite reverse;
}
.flake:after {
  margin: 0.125em 0 0 -1em;
  font-size: 1.5em;
  opacity: 0.4;
  animation: spin 14s linear infinite;
}
.flake:nth-child(2):before {
  margin: -0.5em 0 0 0.25em;
  font-size: 1.25em;
  opacity: 0.2;
  animation: spin 10s linear infinite;
}
.flake:nth-child(2):after {
  margin: 0.375em 0 0 0.125em;
  font-size: 2em;
  opacity: 0.4;
  animation: spin 16s linear infinite reverse;
}
/* Animations */
@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes cloud {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 0;
    transform: scale(0.5) translate(-200%, -3em);
  }
}
@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;
  }
}
@keyframes lightning {
  45% {
    color: #fff;
    background: #fff;
    opacity: 0.2;
  }
  50% {
    color: #0cf;
    background: #0cf;
    opacity: 1;
  }
  55% {
    color: #fff;
    background: #fff;
    opacity: 0.2;
  }
}
</style>
</head>
<body>
  <div class="icon sun-shower">
    <div class="cloud"></div>
    <div class="sun">
      <div class="rays"></div>
    </div>
    <div class="rain"></div>
  </div>
  <div class="icon thunder-storm">
    <div class="cloud"></div>
    <div class="lightning">
      <div class="bolt"></div>
      <div class="bolt"></div>
    </div>
  </div>
  <div class="icon cloudy">
    <div class="cloud"></div>
    <div class="cloud"></div>
  </div>
  <div class="icon flurries">
    <div class="cloud"></div>
    <div class="snow">
      <div class="flake"></div>
      <div class="flake"></div>
    </div>
  </div>
  <div class="icon sunny">
    <div class="sun">
      <div class="rays"></div>
    </div>
  </div>
  <div class="icon rainy">
    <div class="cloud"></div>
    <div class="rain"></div>
  </div>
</body>
</html>

CSS3圖層陰影程式碼例項
2018-07-16
CSSS3
CSS3卡通形象程式碼例項
2018-05-22
CSSS3
css3水滴效果程式碼例項
2018-06-04
CSSS3
CSS3繪製太極圖程式碼例項詳解
2018-09-07
CSSS3
css3晃動效果程式碼例項
2018-07-09
CSSS3
CSS3心形效果程式碼例項
2018-07-09
CSSS3
CSS3發光背景程式碼例項
2018-05-22
CSSS3
CSS3旋轉效果程式碼例項
2018-05-21
CSSS3
CSS3紙飛機程式碼例項
2018-06-02
CSSS3
Python物件導向多型實現原理及程式碼例項
2024-03-31
Python物件多型
canvas氣泡上浮效果程式碼例項
2018-03-19
Canvas
CSS3滑過光束效果程式碼例項
2018-07-12
CSSS3
CSS3小黃人效果程式碼例項
2018-07-08
CSSS3
css3折角效果程式碼例項
2018-05-28
CSSS3
CSS3梯形效果程式碼例項
2018-05-28
CSSS3
CSS3背景漸變效果程式碼例項
2018-05-22
CSSS3
CSS3星系運動效果程式碼例項
2018-07-03
CSSS3
Python實現簡單網頁圖片抓取完整程式碼例項
2020-05-27
Python網頁
vue例項+axios-天氣查詢
2020-11-09
VueiOS
CSS3文字凹凸效果程式碼例項
2018-05-23
CSSS3
html實現簡單ListViews效果的例項程式碼
2020-05-20
HTMLView
CSS3 translate導致字型模糊的例項程式碼
2019-10-16
CSSS3
vuejs實現新增tag標籤程式碼例項
2020-11-12
VueJS
例項程式碼分享Python實現Linux監控
2021-07-18
PythonLinux
CSS3文字陰影效果程式碼例項
2018-07-16
CSSS3
CSS3立體導航選單程式碼例項
2018-05-23
CSSS3
Java中建立泛型型別的例項
2024-06-12
Java泛型型別
原始碼 | 靜態工廠返回宣告的返回型別的子型別的例項
2019-02-18
原始碼型別
MyCat分片：水平拆分例項解析和程式碼實現！
2021-03-22
CSS3 Flex 彈性佈局例項程式碼詳解
2018-12-18
CSSS3Flex
正則實現個位數補零程式碼例項
2018-05-22
python 單一程式例項實現
2020-10-01
Python
jQuery控制div顯示和隱藏程式碼例項
2018-06-20
jQuery
例項操作mysql varchar型別求和
2021-06-15
MySql型別
在例項中呼叫 Invoke 型別的類
2019-12-18
型別
PHP弱型別引發的漏洞例項
2021-09-09
PHP型別
Java 介面實現多型 -- 膝上型電腦綜合例項
2020-07-12
Java多型
dom操作程式碼例項
2018-05-25
css梯形程式碼例項
2018-05-20
CSS

css3實現的天氣型別圖示程式碼例項

相關文章