div+css实现水滴卡片排列悬浮效果代码-html代码-BFW代码库

div+css实现水滴卡片排列悬浮效果代码

代码语言：html

代码描述：div+css实现水滴卡片排列悬浮效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100&display=swap');
*{
  padding:0;
  margin:0;
  box-sizing:border-box;
  font-family: 'Poppins', sans-serif;
 } 
body{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:100vh;
  background:#eff0f4;
 } 
.container{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:40px 60px;
  padding: 50px 0;
 } 
.container .drop{
  position:relative;
  width:350px;
  height:350px;
  box-shadow:inset 20px 20px 20px rgba(0,0,0, 0.05), 
    25px 35px 20px rgba(0,0,0, 0.05), 
    25px 30px 30px rgba(0,0,0, 0.05), 
    inset -20px -20px 25px rgba(255,255,255,0.9); 
  transition:0.5s ease-in-out;
  display:flex;
  justify-content:center;
  align-items:center;
  }
.container .drop:nth-child(1){
  border-radius: 47% 53% 70% 30%/30% 43% 57% 70%;
  }
.container .drop:nth-child(2){
  border-radius: 61% 39% 52% 48%/44% 59% 41% 56%;
  }
.container .drop:nth-child(3){
  border-radius: 35% 65% 31% 69%/57% 59% 41% 43%;
  }
.container .drop:hover{
  border-radius:50%;
 } 
.container .drop::before{
  content:'';
  top:50px;
  left:85px;
  position:absolute;
  width:35px;
  height:35px;
  background:#fff;
  border-radius:50%;
  opacity:0.9;
  }
.container .drop::after{
  content:'';
  top:90px;
  left:110px;
  position:absolute;
  width:15px;
  height:15px;
  background:#fff;
  border-radius:50%;
  opacity:0.9;
  }
.container .drop .content{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  text-align:center;
  padding:40px;
  gap:15px;
  }
.container .drop .content h2{
  position:relative;
  width:80px;
  height:80.........完整代码请登录后点击上方下载按钮下载查看