Красивые анимированные иконки погоды на CSS для вашего проекта

See the Pen Animated Weather Icons(pure CSS) by Akhil Sai Ram (@akhil_001) on CodePen.
HTML
<html><head><title>Weather Icons</title><link href="style.css" rel="stylesheet"></head><body><h1> Weather Icons using CSS</h1><div class="hot"><span class="sun"></span><span class="sunx"></span></div><div class="cloudy"><span class="cloud"></span><span class="cloudx"></span></div><div class="stormy"><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><span class="snowe"></span><span class="snowex"></span><span class="stick"></span><span class="stick2"></span></div><div class="breezy"><ul><li></li><li></li><li></li><li></li><li></li></ul><span class="cloudr"></span></div><div class="night"><span class="moon"></span><span class="spot1"></span><span class="spot2"></span><ul><li></li><li></li><li></li><li></li><li></li></ul></div></body></html>
CSS
@import url('https://fonts.googleapis.com/css?family=Raleway');body{background:#fff ;}div{width:130px;height:130px;border-radius: 40%;z-index:120;}h1{font-family: 'Raleway', sans-serif;position: fixed;left:30%;}.hot{ position: absolute;top:25%;left:20%;background:linear-gradient( to top right, rgba(255,87,34,1) 0%,rgba(251,140,0 ,1) 100%);box-shadow: 1px 1px 30px rgba(255,111,0 ,1);}.sun{position: absolute;top:-10%;left:65%;width:50px;height: 50px;border-radius: 100%;background:linear-gradient( to bottom left, rgba(255,235,59,1) 0%,rgba(249,168,37 ,1) 90%);box-shadow: 1px 1px 30px rgba(255,160,0 ,1);animation: inex 3s infinite linear ;}.sunx{position: absolute;top:30%;left:45%;width:10px;height: 10px;border-radius: 100%;background-color: #fff;opacity:0.2;}.cloudy{ position: absolute;top:25%;left:45%;background:linear-gradient( to top right, rgba(63,81,181,1) 0%,rgba(3,155,229 ,1) 40%);box-shadow: 1px 1px 30px rgba(2,119,189 ,1);}.cloud{position: absolute;top:5%;left:70%;width:60px;height: 20px;border-radius:10px;background-color: rgba(129,212,250 ,1);box-shadow: 1px 1px 30px rgba(0,151,167 ,1);animation: move 3s infinite linear ;}.cloudx{position: absolute;top:23%;left:55%;width:60px;height: 20px;border-radius:10px;background-color: rgba(129,212,250 ,1);animation: move 3s infinite linear ;}.stormy{position: absolute;top:25%;left:70%;background:linear-gradient( to top right,rgba(117,117,117 ,1) 0%,rgba(33,33,33 ,1) 90%);box-shadow: 1px 1px 30px rgba(33,33,33 ,1);}.stormy li{position: absolute;list-style: none;width: 5px;height: 5px;border-radius: 100%;background-color:#777;box-shadow: 1px 1px 30px #555;animation: fall 3s infinite linear ;opacity:0;}.stormy li:nth-child(1){top:0%;left:100%;}.stormy li:nth-child(2){top:5%;left:90%;}.stormy li:nth-child(3){top:-10%;left:80%;animation-delay: 2s;}.stormy li:nth-child(4){top:10%;left:100%;animation-delay: 2s;}.stormy li:nth-child(5){top:20%;left:80%;animation-delay: 0.5s;}.stormy li:nth-child(6){top:35%;left:70%;background-color: #bbb;animation-delay: 0.5s;}.stormy li:nth-child(7){top:23%;left:60%;background-color: #bbb;animation-delay: 0.8s;}.stormy li:nth-child(8){top:5%;left:70%;background-color: #bbb;animation-delay: 0.8s;}.snowe{position: absolute;top:60%;left:40%;width:40px;height: 40px;border-radius:60px;background-color: #ddd;}.snowex{position: absolute;top:50%;left:50%;width:15px;height: 15px;border-radius:15px;background-color: #bbb;}.stick{position: absolute;top:60%;left:40%;width:3px;height: 15px;transform: rotate(-45deg);background-color: #333;z-index: -10;}.stick2{position: absolute;top:60%;left:70%;width:3px;height: 15px;transform: rotate(45deg);background-color: #333;z-index: -10;}.breezy{position: absolute;top:60%;left:30%;background:linear-gradient( to top right,rgba(156,204,101 ,1) 0%,rgba(38,198,218 ,1) 50%);box-shadow: 1px 1px 30px rgba(38,198,218 ,1);}.cloudr{position: absolute;top:5%;left:60%;width:60px;height: 20px;border-radius:10px;background-color: rgba(96,125,139 ,1);box-shadow: 1px 1px 30px rgba(84,110,122 ,1);animation: flash 1.5s infinite linear;}.breezy li{position: absolute;list-style: none;width: 2px;height: 7px;border-radius: 10%;background-color:#eee;opacity:0;animation: fall 3s infinite linear ;transform: rotate(25deg);}.breezy li:nth-child(1){top:10%;left:95%;}.breezy li:nth-child(2){top:5%;left:83%;animation-delay:0.3s;}.breezy li:nth-child(3){top:4%;left:87%;animation-delay:0.6s;}.breezy li:nth-child(4){top:15%;left:70%;animation-delay:1s;}.breezy li:nth-child(5){top:10%;left:75%;}.night{position: absolute;top:60%;left:60%;background:linear-gradient( to bottom right,rgba(63,81,181,1) 0%,rgba(171,71,188 ,1) 70%);box-shadow: 1px 1px 30px rgba(81,45,168 ,1);}.moon{position: absolute;top:-10%;left:65%;width:70px;height: 70px;border-radius: 100%;background:rgba(255,241,118 ,1);box-shadow: 1px 1px 30px rgba(224,224,224 ,1);}.spot1{position: absolute;top:0%;left:85%;width:10px;height: 10px;border-radius: 100%;background-color: #777;}.spot2{position: absolute;top:30%;left:75%;width:5px;height: 5px;border-radius: 100%;background-color: #777;}.night li{position: absolute;list-style: none;width: 3px;height: 3px;border-radius: 100%;background-color:#fff;transform: rotate(45deg);}.night li:nth-child(1){top:30%;left:65%;}.night li:nth-child(2){top:35%;left:53%;}.night li:nth-child(3){opacity: 0;top:20%;left:75%;width:2px;height: 2px;animation: meteor 1.5s infinite linear;animation-delay: 0.6s;}.night li:nth-child(4){top:5%;left:50%;}.night li:nth-child(5){opacity: 0;top:20%;left:55%;width:1px;height: 15px;animation: meteor 1.5s infinite linear;}@keyframes inex {50% {opacity: 0.4;}60%{opacity: 1;}}@keyframes move {50% {transform: translateX(-10px);}}@keyframes fall {10%{opacity:0.8;}50% {opacity:1;transform: translate(-10px,30px);}100%{transform: translate(-25px,70px);}}@keyframes flash{48%{background-color: rgba(96,125,139 ,1);}50%{background-color: #fff;}55%{background-color: rgba(96,125,139 ,1);}57%{background-color: #fff;}}@keyframes meteor{10%{opacity: 1;}80%{left:10%;top:75%;opacity: 0;}}
animated-weather-icons-pure-css.zip
0
16.18 Kb
Нашли ошибку? Сообщите нам, мы исправим!
Комментариев нет
Чтобы оставить комментарий, необходимо на сайте.
Копирование запрещено!