单个div+css实现一个桌灯台灯效果代码

代码语言:html

所属分类:布局界面

代码描述:单个div+css实现一个桌灯台灯效果代码

代码标签: 一个 桌灯 台灯 效果

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
<style>
body {
  font-size: 10px;
  background: pink;
  background: pink;
  font-family: "Yeseva One", cursive;
}

div {
  width: 100em;
  height: 55em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
  background: radial-gradient(98% 98% at 50% 50%, rgba(51, 51, 51, 0.15), rgba(0, 0, 0, 0) 52%) 39% 85%/15em 4em, radial-gradient(98% 98% at 50% 50%, #333333 50%, rgba(0, 0, 0, 0) 52%) 54.5% 78.6%/1.4em 0.3em, linear-gradient(to right, #d79d61 34%, #a35d21, #8e4e1d) 54.5% 79.5%/1.2em 0.7em, linear-gradient(to right, pink, pink) 64% 14%/2em 2em, linear-gradient(to right, pink 50%, rgba(0, 0, 0, 0.2) 53%) 61.5% 27.3%/1em 4em, radial-gradient(98% 98% at 50% 50%, rgba(183, 115, 52, 0) 40%, rgba(147, 82, 30, 0.6) 50%, transparent 52%) 50% 81.5%/17em 3em, radial-gradient(98% 98% at 50% 50%, rgba(255, 0, 0, 0), rgba(51, 51, 51, 0.1) 50%, transparent 52%) 50% 81.5%/17em 3em, radial-gradient(98% 98% at 50% 50%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.1) 50%, transparent 52%) 50% 82%/17em 3em, radial-gradient(98% 98% at 50% 50%, rgba(183, 115, 52, 0.1) 40%, rgba(255, 255, 255, 0.1) 50%, transparent 52%) 50% 81.5%/17em 3em, radial-gradient(98% 98% at 50% 50%, rgba(183, 115, 52, 0) 40%, rgba(147, 82, 30, 0.5) 50%, transparent 52%) 50% 81.5%/17em 3em, radial-gradient(98% 98% at 50% 50%, #b77334 50%, rgba(0, 0, 0, 0) 52%) 50% 81.5%/17em 3em, radial-gradient(98% 98% at 50% 0%, transparent 50%, pink 52%) 50% 89%/17.2em 4em, linear-gradient(to right, #D2904D 5%, #a35d21 30%, #a35d21, #D2904D, #8e4e1d) 50% 85.2%/17em 3.5em, linear-gradient(to right, #d79d61 34%, #a35d21 35%, #a35d21, #d79d61, #8e4e1d) 50% 15%/1.4em 1.6em, radial-gradient(5.........完整代码请登录后点击上方下载按钮下载查看

网友评论0