房间数量选择滑块动画效果-html代码-BFW代码库

代码语言：html
所属分类：选择器
代码描述：房间数量选择滑块动画效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<style>
[data-rooms="6"] {
  --wings-width: 425px;
  --front-width: 150px;
}
[data-rooms="6"] .house-wings {
  width: 425px;
  left: calc(50% - 212.5px);
}
[data-rooms="6"] .house-front {
  width: 150px;
  left: calc(50% - 75px);
}

[data-rooms="5"] {
  --wings-width: 355px;
  --front-width: 150px;
}
[data-rooms="5"] .house-wings {
  width: 355px;
  left: calc(50% - 177.5px);
}
[data-rooms="5"] .house-front {
  width: 150px;
  left: calc(50% - 75px);
}

[data-rooms="4"] {
  --wings-width: 300px;
  --front-width: 125px;
}
[data-rooms="4"] .house-wings {
  width: 300px;
  left: calc(50% - 150px);
}
[data-rooms="4"] .house-front {
  width: 125px;
  left: calc(50% - 62.5px);
}

[data-rooms="3"] {
  --wings-width: 240px;
  --front-width: 150px;
}
[data-rooms="3"] .house-wings {
  width: 240px;
  left: calc(50% - 120px);
}
[data-rooms="3"] .house-front {
  width: 150px;
  left: calc(50% - 75px);
}

.house {
  height: 225px;
  width: 520px;
}

