css绘制一个月色天气卡片信息效果代码-html代码-BFW代码库

css绘制一个月色天气卡片信息效果代码

代码语言：html

代码描述：css绘制一个月色天气卡片信息效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        @import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);
        .frame {
          position: absolute;
          top: 50%;
          left: 50%;
          width: 400px;
          height: 400px;
          margin-top: -200px;
          margin-left: -200px;
          border-radius: 3px;
          box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.1);
          overflow: hidden;
          background: #1A2238;
          color: #333;
          font-family: "Open Sans", Helvetica, sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
        
        .center {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
        .center .moon {
          position: relative;
          top: -8em;
          left: -8em;
          height: 5em;
          width: 5em;
          border-radius: 50%;
          background: #F6EDBD;
          box-shadow: 0px 0px 12px 0px #F6EDBD;
        }
        .center .moon .spots {
          position: absolute;
          border-radius: 50%;
          background: #ECE1A8;
        }
        .center .moon .spot-1 {
          top: 1.5em;
          left: 0.5em;
          height: 17px;
          width: 17px;
        }
        .center .moon .spot-2 {
          top: 3.5em;
          left: 1.3em;
          height: 10px;
          width: 10px;
        }
        .center .moon .spot-3 {
          top: 2em;
          left: 3.7em;
          height: 7px;
          width: 7px;
        }
        .center .moon .spot-4 {
          top: 1em;
          left: 2.2em;
          height: 8px;
          width: 8px;
        }
        .center .moon .spot-5 {
          top: 1.7em;
          left: 2.6em;
          height: 8px;
          width: 8px;
        }
        .center .moon .spot-6 {
          top: 3.2em;
          left: 3.5em;
          height: 11px;
          width: 11px;
        }
        .center .moon .spot-7 {
          top: 4em;
          left: 2.5em;
          height: 7px;
          width: 7px;
        }
        .center .moon .spot-8 {
          top: 2.5em;
          left: 2.6em;
          height: 12px;
          width: 12px;
        }
        .center .moon .spot-9 {
          top: 3.2em;
          left: 2em;
          height: 5px;
          width: 5px;
        }
        .center .moon .spot-10 {
          top: 0.8em;
          left: 3.8em;
          height: 8px;
          width: 8px;
        }
        .center .clouds {
          position: absolute;
        }
        .center .clouds .cloud-1 {
          position: absolute;
          left: -17em;
          height: 18em;
          width: 20em;
          border-radius: 50%;
          background: #303C5D;
          z-index: 2;
        }
        .center .clouds .cloud-2 {
          position: absolute;
          top: -2em;
          left: -8em;
          height: 22em;
          width: 24em;
          border-radius: 50%;
          background: #303C5D;
          z-index: 3;
        }
        .center .clouds .cloud-3 {
          position: absolute;
          top: 0em;
          left: 6em;
          height: 18em;
          width: 20em;
          border-radius: 50%;
          background: #303C5D;
          z-index: 2;
        }
        .center .clouds .c.........完整代码请登录后点击上方下载按钮下载查看