3K views
1.card { 2 width: 350px; 3 height: 235px; 4 position: relative; 5 padding: 25px; 6 background: radial-gradient(178.94% 106.41% at 26.42% 106.41%, #FFF7B1 0%, rgba(255, 255, 255, 0) 71.88%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */, #FFFFFF; 7 box-shadow: 0px 155px 62px rgba(0, 0, 0, 0.01), 0px 87px 52px rgba(0, 0, 0, 0.05), 0px 39px 39px rgba(0, 0, 0, 0.09), 0px 10px 21px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1); 8 border-radius: 23px; 9 transition: all 0.8s cubic-bezier(0.15, 0.83, 0.66, 1); 10 cursor: pointer; 11} 12 13.card:hover { 14 transform: scale(1.05); 15} 16 17.container { 18 width: 250px; 19 height: 250px; 20 position: absolute; 21 right: -35px; 22 top: -50px; 23 display: flex; 24 align-items: center; 25 justify-content: center; 26 transform: scale(0.7); 27} 28 29.cloud { 30 width: 250px; 31} 32 33.front { 34 padding-top: 45px; 35 margin-left: 25px; 36 display: inline; 37 position: absolute; 38 z-index: 11; 39 animation: clouds 8s infinite; 40 animation-timing-function: ease-in-out; 41} 42 43.back { 44 margin-top: -30px; 45 margin-left: 150px; 46 z-index: 12; 47 animation: clouds 12s infinite; 48 animation-timing-function: ease-in-out; 49} 50 51.right-front { 52 width: 45px; 53 height: 45px; 54 border-radius: 50% 50% 50% 0%; 55 background-color: #4c9beb; 56 display: inline-block; 57 margin-left: -25px; 58 z-index: 5; 59} 60 61.left-front { 62 width: 65px; 63 height: 65px; 64 border-radius: 50% 50% 0% 50%; 65 background-color: #4c9beb; 66 display: inline-block; 67 z-index: 5; 68} 69 70.right-back { 71 width: 50px; 72 height: 50px; 73 border-radius: 50% 50% 50% 0%; 74 background-color: #4c9beb; 75 display: inline-block; 76 margin-left: -20px; 77 z-index: 5; 78} 79 80.left-back { 81 width: 30px; 82 height: 30px; 83 border-radius: 50% 50% 0% 50%; 84 background-color: #4c9beb; 85 display: inline-block; 86 z-index: 5; 87} 88 89.sun { 90 width: 120px; 91 height: 120px; 92 background: -webkit-linear-gradient(to right, #fcbb04, #fffc00); 93 background: linear-gradient(to right, #fcbb04, #fffc00); 94 border-radius: 60px; 95 display: inline; 96 position: absolute; 97} 98 99.sunshine { 100 animation: sunshines 2s infinite; 101} 102 103@keyframes sunshines { 104 0% { 105 transform: scale(1); 106 opacity: 0.6; 107 } 108 109 100% { 110 transform: scale(1.4); 111 opacity: 0; 112 } 113} 114 115@keyframes clouds { 116 0% { 117 transform: translateX(15px); 118 } 119 120 50% { 121 transform: translateX(0px); 122 } 123 124 100% { 125 transform: translateX(15px); 126 } 127} 128 129.card-header { 130 display: flex; 131 flex-direction: column; 132 gap: 10px; 133} 134 135.card-header span:first-child { 136 word-break: break-all; 137 font-weight: 800; 138 font-size: 15px; 139 line-height: 135%; 140 color: rgba(87, 77, 51, 0.66); 141} 142 143.card-header span:last-child { 144 font-weight: 700; 145 font-size: 15px; 146 line-height: 135%; 147 color: rgba(87, 77, 51, 0.33); 148} 149 150.temp { 151 position: absolute; 152 left: 25px; 153 bottom: 12px; 154 font-weight: 700; 155 font-size: 64px; 156 line-height: 77px; 157 color: rgba(87, 77, 51, 1); 158} 159 160.temp-scale { 161 width: 80px; 162 height: 36px; 163 position: absolute; 164 right: 25px; 165 bottom: 25px; 166 display: flex; 167 align-items: center; 168 justify-content: center; 169 background: rgba(0, 0, 0, 0.06); 170 border-radius: 9px; 171} 172 173.temp-scale span { 174 font-weight: 700; 175 font-size: 13px; 176 line-height: 134.49%; 177 color: rgba(87, 77, 51, 0.66); 178}
MIT License