.house-label {
  text-transform: uppercase;
  font-weight: bold;
  padding-left: calc(20px + 1ch);
  font-size: 25px;
  color: #224889;
  margin: 30px 0 5px;
  font-family: Arial Rounded MT Bold, Helvetica Neue, Helvetica, sans serif;
}
.house-label:before, .house-label:after {
  position: absolute;
  text-align: right;
  left: 0;
  top: 0;
  padding: 0 .5ch;
  will-change: transform;
}
.house-label:before {
  content: attr(data-prev-rooms);
}
.house-label:after {
  content: attr(data-rooms);
}
.house-label[data-rooms="6"][data-rooms-delta^="-"]:before {
  -webkit-animation: prev-label-up-6 500ms cubic-bezier(0.1, 0, 0.3, 1) both;
          animation: prev-label-up-6 500ms cubic-bezier(0.1, 0, 0.3, 1) both;
}
.house-label[data-rooms="6"][data-rooms-delta^="-"]:after {
  -webkit-animation: label-up-6 1000ms cubic-bezier(0.1, 0, 0.3, 1) both;
          animation: label-up-6 1000ms cubic-bezier(0.1, 0, 0.3, 1) both;
}
.house-label[data-rooms="6"]:not([data-rooms-delta^="-"]):before {
  -webkit-animation: prev-label-down-6 500ms 70ms cubic-bezier(0.1, 0, 0.3, 1) both;
          animation: prev-label-down-6 500ms 70ms cubic-bezier(0.1, 0, 0.3, 1) both;
}
.house-label[data-rooms="6"]:not([data-rooms-delta^="-"]):after {
  -webkit-animation: label-down-6 1000ms 70ms cubic-bezier(0.1, 0, 0.3, 1) both;
          animation: label-down-6 1000ms 70ms cubic-bezier(0.1, 0, 0.3, 1) both;
}
@-webkit-keyframes prev-label-up-6 {
  from {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
  to {
    -webkit-transform: translateY(-100%) scale(1.5);
            transform: translateY(-100%) scale(1.5);
    opacity: 0;
  }
}
@keyframes prev-label-up-6 {
  from {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
  to {
    -webkit-transform: translateY(-100%) scale(1.5);
            transform: translateY(-100%) scale(1.5);
    opacity: 0;
  }
}
@-webkit-keyframes prev-label-down-6 {
  from {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
  to {
    -webkit-transform: translateY(100%) scale(1.5);
            transform: translateY(100%) scale(1.5);
    opacity: 0;
  }
}
@keyframes prev-label-down-6 {
  from {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
  to {
    -webkit-transform: translateY(100%) scale(1.5);
            transform: translateY(100%) scale(1.5);
    opacity: 0;
  }
}
@-webkit-keyframes label-up-6 {
  from {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
    opacity: 0;
  }
  50% {
    -webkit-transform: translateY(0) scale(1.5);
            transform: translateY(0) scale(1.5);
    opacity: 1;
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes label-up-6 {
  from {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
    opacity: 0;
  }
  50% {
    -webkit-transform: translateY(0) scale(1.5);
            transform: translateY(0) scale(1.5);
    opacity: 1;
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@-webkit-keyframes label-down-6 {
  from {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
    opacity: 0;
  }
  50% {
    -webkit-transform: translateY(0) scale(1.5);
            transform: translateY(0) scale(1.5);
    opacity: 1;
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes label-down-6 {
  from {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
    opacity: 0;
  }
  50% {
    -webkit-transform: translateY(0) scale(1.5);
            transform: translateY(0) scale(1.5);
    opacity: 1;
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
.house-label[data-rooms="5"][data-rooms-delta^="-"]:before {
  -webkit-animation: prev-label-up-5 500ms cubic-bezier(0.1, 0, 0.3, 1) both;
          animation: prev-label-up-5 500ms cubic-bezier(0.1, 0, 0.3, 1) both;
}
.house-label[data-rooms="5"][data-rooms-delta^="-"]:after {
  -webkit-animation: label-up-5 1000ms cubic-bezier(0.1, 0, 0.3, 1) both;
          animation: label-up-5 1000ms cubic-bezier(0.1, 0, 0.3, 1) both;
}
.house-label[data-rooms="5"]:not([data-rooms-delta^="-"]):before {
  -webkit-animation: prev-label-down-5 500ms 70ms cubic-bezier(0.1, 0, 0.3, 1) both;
          animation: prev-label-down-5 500ms 70ms cubic-bezier(0.1, 0, 0.3, 1) both;
}
.house-label[data-rooms="5"]:not([data-rooms-delta^="-"]):after {
  -webkit-animation: label-down-5 1000ms 70ms cubic-bezier(0.1, 0, 0.3, 1) both;
          animation: label-down-5 1000ms 70ms cubic-bezier(0.1, 0, 0.3, 1) both;
}
@-webkit-keyframes prev-label-up-5 {
  from {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
  to {
    -webkit-transform: translateY(-100%) scale(1.5);
            transform: translateY(-100%) scale(1.5);
    opacity: 0;
  }
}
@keyframes prev-label-up-5 {
  from {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
  to {
    -webkit-transform: translateY(-100%) scale(1.5);
            transform: translateY(-100%) scale(1.5);
    opacity: 0;
  }
}
@-webkit-keyframes prev-label-down-5 {
  from {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
  to {
    -webkit-transform: translateY(100%) scale(1.5);
            transform: translateY(100%) scale(1.5);
    opacity: 0;
  }
}
@keyframes prev-label-down-5 {
  from {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
  to {
    -webkit-transform: translateY(100%) scale(1.5);
            transform: translateY(100%) scale(1.5);
    opacity: 0;
  }
}
@-webkit-keyframes label-up-5 {
  from {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
    opacity: 0;
  }
  50% {
    -webkit-transform: translateY(0) scale(1.5);
            transform: translateY(0) scale(1.5);
    opacity: 1;
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes label-up-5 {
  from {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
    opacity: 0;
  }
  50% {
    -webkit-transform: translateY(0) scale(1.5);
            transform: translateY(0) scale(1.5);
    opacity: 1;
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@-webkit-keyframes label-down-5 {
  from {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
    opacity: 0;
  }
  50% {
    -webkit-transform: translateY(0) scale(1.5);
            transform: translateY(0) scale(1.5);
    opacity: 1;
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes label-down-5 {
  from {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
    opacity: 0;
  }
  50% {
    -webkit-transform: translateY(0) scale(1.5);
            transform: translateY(0) scale(1.5);
    opacity: 1;
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
.house-label[data-rooms="4"][data-rooms-delta^="-"]:before {
  -webkit-animation: prev-label-up-4 500ms cubic-bezier(0.1, 0, 0.3, 1) both;
          animation: prev-label-up-4 500ms cubic-bezier(0.1, 0, 0.3, 1) both;
}
.house-label[data-rooms="4"][data-rooms-delta^="-"]:after {
  -webkit-animation: label-up-4 1000ms cubic-bezier(0.1, 0, 0.3, 1) both;
          animation: label-up-4 1000ms cubic-bezier(0.1, 0, 0.3, 1) both;
}
.house-label[data-rooms="4"]:not([data-rooms-delta^="-"]):before {
  -webkit-animation: prev-label-down-4 500ms 70ms cubic-bezier(0.1, 0, 0.3, 1) both;
          animation: prev-label-down-4 500ms 70ms cubic-bezier(0.1, 0, 0.3, 1) both;
}
.house-label[data-rooms="4"]:not([data-rooms-delta^="-"]):after {
  -webkit-animation: label-down-4 1000ms 70ms cubic-bezier(0.1, 0, 0.3, 1) both;
          animation: label-down-4 1000ms 70ms cubic-bezier(0.1, 0, 0.3, 1) both;
}
@-webkit-keyframes prev-label-up-4 {
  from {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
  to {
    -webkit-transform: translateY(-100%) scale(1.5);
            transform: translateY(-100%) scale(1.5);
    opacity: 0;
  }
}
@keyframes prev-label-up-4 {
  from {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
  to {
    -webkit-transform: translateY(-100%) scale(1.5);
            transform: translateY(-100%) scale(1.5);
    opacity: 0;
  }
}
@-webkit-keyframes prev-label-down-4 {
  from {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
  to {
    -webkit-transform: translateY(100%) scale(1.5);
            transform: translateY(100%) scale(1.5);
    opacity: 0;
  }
}
@keyframes prev-label-down-4 {
  from {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
  to {
    -webkit-transform: translateY(100%) scale(1.5);
            transform: translateY(100%) scale(1.5);
    opacity: 0;
  }
}
@-webkit-keyframes label-up-4 {
  from {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
    opacity: 0;
  }
  50% {
    -webkit-transform: translateY(0) scale(1.5);
            transform: translateY(0) scale(1.5);
    opacity: 1;
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes label-up-4 {
  from {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
    opacity: 0;
  }
  50% {
    -webkit-transform: translateY(0) scale(1.5);
            transform: translateY(0) scale(1.5);
    opacity: 1;
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@-webkit-keyframes label-down-4 {
  from {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
    opacity: 0;
  }
  50% {
    -webkit-transform: translateY(0) scale(1.5);
            transform: translateY(0) scale(1.5);
    opacity: 1;
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes label-down-4 {
  from {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
    opacity: 0;
  }
  50% {
    -webkit-transform: translateY(0) scale(1.5);
            transform: translateY(0) scale(1.5);
    opacity: 1;
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
.house-label[data-rooms="3"][data-rooms-delta^="-"]:before {
  -webkit-animation: prev-label-up-3 500ms cubic-bezier(0.1, 0, 0.3, 1) both;
          animation: prev-label-up-3 500ms cubic-bezier(0.1, 0, 0.3, 1) both;
}
.house-label[data-rooms.........完整代码请登录后点击上方下载按钮下载查看