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 tra.........完整代码请登录后点击上方下载按钮下载查看