css+div实现冬天下雪的日历效果代码-html代码-BFW代码库

代码语言：html
代码描述：css+div实现冬天下雪的日历效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Kaushan+Script&family=Open+Sans:wght@300;400&display=swap");
/* --------------------------- Colors ------------------------- */
/* ---------------------- Width & Heights --------------------- */
/* --------------------------- Mixins -------------------------- */
/* ------------------------ Functions ------------------------ */
/* ------------------------ Reset CSS ----------------------- */
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* --------------------------- CSS -------------------------- */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #fffff0;
}

.container {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
}

.card {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
  width: 400px;
  background-color: #dff6ff;
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%239ddff9' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.frame {
  position: relative;
  height: 300px;
  width: 300px;
  background: linear-gradient(to bottom, black 0%, #0061a8 100%);
  border-radius: 100%;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.4), 0 0 0 8px #dff6ff, 0 0 0 10px #0061a8;
  overflow: hidden;
}
.frame .cloud {
  position: absolute;
  z-index: 1;
  width: 40px;
  height: 40px;
  background-color: #e3e3e3;
  border-radius: 100%;
}
.frame .cloud::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: -12px;
  width: 30px;
  height: 25px;
  background-color: #e3e3e3;
  border-radius: 100% 0 0 100%;
}
.frame .cloud::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: -12px;
  width: 30px;
  height: 25px;
  background-color: #e3e3e3;
  border-radius: 0 100% 100% 0;
}
.frame .cloud_top {
  top: 40px;
  left: -40px;
}
.frame .cloud_bottom {
  top: 80px;
  left: -40px;
}
.frame .cloud_slow {
  animation: moveCloud 60s linear 2s infinite;
}
.frame .cloud_fast {
  animation: moveCloud 30s linear 0s infinite;
}
.frame .moon {
  position: absolute;
  top: 40px;
  right: 80px;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background-color: #f5edc2;
  box-shadow: 0 0 10px 4px rgba(245, 237, 194, 0.4);
  background-image: radial-gradient(circle at 40% 80%, #ddc997 10%, transparent 0), radial-gradient(circle at 55% 70%, #ddc997 5%, transparent 0), radial-gradient(circle at 58% 85%, #ddc997 6%, transparent 0), radial-gradient(circle at 80% 40%, #ddc997 12%, transparent 0), radial-gradient(circle at 87% 58%, #ddc997 4%, transparent 0);
}
.frame .mountain {
  position: absolute;
  height: 200px;
  width: 300px;
  border-radius: 100%;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}
.frame .mountain_light {
  background-color: #ffffff;
}
.frame .mountain_dark {
  background-color: #9aceff;
}
.frame .mountain_left {
  bottom: -150px;
  left: -40px;
}
.frame .mountain_right {
  bottom: -120px;
  right: -80px;
}
.frame .mountain_top {
  bottom: -110px;
  left: 0;
}
.frame .tree {
  position: absolute;
}
.frame .tree::before, .frame .tree::after {
  content: "";
  position: absolute;
}
.frame .tree_dark-green {
  border: 20px solid transparent;
  border-bottom: 20px solid #228b22;
}
.frame .tree_dark-green::before, .frame .tree_dark-green::after {
  border: 20px solid transparent;
  border-bottom: 20px solid #228b22;
}
.frame .tree_light-green {
  border: 30px solid transparent;
  border-bottom: 30px solid #33ad39;
}
.frame .tree_light-green::before, .frame .tree_light-green::after {
  border: 30px solid transparent;
  border-bottom: 30px solid #33ad39;
}
.frame .tree_middle {
  top: 145px;
  left: 100px;
}
.frame .tree_middle::before {
  top: -5px;
  right: -20px;
}
.frame .tree_middle::after {
  top: 10px;
  right: -20px;
}
.frame .tree_left {
  top: 160px;
  left: 30px;
}
.frame .tree_left::before {
  top: -10px;
  right: -30px;
}
.frame .tree_left::after {
  top: 10px;
  right: -30px;
}
.frame .tree_right {
  top: 155px;
  right: 30px;
}
.frame .tree_right::before {
  top: -5px;
  right: -20px;
}
.frame .tree_right::after {
  top: 10px;
  right: -20px;
}

.stars {
  z-index: 10;
  width: 1px;
  height: 1px;
  border-radius: 100%;
  background: transparent;
  box-shadow: 952px 3px #FFF , 823px 776px #FFF , 1166px 683px #FFF , 348px 457px #FFF , 1154px 413px #FFF , 697px 754px #FFF , 1359px 397px #FFF , 857px 840px #FFF , 812px 1327px #FFF , 748px 1250px #FFF , 38px 1477px #FFF , 570px 730px #FFF , 1375px 597px #FFF , 91px 892px #FFF , 787px 1344px #FFF , 1383px 696px #FFF , 36px 823px #FFF , 786px 343px #FFF , 518px 114px #FFF , 665px 374px #FFF , 1377px 1551px #FFF , 683px 1185px #FFF , 59px 1270px #FFF , 621px 1288px #FFF , 340px 935px #FFF , 53px 1436px #FFF , 311px 738px #FFF , 1197px 1206px #FFF , 1535px 384px #FFF , 1137px 586px #FFF , 403px 301px #FFF , 201px 690px #FFF , 1323px 531px #FFF , 343px 871px #FFF , 830px 1331px #FFF , 595px 713px #FFF , 447px 104px #FFF , 869px 1338px #FFF , 148px 1397px #FFF , 278px 1300px #FFF , 1330px 724px #FFF , 1041px 709px #FFF , 1255px 1024px #FFF , 720px 224px #FFF , 1006px 333px #FFF , 596px 607px #FFF , 1147px 523px #FFF , 367px 929px #FFF , 548px 1516px #FFF , 1372px 115px #FFF , 574px 29px #FFF , 677px 674px #FFF , 1028px 913px #FFF , 498px 251px #FFF , 1524px 17px #FFF , 115px 836px #FFF , 1135px 648px #FFF , 1515px 143px #FFF , 1101px 985px #FFF , 69px 849px #FFF , 1115px 481px #FFF , 1547px 905px #FFF , 916px 1080px #FFF , 1280px 522px #FFF , 430px 1416px #FFF , 583px 21px #FFF , 1097px 1253px #FFF , 775px 649px #FFF , 612px 763px #FFF , 132px 506px #FFF , 1139px 1086px #FFF , 826px 1496px #FFF , 1488px 1310px #FFF , 1450px 246px #FFF , 967px 993px #FFF , 820px 1397px #FFF , 879px 143px #FFF , 731px 213px #FFF , 684px 981px #FFF , 1371px 1538px #FFF , 319px 240px #FFF , 1383px 35px #FFF , 1495px 350px #FFF , 746px 38px #FFF , 851px 383px #FFF , 1543px 1159px #FFF , 319px 953px #FFF , 459px 1228px #FFF , 424px 404px #FFF , 812px 515px #FFF , 646px 265px #FFF , 733px 83px #FFF , 81px 273px #FFF , 1368px 336px #FFF , 573px 202px #FFF , 268px 529px #FFF , 1015px 1121px #FFF , 1208px 24px #FFF , 15px 366px #FFF , 1480px 58px #FFF , 1496px 649px #FFF , 231px 789px #FFF , 663px 1338px #FFF , 766px 287px #FFF , 1099px 1103px #FFF , 726px 10px #FFF , 1113px 610px #FFF , 180px 619px #FFF , 1106px 643px #FFF , 1097px 114px #FFF , 1467px 334px #FFF , 1406px 789px #FFF , 1274px 675px #FFF , 1355px 313px #FFF , 875px 259px #FFF , 598px 1554px #FFF , 278px 279px #FFF , 790px 885px #FFF , 328px 40px #FFF , 932px 978px #FFF , 429px 247px #FFF , 1476px 734px #FFF , 413px 1075px #FFF , 980px 535px #FFF , 1226px 754px #FFF , 112px 1290px #FFF , 1460px 184px #FFF , 102px 1093px #FFF , 1228px 399px #FFF , 66px 1461px #FFF , 571px 130px #FFF , 1372px 1540px #FFF , 569px 1342px #FFF , 1500px 964px #FFF , 1131px 714px #FFF , 920px 1458px #FFF , 938px 478px #FFF , 1343px 799px #FFF , 1150px 1045px #FFF , 886px 693px #FFF , 363px 1369px #FFF , 452px 552px #FFF , 1194px 1330px #FFF , 65px 366px #FFF , 405px 1340px #FFF , 1298px 823px #FFF , 747px 1231px #FFF , 1225px 259px #FFF , 232px 604px #FFF , 863px 1019px #FFF , 67px 71px #FFF , 15px 882px #FFF , 1030px 1191px #FFF , 425px 1045px #FFF , 714px 895px #FFF , 627px 713px #FFF , 990px 114px #FFF , 733px 222px #FFF , 614px 855px #FFF , 871px 1391px #FFF , 1131px 183px #FFF , 285px 465px #FFF , 1395px 407px #FFF , 1370px 986px #FFF , 1017px 365px #FFF , 452px 1312px #FFF , 1398px 715px #FFF , 1018px 653px #FFF , 244px 22px #FFF , 1021px 938px #FFF , 1243px 503px #FFF , 456px 735px #FFF , 829px 273px #FFF , 1547px 129px #FFF , 1397px 217px #FFF , 840px 621px #FFF , 316px 177px #FFF , 624px 1549px #FFF , 1467px 1056px #FFF , 504px 129px #FFF , 1024px 1430px #FFF , 1015px 136px #FFF , 622px 68px #FFF , 118px 886px #FFF , 779px 593px #FFF , 587px 1182px #FFF , 994px 1480px #FFF , 583px 1425px #FFF , 1242px 1090px #FFF , 534px 470px #FFF , 356px 1209px #FFF , 801px 1017px #FFF , 257px 444px #FFF , 1351px 1089px #FFF , 106px 1261px #FFF , 387px 630px #FFF , 1007px 689px #FFF , 687px 970px #FFF , 735px 125px #FFF , 486px 466px #FFF , 1477px 741px #FFF , 1169px 1520px #FFF , 1194px 551px #FFF , 1101px 596px #FFF , 75px 735px #FFF , 740px 1386px #FFF , 252px 1341px #FFF , 1093px 804px #FFF , 1536px 279px #FFF , 439px 1010px #FFF , 533px 1123px #FFF , 1120px 558px #FFF , 329px 160px #FFF , 1481px 1389px #FFF , 45px 641px #FFF , 1474px 1087px #FFF , 1387px 1120px #FFF , 560px 279px #FFF , 472px 692px #FFF , 815px 272px #FFF , 477px 66px #FFF , 827px 1253px #FFF , 973px 1142px #FFF , 615px 374px #FFF , 1445px 394px #FFF , 627px 886px #FFF , 1492px 164px #FFF , 673px 1502px #FFF , 785px 95px #FFF , 97px 735px #FFF , 276px 77px #FFF , 74px 96px #FFF , 403px 1166px #FFF , 886px 1070px #FFF , 16px 269px #FFF , 902px 57px #FFF , 1142px 1133px #FFF , 1093px 995px #FFF , 889px 1088px #FFF , 1431px 277px #FFF , 557px 698px #FFF , 779px 1372px #FFF , 1296px 947px #FFF , 149px 779px #FFF , 301px 1544px #FFF , 829px 1177px #FFF , 1418px 938px #FFF , 1281px 775px #FFF , 27px 228px #FFF , 486px 137px #FFF , 9px 165px #FFF , 798px 1006px #FFF , 1348px 911px #FFF , 595px 1331px #FFF , 446px 1121px #FFF , 635px 222px #FFF , 1436px 106px #FFF , 53px 404px #FFF , 971px 107px #FFF , 622px 134px #FFF , 69px 318px #FFF , 893px 1007px #FFF , 1334px 486px #FFF , 988px 294px #FFF , 868px 464px #FFF , 412px 1522px #FFF , 441px 427px #FFF , 1415px 1011px #FFF , 238px 1058px #FFF , 1098px 1324px #FFF , 143px 1304px #FFF , 72px 441px #FFF , 1554px 665px #FFF , 636px 611px #FFF , 81px 891px #FFF , 349px 759px #FFF , 674px 641px #FFF , 1317px 725px #FFF , 975px 992px #FFF , 202px 517px #FFF , 1183px 313px #FFF , 613px 731px #FFF , 1335px 1029px #FFF , 1331px 281px #FFF , 43px 744px #FFF , 941px 1504px #FFF , 173px 834px #FFF , 829px 508px #FFF , 797px 270px #FFF , 29px 1517px #FFF , 228px 1310px #FFF , 1293px 501px #FFF , 34px 556px #FFF , 1327px 547px #FFF , 422px 764px #FFF , 193px 894px #FFF , 1070px 1421px #FFF , 879px 303px #FFF , 1240px 1444px #FFF , 413px 589px #FFF , 450px 1043px #FFF , 1291px 210px #FFF , 1414px 803px #FFF , 251px 198px #FFF , 211px 606px #FFF , 544px 446px #FFF , 626px 1375px #FFF , 1106px 485px #FFF , 1350px 696px #FFF , 1511px 1340px #FFF , 1396px 658px #FFF , 1379px 251px #FFF , 594px 1406px #FFF , 674px 319px #FFF , 905px 1483px #FFF , 1263px 1439px #FFF , 36px 855px #FFF , 277px 877px #FFF , 871px 1385px #FFF , 1205px 526px #FFF , 15px 262px #FFF , 1483px 298px #FFF , 1089px 595px #FFF , 234px 669px #FFF , 1108px 532px #FFF , 809px 160px #FFF , 1361px 282px #FFF , 1332px 609px #FFF , 558px 733px #FFF , 373px 462px #FFF , 1531px 707px #FFF , 336px 121px #FFF , 514px 24px #FFF , 138px 1014px #FFF , 1313px 819px #FFF , 1397px 1445px #FFF , 1319px 809px #FFF , 1110px 1009px #FFF , 1298px 583px #FFF , 1181px 845px #FFF , 1099px 1499px #FFF , 449px 1116px #FFF , 1228px 640px #FFF , 474px 1089px.........完整代码请登录后点击上方下载按钮下载查看