天气图标（Weather Icon Showcase）

  • 示例
  • HTML
  • CSS

更多有趣示例 尽在 知屋安砖社区

示例

HTML

.containerheaderh1 Pure CSS Weather Icons.showcasea#sunny.canvas(href="https://codepen.io/aexcode/pen/MWbPrdZ",target="_blank").sun- let totalBeamsOne = 0;while totalBeamsOne < 8.beam - totalBeamsOne++;a#partially-cloudy.canvas(href="https://codepen.io/aexcode/pen/mdOzxZb",target="_blank").sun- let totalBeamsTwo = 0;while totalBeamsTwo < 8.beam - totalBeamsTwo++;.clouda#rain.canvas(href="https://codepen.io/aexcode/pen/wvoYXVZ", target="_blank").sun- let totalBeamsThree = 0;while totalBeamsThree < 8.beam - totalBeamsThree++;.cloud.cloud-copy.rain- let totalDropsOne = 0;while totalDropsOne < 10.drop- totalDropsOne++;a#thunderstorm.canvas(href="https://codepen.io/aexcode/pen/vYyQNWQ",target="_blank").cloud.cloud-copy.rain- let totalDropsThree = 0;while totalDropsThree < 10.drop- totalDropsThree++;.lightninga#snow.canvas(href="https://codepen.io/aexcode/pen/vYyQxXo", target="_blank").cloud.cloud-copy.snow- let totalFlakes = 0;while totalFlakes < 10.flake- let totalFlakeParts = 0;while totalFlakeParts < 6.flake-part- totalFlakeParts++;- totalFlakes++;a#rainy.canvas(href="https://codepen.io/aexcode/pen/oNYQxGY",target="_blank").clouds- let totalCloudsOne = 0;while totalCloudsOne < 2.cloud.cloud-copy.rain- let totalDropsTwo = 0;while totalDropsTwo < 10.drop- totalDropsTwo++;- totalCloudsOne++;a#broken-clouds.canvas(href="https://codepen.io/aexcode/pen/ZEBqRpd",target="_blank").clouds.cloud.cloud.clouda#scattered-clouds.canvas(href="https://codepen.io/aexcode/pen/bGBmMdB",target="_blank").clouds.cloud.cloud.clouda#mist.canvas(href="https://codepen.io/aexcode/pen/BaQGWRz", target="_blank").mist- let totalMistLines = 0;while totalMistLines < 5.mist-line- totalMistLines++;

CSS

