纯css布局实现孤月色效果

代码语言:html

所属分类:布局界面

代码描述:纯css布局实现孤月色效果

代码标签: 实现 月色 效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
* {
  margin: 0;
  padding: 0;
}

.midnight {
  
  position: relative;
  background: linear-gradient(
    0deg,
    rgba(20, 32, 72, 1) 3%,
    rgba(20, 32, 72, 1) 4%,
    rgba(77, 90, 130, 1) 33%,
    rgba(50, 71, 125, 1) 76%
  );

  width: 300px;
  height: 400px;
  margin: 0 auto;
  margin-top : 100px;
}
.midnight-sky {
  position: absolute;
  background: linear-gradient(
    180deg,
    rgba(44, 1, 108, 1) 8%,
    rgba(69, 26, 116, 1) 35%,
    rgba(110, 75, 131, 1) 79%,
    rgba(137, 106, 140, 1) 92%
  );

  width: 300px;
  height: 200px;
  margin: 0 auto;
}
.midnight-moon {
  position: absolute;
 .........完整代码请登录后点击上方下载按钮下载查看

网友评论0