纯css布局实现啤酒瓶效果代码-html代码-BFW代码库

纯css布局实现啤酒瓶效果代码

代码语言：html

代码描述：纯css布局实现啤酒瓶效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
body {
  min-height: 400px;
  height: 100vh;
  position: relative;
  background-color: #ffa07a;
  text-align: center;
}
div {
  position: absolute;
  left: 50%;
  top: 50%;
}
div:before,
div:after {
  display: block;
  content: '';
  position: absolute;
}
#hot {
  width: 100px;
  height: 200px;
  margin-left: -50px;
  margin-top: -65px;
  background-color: #fff7b4;
  background-repeat: no-repeat, no-repeat, repeat-x, repeat-x;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(3em, #9acd32), color-stop(3em, transparent)), -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.1)), to(rgba(0,0,0,0.1))), radial-gradient(ellipse, #8bb92d 40%, rgba(255,255,255,0) 45%), -webkit-gradient(linear, left top, right top, color-stop(40%, transparent), color-stop(40%, #9acd32), color-stop(60%, #9acd32), color-stop(60%, transparent));
  background-image: linear-gradient(to bottom, #9acd32 3em, transparent 3em), linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), radial-gradient(ellipse, #8bb92d 40%, rgba(255,255,255,0) 45%), linear-gradient(to right, transparent 40%, #9acd32 40%, #9acd32 60%, transparent 60%);
  background-size: 100% 100%, 25% 38%, 10% 15%, 10% 8%;
  background-position: 0 0, 100% 70%, 50% 32%, 50% 30%;
  border: 2px solid #556b2f;
  border-radius: 40px;
  border-bottom-left-radius: 50px 15px;
  border-bottom-right-radius: 50px 15px;
  box-shadow: inset 1em -0.6em 0 -1em white, inset -1em -0.6em 0 -1em white, inset 0 -0.3em 0 0 rgba(85,107,47,0.3), inset 0 -0.5em 0 #e6dd7f, inset 0.6em 0 0 -0.1em rgba(0,0,0,0.2), inset 2.1em 0 0 rgba(0,0,0,0.1), inset -0.7em 0 0 rgba(0,0,0,0.12), inset 0 -2.2em 0 -1.5em rgba(85,107,47,0.5), inset 0 -7.2em 0 -5em #9acd32, inset 0 -7.7em 0 -5.2em #fff7b4, inset 0 -9.2em 0 -6.5em #9acd32, inset 0 -10em 0 -7em #fff7b4;
}
#hot:before {
  width: 46%;
  height: 20px;
  top: -72px;
  left: 50%;
  margin-left: calc(-23% - 2px);
  background-color: #556b2f;
  background-repeat: no-repeat;
  background-image: radial-gradient(ellipse, rgba(255,255,255,0.6) 40%, rgba(255,255,255,0) 45%);
  background-size: 40% 40%;
  background-position: 50% 128%;
  border-radius: 0.3em;
  border: 2px solid #556b2f;
  box-shadow: inset -0.3em 0 0 #556b2f, inset -0.6em 0 0 rgba(255,255,255,0.6), inset 0.8em 0 0 rgba(0,0,0,0.3);
  z-index: 2;
}
#hot:after {
  content: 'chile jalapeño';
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
  text-align: left;
  color: rgba(85,10.........完整代码请登录后点击上方下载按钮下载查看