纯css布局实现一个金币效果-html代码-BFW代码库

纯css布局实现一个金币效果

代码语言：html

代码描述：纯css布局实现一个金币效果

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


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

<style>
:root {
  --color-white: #fff;
  --color-darkest: #251600;
  --color-yellow: #f4c928;
  --color-yellow-dark: #523100;
}

body {
  background-color: #000;
  width: 100vw;
  height: calc(100vh - 100px);
}

.coin {
  margin: 100px auto 0px auto;
  position: relative;
  height: 510px;
  width: 500px;
  border-radius: 42% 50% 50% 46%;
  -webkit-transform: rotatey(30deg);
          transform: rotatey(30deg);
  background: linear-gradient(200deg, #e3b003, var(--color-yellow) 3%, var(--color-yellow) 20%, var(--color-yellow-dark) 38%, var(--color-darkest) 45%, var(--color-darkest) 60%, #987500 100%);
}
.coin::before {
  content: "";
  position: absolute;
  top: 0px;
  left: -31px;
  height: 510px;
  width: 470px;
  border-radius: 50%;
  background: linear-gradient(210deg, #fff, #fff 10%, #a47b00 35%, #875e00 38%, #875e00 50%, #523100 100%);
}
.coin::after {
  content: "";
  position: absolute;
  top: 7px;
  left: -29px;
  height: 496px;
  width: 455px;
  border-radius: 50%;
  background: linear-gradient(220deg, #ffec50, #f3c403 100%);
}

.center {
  position: absolute;
  z-index: 1;
  top: 50px;
  left: 20px;
  height: 400px;
  width: 350px;
  border-radius: 50%;
  background: linear-gradient(230deg, #764600, #ecba00 70%, #fff 80%, #fff 100%);
}
.center::before {
  box-sizing: border-box;
  content: "";
  position: absolute;
  top: 7px;
  right: 1px;
  height: 384px;
  width: 335px;
.........完整代码请登录后点击上方下载按钮下载查看