css实现两种不同光照下晶莹剔透水滴效果代码-html代码-BFW代码库

css实现两种不同光照下晶莹剔透水滴效果代码

代码语言：html

代码描述：css实现两种不同光照下晶莹剔透水滴效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
main {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  /* padding: 10px; */
  width: 400px;
  height: 400px;
  background-color: hsl(210,100%,50%);
  /* TODO: gradient */
}

.drop {
  background-color: #54abfb;  /* TODO: can we not use this? */
  opacity: 0.8;
  position: absolute;
  left: 100px;
  top: 100px;
  width: 200px;
  height: 200px;
  border: 2px solid #3d93ff;
  border-radius: 51% 49% 48% 52% / 62% 44% 56% 38%;
}

.drop:before {
  /* controls the shape of the droplet */
  content: "";
  background-color: #318cfe; /* TODO: can we not use this? */
  position: absolute;
  width: 100%;
  height: 100%;
  /* no border? */
  border-radius: 51% 49% 48% 52% / 62% 44% 56% 38%;
  /* multiple box shadows! */
  box-shadow:
    -20px 30px 16px #1b6cfb,
    -40px 60px 32px #1b6cfb,
    inset -6px 6px 10px #1b6cfb,
    inset 2px 6px 10px #1a74e5,
    inset 20px -20px 22px #ffffff,
    inset 40px -40px 44px #a8ceff;
}

.drop:after {
  /* the reflection of the bubble */
  content: "";
  background-color: #e6fdfb; /* Needed, could be translucent */
  opacity: 0.8; /* I think this covers that */
  position: absolute;
  /* TODO: relative units */
  left: 130px;
  top: 40px;
  width: 40px;
  height: 40px;
  border-radius: 44% 56% 46% 54% / 36% 50% 50% 64%;
  /* box shadow acts as a reflection */
  /* it will be down and to the right */
  /* it will be sharp (blur_radius = 0) */
  /* it will be smaller that the box (spread_radius = scale?) */
  /* TODO: why is it lighter than the original? */
  /* xoff yoff blur_radius spread_radius_opt color */
  box-shadow: 16px 40px 0 -10px white;
}

.dev {
    background-color: hsl(80,100%,50%);
}

.dev .drop {
 .........完整代码请登录后点击上方下载按钮下载查看