css窗口中的球（div加渐变）

下载代码

html

css

分享到微信朋友圈

html

css

* {
  border: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: #17181c;
}

.drawing {
  background: linear-gradient(90deg, #53402d 10.5%, #483727 21.75%, #53402d 22% 30.625%, rgba(83, 64, 45, 0) 30.625%) 0 0/100% 100%, linear-gradient(90deg, rgba(83, 64, 45, 0) 68.5%, #53402d 68.5%) 0 0/100% 100%, linear-gradient(15deg, #53402d 22.9%, rgba(83, 64, 45, 0) 23%) 49.25% 0/38% 100%, radial-gradient(100% 140% at 50% 70%, rgba(177, 143, 110, 0) 49%, #b18f6e 50%) 50.625% 64.8%/13.25% 12.9%, linear-gradient(#b18f6e 72%, rgba(177, 143, 110, 0) 72%) 58.25% 64.8%/2% 12.9%, radial-gradient(200% 100% at 0 50%, rgba(104, 80, 56, 0) 48%, rgba(104, 80, 56, 0.4) 48.5% 49.5%, rgba(104, 80, 56, 0) 50%) 53% 68.6%/5% 17.7%, radial-gradient(6% 8% at 55% 60%, #c9b39c, rgba(201, 179, 156, 0) 50%), linear-gradient(50deg, rgba(188, 159, 131, 0) 63%, #bc9f83 80%) 50.625% 68.8%/13.25% 17.7%, radial-gradient(13.25% 17.7% at 50.625% 65.3%, #685038 45%, #614b34 49%, rgba(97, 75, 52, 0) 50%), radial-gradient(4% 1% at 50% 74.3%, #3e3021 30%, rgba(62, 48, 33, 0) 50%), radial-gradient(200% 200% at -15% 0, #685038 45%, rgba(104, 80, 56, 0) 50%) 48.2% 76.1%/11% 3%, radial-gradient(15% 3% at 39% 75.6%, #685038 45%, rgba(104, 80, 56, 0) 50%), radial-gradient(15% 2.8% at 42% 75%, #685038 45%, rgba(104, 80, 56, 0) 50%), radial-gradient(15% 2.3% at 44.8% 74.6%, #685038 45%, rgba(104, 80, 56, 0) 50%), linear-gradient(-7deg, #685038 20%, #bc9f83 24% 30.4%, #b18f6e 30.5%) 49.25% 0/38% 100%;
  background-repeat: no-repeat;
  margin: auto;
  max-width: 48em;
  position: relative;
}
.drawing:before, .drawing:after {
  content: "";
  display: block;
}
.drawing:before {
  padding-top: 75%;
  width: 100%;
}
.drawing:after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg