somorovdcolors实现颜色卡片选择切换代码-html代码-BFW代码库

somorovdcolors实现颜色卡片选择切换代码

代码语言：html

所属分类：其他

代码描述：somorovdcolors实现颜色卡片选择切换代码

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


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

<head>

  <meta charset="UTF-8">
  <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/inter-ui.css">


  
<style>

:root {
  font-family: "Inter", sans-serif;
  --gutter: 6vh;
}

body, html {
  min-height: 100vh;
  overflow: hidden;
  cursor: pointer;
}

.app {
  height: 100vh;
  position: relative;
}

.palette {
  position: absolute;
  top: var(--gutter);
  left: var(--gutter);
  height: calc(100vh - var(--gutter) * 2);
  width: calc(100vw - var(--gutter) * 2);
  display: flex;
  flex-direction: column;
}
@media (orientation: landscape) {
  .palette {
    height: calc(100vw - var(--gutter) * 2);
    width: calc(100vh - var(--gutter) * 2);
    transform: rotate(90deg) translateY(-100%);
    transform-origin: 0 0;
  }
}

.palette__color {
  position: relative;
  flex: 1 0 auto;
  background: var(--c);
  z-index: calc(var(--total) - var(--ii));
  transform-origin: 100% 50%;
}
.palette__color::after {
  position: absolute;
  content: "";
  inset: 0;
  background: var(--c);
  box-shadow: 0 0 var(--gutter) var(--c);
  opacity: 0.5;
}

.palette__value {
  font-weight: 900;
  font-size: 3vh;
  position: absolute;
  top: calc(100% + .4ex);
  left: 0.5ex;
  transform: translateY(-120%);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  text-transform: uppercase;
  opacity: 0;
  color: var(--c);
}
.palette--mod .palette__value {
  transform: translateY(120%);
}
.palette__value span {
  position: absolute;
  right: calc(100% + 1ex);
  font-weight: 200;
  transform: translateX(1.5em);
  opacity: 0;
}

.palette--next .palette__color {
  transform: translateX(calc(100% + var(--gutter) * 1.5));
  -webkit-animation: 500ms slidein cubic-bezier(0.7, 0.3, 0, 1);
          animation: 500ms slidein cubic-bezier(0.7, 0.3, 0, 1);
  -webkit-animation-delay: calc(350ms - var(--i) * 350ms);
          animation-delay: calc(350ms - var(--i) * 350ms);
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
.palette--next .palette__value {
  opacity: 1;
  transform: translateY(0%);
  transition: 200ms opacity linear, 600ms transform cubic-bezier(0.3, 0.7, 0, 1);
  transition-delay: calc(400ms + var(--i) * 1.5 * var(--i) * 250ms);
}
.palette--next .palette__value span {
  transition: 200ms opacity ease, 300ms transform cubic-bezier(0.3, 0.7, 0, 1);
  transition-delay: calc(550ms + var(--i) * 1.5 * var(--i) * 250ms);
  transform: translateX(0);
  opacity: 1;
}

.palette--mod.palette--next .palette__color {
  -webkit-animation-delay: calc(var(--i) * 350ms);
          animation-delay: calc(var(--i) * 350ms);
  z-inde.........完整代码请登录后点击上方下载按钮下载查看