// color palette: https://coolors.co/212f45-fdac49-fcd422-fffafa
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap");$background: #212f45;
$orange: #fdac49;
$yellow: #fcd422;
$white: #fffafa;
$gray: #a3a3a3;$triangleUp: polygon(50% 0%, 0% 100%, 100% 100%);
$triangleDown: polygon(50% 100%, 0 0, 100% 0);@mixin copy {position: absolute;width: 100%;height: 100%;top: 0;left: 0;background: inherit;border-radius: inherit;
}*,
*:before,
*:after {margin: 0;padding: 0;box-sizing: border-box;
}body,
html {width: 100%;min-height: 100vh;background: $background;
}.container {width: 100%;max-width: 800px;min-height: 100vh;margin: 5% auto;display: flex;flex-direction: column;@mixin sharedText {color: $white;font-family: "Roboto", sans-serif;text-align: center;padding-left: 2rem;padding-right: 2rem;margin: 1rem auto;}h1 {@include sharedText;text-transform: capitalize;letter-spacing: 0.02rem;}p {@include sharedText;letter-spacing: 0.05rem;}a {color: $orange;}.showcase {flex-grow: 1;margin: 1rem auto;padding: 10px;display: grid;grid-gap: 10px;grid-template-columns: repeat(auto-fill, 150px);grid-auto-rows: 150px;@media all and (min-width: 200px) {max-width: 200px;grid-gap: 10px;}@media all and (min-width: 400px) {max-width: 400px;grid-gap: 10px;}@media all and (min-width: 600px) {max-width: 600px;grid-gap: 12px;}.canvas {position: relative;}}@media all and (max-width: 200px) {.container {display: none;}}
}#sunny {.sun {position: absolute;width: 50%;height: 50%;top: 25%;left: 25%;background: radial-gradient($orange, $yellow);border-radius: 50%;animation: spinSun 20s linear infinite;&:after {content: "";position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;background: inherit;border-radius: 50%;}@mixin sharedBeam {position: absolute;width: 15%;height: 140%;top: -20%;left: 42.5%;outline: 1px solid $background;&:before {content: "";position: absolute;width: 100%;height: 13%;clip-path: $triangleUp;}&:after {content: "";position: absolute;bottom: 0;width: 100%;height: 13%;clip-path: $triangleDown;}}.beam:nth-child(even) {&:before {background: $orange;}&:after {background: $orange;}}.beam:nth-child(odd) {&:before {background: $yellow;}&:after {background: $yellow;}}.beam:nth-of-type(1) {@include sharedBeam;}.beam:nth-of-type(2) {@include sharedBeam;transform: rotate(22.5deg);}.beam:nth-of-type(3) {@include sharedBeam;transform: rotate(45deg);}.beam:nth-of-type(4) {@include sharedBeam;transform: rotate(67.5deg);}.beam:nth-of-type(5) {@include sharedBeam;transform: rotate(90deg);}.beam:nth-of-type(6) {@include sharedBeam;transform: rotate(112.5deg);}.beam:nth-of-type(7) {@include sharedBeam;transform: rotate(135deg);}.beam:nth-of-type(8) {@include sharedBeam;transform: rotate(157.5deg);}@keyframes spinSun {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}}
}#partially-cloudy {.sun {position: absolute;width: 42%;height: 42%;top: 10%;right: 15%;background: radial-gradient($orange, $yellow);border-radius: 50%;animation: spinSun 20s linear infinite;&:after {content: "";position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;background: inherit;border-radius: 50%;}@mixin sharedBeam {position: absolute;width: 15%;height: 140%;top: -20%;left: 42.5%;&:before {content: "";position: absolute;width: 100%;height: 13%;clip-path: polygon(50% 0%, 0% 100%, 100% 100%);}&:after {content: "";position: absolute;bottom: 0;width: 100%;height: 13%;clip-path: polygon(50% 100%, 0 0, 100% 0);}}.beam:nth-child(even) {&:before {background: $orange;}&:after {background: $orange;}}.beam:nth-child(odd) {&:before {background: $yellow;}&:after {background: $yellow;}}.beam:nth-of-type(1) {@include sharedBeam;}.beam:nth-of-type(2) {@include sharedBeam;transform: rotate(22.5deg);}.beam:nth-of-type(3) {@include sharedBeam;transform: rotate(45deg);}.beam:nth-of-type(4) {@include sharedBeam;transform: rotate(67.5deg);}.beam:nth-of-type(5) {@include sharedBeam;transform: rotate(90deg);}.beam:nth-of-type(6) {@include sharedBeam;transform: rotate(112.5deg);}.beam:nth-of-type(7) {@include sharedBeam;transform: rotate(135deg);}.beam:nth-of-type(8) {@include sharedBeam;transform: rotate(157.5deg);}@keyframes spinSun {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}}.cloud {position: absolute;width: 40%;height: 40%;top: 27.5%;left: 25%;background: $white;border-radius: 44% 56% 49% 51% / 71% 63% 37% 29%;@mixin sharedCloudSides {content: "";position: absolute;width: 85%;height: 85%;top: 10%;left: -50%;right: -50%;background: inherit;}&:before {@include sharedCloudSides;right: unset;border-radius: 52% 48% 58% 42% / 43% 61% 39% 57%;}&:after {@include sharedCloudSides;left: unset;border-radius: 52% 48% 49% 51% / 43% 61% 39% 57%;}}
}#rain {.sun {position: absolute;width: 42%;height: 42%;top: 10%;right: 15%;background: radial-gradient($orange, $yellow);border-radius: 50%;animation: spinSun 20s linear infinite;&:after {content: "";position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;background: inherit;border-radius: 50%;}@mixin sharedBeam {position: absolute;width: 15%;height: 140%;top: -20%;left: 42.5%;&:before {content: "";position: absolute;width: 100%;height: 13%;clip-path: polygon(50% 0%, 0% 100%, 100% 100%);}&:after {content: "";position: absolute;bottom: 0;width: 100%;height: 13%;clip-path: polygon(50% 100%, 0 0, 100% 0);}}.beam:nth-child(even) {&:before {background: $orange;}&:after {background: $orange;}}.beam:nth-child(odd) {&:before {background: $yellow;}&:after {background: $yellow;}}.beam:nth-of-type(1) {@include sharedBeam;}.beam:nth-of-type(2) {@include sharedBeam;transform: rotate(22.5deg);}.beam:nth-of-type(3) {@include sharedBeam;transform: rotate(45deg);}.beam:nth-of-type(4) {@include sharedBeam;transform: rotate(67.5deg);}.beam:nth-of-type(5) {@include sharedBeam;transform: rotate(90deg);}.beam:nth-of-type(6) {@include sharedBeam;transform: rotate(112.5deg);}.beam:nth-of-type(7) {@include sharedBeam;transform: rotate(135deg);}.beam:nth-of-type(8) {@include sharedBeam;transform: rotate(157.5deg);}@keyframes spinSun {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}}.cloud {position: absolute;width: 40%;height: 40%;top: 27.5%;left: 25%;background: $white;border-radius: 44% 56% 49% 51% / 71% 63% 37% 29%;@mixin sharedCloudSides {content: "";position: absolute;width: 85%;height: 85%;top: 10%;left: -50%;right: -50%;background: inherit;}$cloudLeftBorderRadius: 52% 48% 58% 42% / 43% 61% 39% 57%;$cloudRightBorderRadius: 52% 48% 49% 51% / 43% 61% 39% 57%;&:before {@include sharedCloudSides;right: unset;border-radius: $cloudLeftBorderRadius;}&:after {@include sharedCloudSides;left: unset;border-radius: $cloudRightBorderRadius;}.cloud-copy {z-index: 2;@include copy;&:before {@include sharedCloudSides;right: unset;border-radius: $cloudLeftBorderRadius;}&:after {@include sharedCloudSides;left: unset;border-radius: $cloudRightBorderRadius;}}.rain {position: absolute;width: 140%;height: 100%;left: -20%;top: 80%;z-index: 1;overflow: hidden;@mixin sharedDrop {position: absolute;width: 3%;height: 20%;top: -20%;background: $white;border-radius: 1rem;transform: rotate(22deg);}$firstRain: rainDropFall 4s linear infinite;$secondRain: rainDropFall 4s 1s linear infinite;$thirdRain: rainDropFall 4s 2s linear infinite;$fourthRain: rainDropFall 4s 3s linear infinite;.drop:nth-of-type(1) {@include sharedDrop;animation: $secondRain;left: 10%;}.drop:nth-of-type(2) {@include sharedDrop;animation: $firstRain;left: 28.5%;}.drop:nth-of-type(3) {@include sharedDrop;animation: $secondRain;left: 47%;}.drop:nth-of-type(4) {@include sharedDrop;animation: $firstRain;right: 28.5%;}.drop:nth-of-type(5) {@include sharedDrop;animation: $secondRain;right: 10%;}.drop:nth-of-type(6) {@include sharedDrop;animation: $thirdRain;left: 28.5%;}.drop:nth-of-type(7) {@include sharedDrop;animation: $thirdRain;right: 28.5%;}.drop:nth-of-type(8) {@include sharedDrop;animation: $fourthRain;left: 10%;}.drop:nth-of-type(9) {@include sharedDrop;animation: $fourthRain;left: 47%;}.drop:nth-of-type(10) {@include sharedDrop;animation: $fourthRain;right: 10%;}@keyframes rainDropFall {15% {opacity: 1;}75% {opacity: 0;}100% {top: 120%;opacity: 0;}}}}
}#thunderstorm {.cloud {$cloudBorderRadiusLeft: 52% 48% 58% 42% / 43% 61% 39% 57%;$cloudBorderRadiusMiddle: 44% 56% 49% 51% / 71% 63% 37% 29%;$cloudBorderRadiusRight: 52% 48% 49% 51% / 43% 61% 39% 57%;$cloudColorChange1: cloudColorChange 3s linear infinite;@keyframes cloudColorChange {0%,100% {background: $white;}50% {background: $gray;}}position: absolute;width: 40%;height: 40%;top: 27.5%;left: 30%;background: $white;border-radius: $cloudBorderRadiusMiddle;animation: $cloudColorChange1;@mixin sharedCloudSides {content: "";position: absolute;width: 85%;height: 85%;top: 10%;left: -50%;right: -50%;background: inherit;}&:before {@include sharedCloudSides;right: unset;border-radius: $cloudBorderRadiusLeft;}&:after {@include sharedCloudSides;left: unset;border-radius: $cloudBorderRadiusRight;}.cloud-copy {z-index: 2;@include copy;&:before {@include sharedCloudSides;right: unset;border-radius: $cloudBorderRadiusLeft;}&:after {@include sharedCloudSides;left: unset;border-radius: $cloudBorderRadiusRight;}}.rain {position: absolute;width: 140%;height: 100%;left: -20%;top: 80%;z-index: 1;overflow: hidden;@mixin sharedDrop {position: absolute;width: 3%;height: 20%;top: -20%;background: $white;border-radius: 1rem;transform: rotate(22deg);}$firstRain: rainDropFall 4s linear infinite;$secondRain: rainDropFall 4s 1s linear infinite;$thirdRain: rainDropFall 4s 2s linear infinite;$fourthRain: rainDropFall 4s 3s linear infinite;@keyframes rainDropFall {15% {opacity: 1;}75% {opacity: 0;}100% {top: 120%;opacity: 0;}}.drop:nth-of-type(1) {@include sharedDrop;animation: $secondRain;left: 10%;}.drop:nth-of-type(2) {@include sharedDrop;animation: $firstRain;left: 28.5%;}.drop:nth-of-type(3) {@include sharedDrop;animation: $secondRain;left: 47%;}.drop:nth-of-type(4) {@include sharedDrop;animation: $firstRain;right: 28.5%;}.drop:nth-of-type(5) {@include sharedDrop;animation: $secondRain;right: 10%;}.drop:nth-of-type(6) {@include sharedDrop;animation: $thirdRain;left: 28.5%;}.drop:nth-of-type(7) {@include sharedDrop;animation: $thirdRain;right: 28.5%;}.drop:nth-of-type(8) {@include sharedDrop;animation: $fourthRain;left: 10%;}.drop:nth-of-type(9) {@include sharedDrop;animation: $fourthRain;left: 47%;}.drop:nth-of-type(10) {@include sharedDrop;animation: $fourthRain;right: 10%;}.lightning {$lightningFlash: lightningFlash 2s linear infinite;@keyframes lightningFlash {0%,39% {opacity: 0;}40%,60% {opacity: 1;}61%,100% {opacity: 0;}}position: absolute;width: 100%;height: 100%;top: 0;left: 0;animation: $lightningFlash;@mixin sharedBolt {content: "";position: absolute;width: 10%;height: 50%;left: 47%;top: 5%;right: 47%;bottom: 5%;transform: rotate(20deg);background: $yellow;}&:before {@include sharedBolt;bottom: unset;right: unset;clip-path: $triangleUp;}&:after {@include sharedBolt;top: unset;left: unset;clip-path: $triangleDown;}}}}
}#snow {.cloud {$cloudBorderRadiusLeft: 52% 48% 58% 42% / 43% 61% 39% 57%;$cloudBorderRadiusMiddle: 44% 56% 49% 51% / 71% 63% 37% 29%;$cloudBorderRadiusRight: 52% 48% 49% 51% / 43% 61% 39% 57%;$cloudColorChange1: cloudColorChange 3s linear infinite;@keyframes cloudColorChange {0%,100% {background: $white;}50% {background: $gray;}}position: absolute;width: 40%;height: 40%;top: 27.5%;left: 30%;background: $white;border-radius: $cloudBorderRadiusMiddle;animation: $cloudColorChange1;@mixin sharedCloudSides {content: "";position: absolute;width: 85%;height: 85%;top: 10%;left: -50%;right: -50%;background: inherit;}&:before {@include sharedCloudSides;right: unset;border-radius: $cloudBorderRadiusLeft;}&:after {@include sharedCloudSides;left: unset;border-radius: $cloudBorderRadiusRight;}.cloud-copy {z-index: 2;@include copy;&:before {@include sharedCloudSides;right: unset;border-radius: $cloudBorderRadiusLeft;}&:after {@include sharedCloudSides;left: unset;border-radius: $cloudBorderRadiusRight;}}.snow {position: absolute;width: 140%;height: 100%;left: -20%;top: 80%;z-index: 1;overflow: hidden;.flake {position: absolute;width: 15%;height: 20%;top: -20%;}$firstSnow: snowFlakeFall 4s linear infinite;$secondSnow: snowFlakeFall 4s 1s linear infinite;$thirdSnow: snowFlakeFall 4s 2s linear infinite;$fourthSnow: snowFlakeFall 4s 3s linear infinite;@keyframes snowFlakeFall {15% {opacity: 1;}75% {opacity: 0;}100% {top: 120%;opacity: 0;}}@mixin sharedFlakePart {position: absolute;width: 8%;height: 100%;top: 0;left: 46%;background: $white;border-radius: 10rem;&:before {content: "";position: absolute;width: 100%;height: 28%;left: -100%;top: 0;background: inherit;border-radius: inherit;transform: rotate(-30deg);}&:after {content: "";position: absolute;width: 100%;height: 28%;right: -100%;top: 0;background: inherit;border-radius: inherit;transform: rotate(30deg);}}.flake-part:nth-of-type(1) {@include sharedFlakePart;}.flake-part:nth-of-type(2) {@include sharedFlakePart;transform: rotate(60deg);}.flake-part:nth-of-type(3) {@include sharedFlakePart;transform: rotate(120deg);}.flake-part:nth-of-type(4) {@include sharedFlakePart;transform: rotate(180deg);}.flake-part:nth-of-type(5) {@include sharedFlakePart;transform: rotate(240deg);}.flake-part:nth-of-type(6) {@include sharedFlakePart;transform: rotate(300deg);}.flake:nth-of-type(1) {animation: $secondSnow;left: 10%;}.flake:nth-of-type(2) {animation: $firstSnow;left: 28.5%;}.flake:nth-of-type(3) {animation: $secondSnow;left: 47%;}.flake:nth-of-type(4) {animation: $firstSnow;right: 28.5%;}.flake:nth-of-type(5) {animation: $secondSnow;right: 10%;}.flake:nth-of-type(6) {animation: $thirdSnow;left: 28.5%;}.flake:nth-of-type(7) {animation: $thirdSnow;right: 28.5%;}.flake:nth-of-type(8) {animation: $fourthSnow;left: 10%;}.flake:nth-of-type(9) {animation: $fourthSnow;left: 47%;}.flake:nth-of-type(10) {animation: $fourthSnow;right: 10%;}}}
}#rainy {.clouds {$cloudBorderRadiusLeft: 52% 48% 58% 42% / 43% 61% 39% 57%;$cloudBorderRadiusMiddle: 44% 56% 49% 51% / 71% 63% 37% 29%;$cloudBorderRadiusRight: 52% 48% 49% 51% / 43% 61% 39% 57%;$cloudColorChange1: cloudColorChange 3s linear infinite;$cloudColorChange2: cloudColorChange 3s 1s linear infinite;@keyframes cloudColorChange {0%,100% {background: $white;}50% {background: $gray;}}position: absolute;width: 100%;height: 100%;top: 0;left: 0;.cloud {position: absolute;background: $white;border-radius: $cloudBorderRadiusMiddle;@mixin sharedCloudSides {content: "";position: absolute;width: 85%;height: 85%;top: 10%;left: -50%;right: -50%;background: inherit;}&:before {@include sharedCloudSides;right: unset;border-radius: $cloudBorderRadiusLeft;}&:after {@include sharedCloudSides;left: unset;border-radius: $cloudBorderRadiusRight;}.cloud-copy {z-index: 2;@include copy;&:before {@include sharedCloudSides;right: unset;border-radius: $cloudBorderRadiusLeft;}&:after {@include sharedCloudSides;left: unset;border-radius: $cloudBorderRadiusRight;}}}.cloud:nth-of-type(1) {width: 20%;height: 20%;top: 10%;left: 20%;animation: $cloudColorChange1;}.cloud:nth-of-type(2) {width: 30%;height: 30%;top: 45%;right: 20%;animation: $cloudColorChange2;}.rain {position: absolute;width: 140%;height: 100%;left: -20%;top: 80%;z-index: 1;overflow: hidden;@mixin sharedDrop {position: absolute;width: 3%;height: 20%;top: -20%;background: $white;border-radius: 1rem;transform: rotate(22deg);}$firstRain: rainDropFall 4s linear infinite;$secondRain: rainDropFall 4s 1s linear infinite;$thirdRain: rainDropFall 4s 2s linear infinite;$fourthRain: rainDropFall 4s 3s linear infinite;.drop:nth-of-type(1) {@include sharedDrop;animation: $secondRain;left: 10%;}.drop:nth-of-type(2) {@include sharedDrop;animation: $firstRain;left: 28.5%;}.drop:nth-of-type(3) {@include sharedDrop;animation: $secondRain;left: 47%;}.drop:nth-of-type(4) {@include sharedDrop;animation: $firstRain;right: 28.5%;}.drop:nth-of-type(5) {@include sharedDrop;animation: $secondRain;right: 10%;}.drop:nth-of-type(6) {@include sharedDrop;animation: $thirdRain;left: 28.5%;}.drop:nth-of-type(7) {@include sharedDrop;animation: $thirdRain;right: 28.5%;}.drop:nth-of-type(8) {@include sharedDrop;animation: $fourthRain;left: 10%;}.drop:nth-of-type(9) {@include sharedDrop;animation: $fourthRain;left: 47%;}.drop:nth-of-type(10) {@include sharedDrop;animation: $fourthRain;right: 10%;}@keyframes rainDropFall {15% {opacity: 1;}75% {opacity: 0;}100% {top: 120%;opacity: 0;}}}}
}#scattered-clouds {.clouds {position: absolute;width: 100%;height: 100%;top: 0;left: 0;.cloud {position: absolute;background: $white;border-radius: 44% 56% 49% 51% / 71% 63% 37% 29%;@mixin sharedCloudSides {content: "";position: absolute;width: 85%;height: 85%;top: 10%;left: -50%;right: -50%;background: inherit;}&:before {@include sharedCloudSides;right: unset;border-radius: 52% 48% 58% 42% / 43% 61% 39% 57%;}&:after {@include sharedCloudSides;left: unset;border-radius: 52% 48% 49% 51% / 43% 61% 39% 57%;}}.cloud:nth-of-type(1) {width: 20%;height: 20%;top: 10%;left: 25%;}.cloud:nth-of-type(2) {width: 30%;height: 30%;top: 35%;right: 20%;}.cloud:nth-of-type(3) {width: 20%;height: 20%;top: 72%;left: 35%;}}
}#broken-clouds {.clouds {$cloudBorderRadiusLeft: 52% 48% 58% 42% / 43% 61% 39% 57%;$cloudBorderRadiusMiddle: 44% 56% 49% 51% / 71% 63% 37% 29%;$cloudBorderRadiusRight: 52% 48% 49% 51% / 43% 61% 39% 57%;$cloudColorChange1: cloudColorChange 3s linear infinite;$cloudColorChange2: cloudColorChange 3s 1s linear infinite;$cloudColorChange3: cloudColorChange 3s 2s linear infinite;@keyframes cloudColorChange {0%,100% {background: $white;}50% {background: $gray;}}position: absolute;width: 100%;height: 100%;top: 0;left: 0;.cloud {position: absolute;background: $white;border-radius: $cloudBorderRadiusMiddle;@mixin sharedCloudSides {content: "";position: absolute;width: 85%;height: 85%;top: 10%;left: -50%;right: -50%;background: inherit;}&:before {@include sharedCloudSides;right: unset;border-radius: $cloudBorderRadiusLeft;}&:after {@include sharedCloudSides;left: unset;border-radius: $cloudBorderRadiusRight;}}.cloud:nth-of-type(1) {width: 20%;height: 20%;top: 10%;left: 25%;animation: $cloudColorChange1;}.cloud:nth-of-type(2) {width: 30%;height: 30%;top: 35%;right: 20%;animation: $cloudColorChange2;}.cloud:nth-of-type(3) {width: 20%;height: 20%;top: 72%;left: 35%;animation: $cloudColorChange3;}}
}#mist {.mist {position: absolute;width: 100%;height: 100%;top: 0;left: 0;@mixin sharedMistLine {position: absolute;height: 7%;background: $white;border-radius: 10rem;}.mist-line:nth-of-type(1) {@include sharedMistLine;width: 40%;top: 16%;right: 25%;}.mist-line:nth-of-type(2) {@include sharedMistLine;width: 40%;top: 31%;left: 20%;}.mist-line:nth-of-type(3) {@include sharedMistLine;width: 50%;top: 46%;left: 25%;}.mist-line:nth-of-type(4) {@include sharedMistLine;width: 40%;top: 61%;right: 20%;}.mist-line:nth-of-type(5) {@include sharedMistLine;width: 50%;top: 76%;left: 25%;}}
}

