彩虹折叠多层面板悬浮效果-html代码-BFW代码库

彩虹折叠多层面板悬浮效果

代码语言：html

所属分类：悬停

代码描述：彩虹折叠多层面板悬浮效果，利用css的shadow属性进行设置实现

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
.card {
  background-color: var(--background);
  display: block;
  width: 300px;
  min-height: 90px;
  border: 3px solid var(--primary);
  padding: 15px;
  margin: calc(50vh - 30px) auto 0 auto;
  box-shadow: 10px -10px 0 -3px var(--background), 10px -10px var(--green),
        20px -20px 0 -3px var(--background), 20px -20px var(--yellow), 
        30px -30px 0 -3px var(--background), 30px -30px var(--orange), 
        40px -40px 0 -3px var(--background), 40px -40px var(--red); 
  transition: box-shadow 1s, top 1s, left 1s;
  position: relative;
  top: 0;
  left: 0;
  cursor: pointer;
}

.card:hover {
  top: -40px;
  left: 40px;
  box-shadow: 0 0 0 -3px var(--background), 0 0 0 0 var(--green),
      0 0 0 -3px var(--background), 0 0 0 0  var(--yellow),
      0 0 0 -3px var(--background), 0 0 0 0  var(--orange),
      0 0 0 -3px  var(--background), 0 0 0 0  var(--red);
}









:root {
  --p.........完整代码请登录后点击上方下载按钮下载查看