css布局实现草坪上的矿泉水瓶效果代码-html代码-BFW代码库

css布局实现草坪上的矿泉水瓶效果代码

代码语言：html

代码描述：css布局实现草坪上的矿泉水瓶效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
* {
	border: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
:root {
	font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320));
}
body {
	background: url(//repo.bfw.wiki/bfwrepo/image/6008e1dfb5d12.png) 0 0 / 20em 20em;
	display: flex;
	font: 1em/1.5 sans-serif;
	height: 100vh;
	padding: 1.5em 0;
}
.wb, .wb__cap, .wb__mouth, .wb__neck, .wb__top {
	margin: auto;
}
.wb {
	position: relative;
	width: 9em;
	height: 28em;
}
.wb__cap {
	background:
		linear-gradient(90deg,#001329aa,#00132900 33% 67%,#001329aa),
		radial-gradient(60% 8% at 50% 4%,#b6cafb,#b6cafb00 50%),
		linear-gradient(90deg,#5583f600 30%,#5583f6 50%,#5583f600 70%) 0 100% / 100% 0.2em,
		repeating-linear-gradient(90deg,#0000 0 0.1em,#0d4ef2 0.1em 0.2em,#0000 0.2em) 0 0.1em / 100% 0.7em,
		linear-gradient(#0b46da 0.1em,#0000 0.1em 0.2em,#0d4ef2 0.2em 0.6em,#0000 0.6em 0.7em,#0d4ef2 0.7em 0.8em,#0000 0.8em 1em,#0b46da 1em) 0 0.9em / 100% 1.25em,
		radial-gradient(40% 25% at 50% 90%,#b6cafb,#b6cafb00 50%),
		radial-gradient(40% 200% at 50% 90.........完整代码请登录后点击上方下载按钮下载查看