虎年掘金杯：巧用CSS3画出金光闪闪的掘金杯

2024-02-07 23:32:23

概述

掘金杯是掘金平台的标志性元素之一，经常被用在各种场合。在这个虎年，我们不妨用CSS3来绘制一个金光闪闪的掘金杯。

实现步骤

首先，我们需要创建一个新的CSS文件，并将其命名为style.css。
在style.css文件中，我们需要添加以下代码：

/* 杯子主体 */
.cup {
  width: 100px;
  height: 150px;
  background-color: #FFD700;
  border-radius: 50% 50% 0 0;
  position: relative;
}

/* 杯柄 */
.handle {
  width: 50px;
  height: 20px;
  background-color: #FFD700;
  border-radius: 50%;
  position: absolute;
  top: 50px;
  left: 45px;
}

/* 杯口 */
.rim {
  width: 120px;
  height: 20px;
  background-color: #FFD700;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: -10px;
}

/* 杯盖 */
.lid {
  width: 80px;
  height: 40px;
  background-color: #FFD700;
  border-radius: 50%;
  position: absolute;
  top: -10px;
  left: 10px;
}

/* 杯底 */
.bottom {
  width: 80px;
  height: 20px;
  background-color: #FFD700;
  border-radius: 50%;
  position: absolute;
  bottom: 0;
  left: 10px;
}

在HTML文件中，我们需要添加以下代码：

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="cup">
    <div class="handle"></div>
    <div class="rim"></div>
    <div class="lid"></div>
    <div class="bottom"></div>
  </div>
</body>
</html>