池州网站建设推广,正规app推广,关键字排名查询,公司做网站推广需要多少钱欢迎来到前端设计专栏#xff0c;本专栏收藏了一些好看且实用的前端作品#xff0c;使用简单的html、css语法打造创意有趣的作品#xff0c;为网站加入更多高级创意的元素。 html
!DOCTYPE html
html langen
headmeta charset本专栏收藏了一些好看且实用的前端作品使用简单的html、css语法打造创意有趣的作品为网站加入更多高级创意的元素。 html
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlelink relstylesheet href./card1.css/head
body
div classcarddiv classcontainerdiv classcloud frontspan classleft-front/spanspan classright-front/span/divspan classsun sunshine/spanspan classsun/spandiv classcloud backspan classleft-back/spanspan classright-back/span/div/divdiv classcard-headerspan西安 - 雁塔区br陕西/spanspanMarch 13/span/divspan classtemp23°/spandiv classtemp-scalespanCelcius/span/div
/div
/body
/html
css
.card {width: 350px;height: 235px;position: relative;padding: 25px;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;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);border-radius: 23px;transition: all 0.8s cubic-bezier(0.15, 0.83, 0.66, 1);cursor: pointer;
}.card:hover {transform: scale(1.05);
}.container {width: 250px;height: 250px;position: absolute;right: -35px;top: -50px;display: flex;align-items: center;justify-content: center;transform: scale(0.7);
}.cloud {width: 250px;
}.front {padding-top: 45px;margin-left: 25px;display: inline;position: absolute;z-index: 11;animation: clouds 8s infinite;animation-timing-function: ease-in-out;
}.back {margin-top: -30px;margin-left: 150px;z-index: 12;animation: clouds 12s infinite;animation-timing-function: ease-in-out;
}.right-front {width: 45px;height: 45px;border-radius: 50% 50% 50% 0%;background-color: #4c9beb;display: inline-block;margin-left: -25px;z-index: 5;
}.left-front {width: 65px;height: 65px;border-radius: 50% 50% 0% 50%;background-color: #4c9beb;display: inline-block;z-index: 5;
}.right-back {width: 50px;height: 50px;border-radius: 50% 50% 50% 0%;background-color: #4c9beb;display: inline-block;margin-left: -20px;z-index: 5;
}.left-back {width: 30px;height: 30px;border-radius: 50% 50% 0% 50%;background-color: #4c9beb;display: inline-block;z-index: 5;
}.sun {width: 120px;height: 120px;background: -webkit-linear-gradient(to right, #fcbb04, #fffc00);background: linear-gradient(to right, #fcbb04, #fffc00);border-radius: 60px;display: inline;position: absolute;
}.sunshine {animation: sunshines 2s infinite;
}keyframes sunshines {0% {transform: scale(1);opacity: 0.6;}100% {transform: scale(1.4);opacity: 0;}
}keyframes clouds {0% {transform: translateX(15px);}50% {transform: translateX(0px);}100% {transform: translateX(15px);}
}.card-header {display: flex;flex-direction: column;gap: 10px;
}.card-header span:first-child {word-break: break-all;font-weight: 800;font-size: 15px;line-height: 135%;color: rgba(87, 77, 51, 0.66);
}.card-header span:last-child {font-weight: 700;font-size: 15px;line-height: 135%;color: rgba(87, 77, 51, 0.33);
}.temp {position: absolute;left: 25px;bottom: 12px;font-weight: 700;font-size: 64px;line-height: 77px;color: rgba(87, 77, 51, 1);
}.temp-scale {width: 80px;height: 36px;position: absolute;right: 25px;bottom: 25px;display: flex;align-items: center;justify-content: center;background: rgba(0, 0, 0, 0.06);border-radius: 9px;
}.temp-scale span {font-weight: 700;font-size: 13px;line-height: 134.49%;color: rgba(87, 77, 51, 0.66);
}
