也画一个月饼

运营反馈 活动
, ,
1

image
image1702×1137 39.5 KB

最喜欢黑芝麻的月饼，不过今年还没吃到。画一个css月饼送给大家，祝佬友们都能健健康康。

:root {
  --base-color: #e0a355;
  --surface-color: #f5c78b;
  --light-color: #fde8c2;
  --pattern-color: #d99449;
}

html {
  font-size: 16px;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  background: radial-gradient(ellipse at center, #f9e5ce 0%, #f3d5b5 100%);
}

.mooncake {
  width: 20rem;
  height: 20rem;
  border-radius: 50%;
  position: relative;
  background-color: var(--base-color);
  box-shadow: 0 0.625rem 1.25rem rgba(0, 0, 0, 0.2);
}

.edge {
  background-color: var(--base-color);
  width: 6.25rem;
  height: 20rem;
  position: absolute;
  border-radius: 3.125rem;
  transform: translateX(-50%) scale(1.05);
  left: 50%;
  top: 0;
  box-shadow: inset 0 0 1.25rem rgba(0, 0, 0, 0.2);
}

.edge::before,
.edge::after {
  content: '';
  display: block;
  background-color: inherit;
  width: inherit;
  height: inherit;
  position: inherit;
  border-radius: inherit;
  left: inherit;
  top: inherit;
  box-shadow: inherit;
}

.edge::before {
  transform: translateX(-50%) scale(1.03) rotateZ(-30deg);
}

.edge::after {
  transform: translateX(-50%) scale(1.03) rotateZ(-60deg);
}

.edge:nth-child(2) {
  transform: translateX(-50%) scale(1.05) rotateZ(90deg);
}

.bevel {
  width: 20rem;
  height: 20rem;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  box-sizing: border-box;
  transform: scale(0.93);
}

.bevel .edge {
  background-color: var(--light-color);
  box-shadow: none;
}

.inner {
  width: 20rem;
  height: 20rem;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  box-sizing: border-box;
  transform: scale(0.88);
  overflow: hidden;
}

.inner .edge {
  background-color: var(--surface-color);
  box-shadow: none;
}

.pattern {
  width: 100%;
  height: 100%;
  background-image: repeating-radial-gradient(circle at 50% 50%,
      var(--pattern-color) 0%, var(--pattern-color) 4%,
      var(--surface-color) 4%, var(--surface-color) 8%);
  opacity: 0.4;
}

.text {
  width: 12.5rem;
  height: 12.5rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  border: 0.625rem solid var(--light-color);
  border-radius: 2.5rem;
  background-image: linear-gradient(315deg, var(--surface-color) 0%, var(--light-color) 100%);
  box-shadow: 0 0.3125rem 0.625rem rgba(0, 0, 0, 0.2);
}

.text span {
  font-size: 5rem;
  line-height: 5rem;
  width: 10rem;
  font-family: 'KaiTi', 'STKaiti', serif;
  font-weight: bold;
  color: var(--pattern-color);
  text-shadow: 0 0.125rem 0.25rem rgba(255, 255, 255, 0.5);
}

@media (max-width: 768px) {
  html {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  html {
    font-size: 12px;
  }
}

HTML本体元素：

div class="mooncake">
  <div class="edge"></div>
  <div class="edge"></div>
  <div class="bevel">
    <div class="edge"></div>
    <div class="edge"></div>
  </div>
  <div class="inner">
    <div class="edge"></div>
    <div class="edge"></div>
    <div class="pattern"></div>
  </div>
  <div class="text">
    <span>中秋快乐</span>
  </div>
</div>
2 个赞
2

@Clarke.L CSS月饼来了！

3

可是css月饼没有徽章的呀

4

昨天就在想有没有大佬用代码画一个月饼，没想到！！！大佬中秋快乐！

5

啊，为什么不能获得徽章

6

因为活动要求手绘

7

image
image889×238 34 KB

这也没说非得手绘吧，还是我理解错了？

算了，没徽章就没徽章吧，对徽章没有执念。

8

image
？

9

好强，无敌了！

2 个赞
10

CSS, #纯水添加

11

佬友中秋快乐!!!

2 个赞