天气图标（Weather Icon Showcase）相关推荐

  1. html怎么让图标动起来,让ICON生动起来 纯CSS实现带动画的天气图标

    让ICON生动起来 纯CSS实现带动画的天气图标 1月 20, 2016 评论 (1) Sponsor CSS3动画属性并不是很多,但重点其实是你怎样去运用它,从简单的hover状态或复杂的小动画,都 ...

  2. html5制作天气动画背景,CSS icon图标之纯CSS实现带动画效果的天气图标

    CSS3动画属性并不是很多,但重点其实是你怎样去运用它,从简单的hover状态或复杂的小动画,都可以巧妙的用CSS3动画属性来实现. 今天主要是和大家分享一个比较有创意.实用的CSS天气图标动画,静态 ...

  3. 如何用openweather显示html,如何显示openweathermap天气图标

    我正在使用openweathermap来显示天气报告.一切工作正常,但图标有问题. JSON响应代码是:如何显示openweathermap天气图标 Array ( [city] => Arra ...

  4. android 和风图标字体移植显示墨迹天气图标

    android studio版本:21.2.1 例程:newareaautov1 和风天气字体图标使用方法见: android 显示和风天气字体图标_kim5659的博客-CSDN博客_qweathe ...

  5. 关于ESP8266+OLED显示网络天气+天气图标，我掉进过的一些坑

    就权当是给自己写的一个总结吧. 中间也走过不少的弯路,没人指导,只有自己慢慢摸索,网上看到的教程也是零零散散,或许是自己C代码功底不够硬,总之照搬别人的结果坑到最后还是自己,搞得一身疲惫,最后索性,按 ...

  6. QT练手小项目-——天气播报小狗（ui展示分析，构造实现，json格式数据分析，界面交互，天气图标处理，小狗语音）

    前言 经过之前一段时间的QT学习,做出一个小软件来总结自己掌握关于qt的知识点.网络上有许多免费的天气接口(api),有xml格式的,也有json格式的.具体xml和json有什么区别,这里我就不去深 ...

  7. python爬取中国天气网天气图标

    python爬取中国天气网天气图标 准备工作 天气预报图例网址:http://www.weather.com.cn/static/html/legend.shtml 安装requests:pip in ...

  8. 如何将阿里云天气接口中返回的天气图标转换成对应的url

    上一篇文章中我们谈到了阿里云天气接口的使用,但是,在这个接口返回的数据中,有一个图标问题是需要我们注意的. 如图所示: 阿里云接口返回的天气图标是一个状态值,拿到之后是没法直接使用的,所以,我们需要将 ...

  9. html页面调用ico图标,如何在HTML中使用图标字体 - icon font?

    日期:2012-8-27  来源:GBin1.com 在线演示  本地下载 主要特性 使用icon font来生成图标相对于基于图片的图标来说,有如下的好处: 自由的变化大小 自由的修改颜色 添加阴影 ...

最新文章

  1. eclipse安装Log4E插件以及简单使用
  2. mysql分区字段创建索引_MySQL分区字段列有必要再单独建索引吗？
  3. chart.js 饼图显示百分比_Echarts饼图展示车站客流占比图
  4. Android UI开发第八篇——ViewFlipper 左右滑动效果
  5. Web Map Gis 开发系列索引
  6. 下载网页 TS视频并自动合成视频
  7. Win10家庭版远程桌面工具RDP Wrapper
  8. 西门子S7-300PLC采用博途V14编程程序，附带博途WINCC上位机，项目内容甲醛生产线项目，模拟量处理，电机控制等
  9. 进制转换和2的幂次方表示
  10. springboot毕设项目流云医疗管理系统davy2（java+VUE+Mybatis+Maven+Mysql）
  11. Android 开发之初识 Android
  12. CSS backdrop-filter 实现毛玻璃效果 无需定位裁剪图片
  13. 华为手机android7价格,华为7怎么样？报价多少？
  14. Windows桌面应用程序(1-2-4-2nd) 桌面窗口管理器
  15. Mac切换docker镜像源
  16. 线缆束的辐射与抗干扰
  17. 越狱设备装 ipa包
  18. Android手机间语音通话使用webrtc消除回音
  19. PostGIS安装教程及遇到的问题总结
  20. 经典题目题解：连续子串和

热门文章

  1. 清华大学计算机系1979,清华大学1979级毕业30周年纪念大会召开
  2. 移动App设计的那些创新点
  3. v-model.trim使用
  4. 转别人对蓝牙设计问题汇总
  5. python人工智能入门优达视频_看优达学城python入门视频学习C++
  6. [转载]裸写一个含内嵌IE控件的窗口
  7. idea debug时提示”Method breakpoints may dramatically slow down debugging
  8. Leetcode动态规划——01背包问题
  9. 城市三级级联选择器-Qt版
  10. tp3.1 mysql 事务_tp框架事务处理实例和理解