房间数量选择滑块动画效果
代码语言：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="3"][data-rooms-delta^="-"]:after {
-webkit-animation: label-up-3 1000ms cubic-bezier(0.1, 0, 0.3, 1) both;
animation: label-up-3 1000ms cubic-bezier(0.1, 0, 0.3, 1) both;
}
.house-label[data-rooms="3"]:not([data-rooms-delta^="-"]):before {
-webkit-animation: prev-label-down-3 500ms 70ms cubic-bezier(0.1, 0, 0.3, 1) both;
animation: prev-label-down-3 500ms 70ms cubic-bezier(0.1, 0, 0.3, 1) both;
}
.house-label[data-rooms="3"]:not([data-rooms-delta^="-"]):after {
-webkit-animation: label-down-3 1000ms 70ms cubic-bezier(0.1, 0, 0.3, 1) both;
animation: label-down-3 1000ms 70ms cubic-bezier(0.1, 0, 0.3, 1) both;
}
@-webkit-keyframes prev-label-up-3 {
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-3 {
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-3 {
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-3 {
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-3 {
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-3 {
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-3 {
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-3 {
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-wings {
position: absolute;
bottom: 0;
height: 125px;
}
.house-wings:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
border: 5px solid #224889;
box-shadow: inset 0 15px #E1EAFF;
}
.house-wings:after {
position: absolute;
bottom: 0;
left: 0;
height: 5px;
width: 100%;
background-color: #224889;
-webkit-transform: scaleX(1.2);
transform: scaleX(1.2);
}
.house-wings > .house-roof {
height: 65px;
width: calc(100% + 40px);
left: -20px;
border-bottom: 5px solid #224889;
position: absolute;
bottom: 100%;
}
.house-wings > .house-roof:before, .house-wings > .house-roof:after {
position: absolute;
height: 100%;
width: 50%;
background-color: #A6CFFF;
border: 5px solid #224889;
border-bottom: none;
}
.house-wings > .house-roof:before {
left: 0;
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: skewX(-30deg);
transform: skewX(-30deg);
border-right: none;
}
.house-wings > .house-roof:after {
right: 0;
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: skewX(30deg);
transform: skewX(30deg);
border-left: none;
}
.house-wings .house-ledge {
position: absolute;
bottom: -15px;
width: 100%;
height: 15px;
border: 5px solid #224889;
background-color: #79AAFF;
}
.house-facade {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 15px 0 rgba(123, 163, 255, 0.2);
}
.house-facade:before, .house-facade:after {
position: absolute;
height: 100%;
width: 50%;
background-color: #fff;
top: 0;
border-top: 5px solid #224889;
box-shadow: inset 0 calc(var(--front-width) / 6) #E1EAFF;
}
.house-facade:before {
left: 0;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: skewY(-40deg);
transform: skewY(-40deg);
border-left: 5px solid #224889;
}
.house-facade:after {
right: 0;
-webkit-transform-origin: top right;
transform-origin: top right;
-webkit-transform: skewY(40deg);
transform: skewY(40deg);
border-right: 5px solid #224889;
}
@-webkit-keyframes wing-roof-6-move {
from {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
}
25% {
-webkit-transform: translateY(-10px) rotate(-5deg);
transform: translateY(-10px) rotate(-5deg);
}
50% {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: none;
transform: none;
}
51% {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
}
75% {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: translateY(-5px) rotate(2deg);
transform: translateY(-5px) rotate(2deg);
}
to {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: none;
transform: none;
}
}
@keyframes wing-roof-6-move {
from {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
}
25% {
-webkit-transform: translateY(-10px) rotate(-5deg);
transform: translateY(-10px) rotate(-5deg);
}
50% {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: none;
transform: none;
}
51% {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
}
75% {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: translateY(-5px) rotate(2deg);
transform: translateY(-5px) rotate(2deg);
}
to {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: none;
transform: none;
}
}
@-webkit-keyframes wing-roof-5-move {
from {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
}
25% {
-webkit-transform: translateY(-20px) rotate(10deg);
transform: translateY(-20px) rotate(10deg);
}
50% {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: none;
transform: none;
}
51% {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
}
75% {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: translateY(-10px) rotate(-2deg);
transform: translateY(-10px) rotate(-2deg);
}
to {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: none;
transform: none;
}
}
@keyframes wing-roof-5-move {
from {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
}
25% {
-webkit-transform: translateY(-20px) rotate(10deg);
transform: translateY(-20px) rotate(10deg);
}
50% {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: none;
transform: none;
}
51% {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
}
75% {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: translateY(-10px) rotate(-2deg);
transform: translateY(-10px) rotate(-2deg);
}
to {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: none;
transform: none;
}
}
@-webkit-keyframes wing-roof-4-move {
from {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
}
25% {
-webkit-transform: translateY(-15px) rotate(-10deg);
transform: translateY(-15px) rotate(-10deg);
}
50% {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: none;
transform: none;
}
51% {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
}
75% {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: translateY(-10px) rotate(2deg);
transform: translateY(-10px) rotate(2deg);
}
to {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: none;
transform: none;
}
}
@keyframes wing-roof-4-move {
from {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
}
25% {
-webkit-transform: translateY(-15px) rotate(-10deg);
transform: translateY(-15px) rotate(-10deg);
}
50% {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: none;
transform: none;
}
51% {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
}
75% {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: translateY(-10px) rotate(2deg);
transform: translateY(-10px) rotate(2deg);
}
to {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: none;
transform: none;
}
}
@-webkit-keyframes wing-roof-3-move {
from {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
}
25% {
-webkit-transform: translateY(-20px) rotate(10deg);
transform: translateY(-20px) rotate(10deg);
}
50% {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: none;
transform: none;
}
51% {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
}
75% {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: translateY(-10px) rotate(-2deg);
transform: translateY(-10px) rotate(-2deg);
}
to {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: none;
transform: none;
}
}
@keyframes wing-roof-3-move {
from {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
}
25% {
-webkit-transform: translateY(-20px) rotate(10deg);
transform: translateY(-20px) rotate(10deg);
}
50% {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: none;
transform: none;
}
51% {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
}
75% {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: translateY(-10px) rotate(-2deg);
transform: translateY(-10px) rotate(-2deg);
}
to {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: none;
transform: none;
}
}
@-webkit-keyframes front-roof-6-move {
from {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
}
25% {
-webkit-transform: translateY(-5px) rotate(5deg);
transform: translateY(-5px) rotate(5deg);
}
50% {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: none;
transform: none;
}
51% {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
}
75% {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: translateY(-2px) rotate(-1deg);
transform: translateY(-2px) rotate(-1deg);
}
to {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: none;
transform: none;
}
}
@keyframes front-roof-6-move {
from {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
}
25% {
-webkit-transform: translateY(-5px) rotate(5deg);
transform: translateY(-5px) rotate(5deg);
}
50% {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: none;
transform: none;
}
51% {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
}
75% {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: translateY(-2px) rotate(-1deg);
transform: translateY(-2px) rotate(-1deg);
}
to {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: none;
transform: none;
}
}
@-webkit-keyframes front-roof-5-move {
from {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
}
25% {
-webkit-transform: translateY(-10px) rotate(-5deg);
transform: translateY(-10px) rotate(-5deg);
}
50% {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: none;
transform: none;
}
51% {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
}
75% {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: translateY(-5px) rotate(1deg);
transform: translateY(-5px) rotate(1deg);
}
to {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: none;
transform: none;
}
}
@keyframes front-roof-5-move {
from {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
}
25% {
-webkit-transform: translateY(-10px) rotate(-5deg);
transform: translateY(-10px) rotate(-5deg);
}
50% {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: none;
transform: none;
}
51% {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
}
75% {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: translateY(-5px) rotate(1deg);
transform: translateY(-5px) rotate(1deg);
}
to {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: none;
transform: none;
}
}
@-webkit-keyframes front-roof-4-move {
from {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
}
25% {
-webkit-transform: translateY(-5px) rotate(10deg);
transform: translateY(-5px) rotate(10deg);
}
50% {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: none;
transform: none;
}
51% {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
}
75% {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: translateY(-2px) rotate(-2deg);
transform: translateY(-2px) rotate(-2deg);
}
to {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: none;
transform: none;
}
}
@keyframes front-roof-4-move {
from {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
}
25% {
-webkit-transform: translateY(-5px) rotate(10deg);
transform: translateY(-5px) rotate(10deg);
}
50% {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: none;
transform: none;
}
51% {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
}
75% {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: translateY(-2px) rotate(-2deg);
transform: translateY(-2px) rotate(-2deg);
}
to {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: none;
transform: none;
}
}
@-webkit-keyframes front-roof-3-move {
from {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
}
25% {
-webkit-transform: translateY(-10px) rotate(-5deg);
transform: translateY(-10px) rotate(-5deg);
}
50% {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: none;
transform: none;
}
51% {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
}
75% {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: translateY(-5px) rotate(2deg);
transform: translateY(-5px) rotate(2deg);
}
to {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: none;
transform: none;
}
}
@keyframes front-roof-3-move {
from {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
}
25% {
-webkit-transform: translateY(-10px) rotate(-5deg);
transform: translateY(-10px) rotate(-5deg);
}
50% {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: none;
transform: none;
}
51% {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
}
75% {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: translateY(-5px) rotate(2deg);
transform: translateY(-5px) rotate(2deg);
}
to {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: none;
transform: none;
}
}
@-webkit-keyframes house-6-move {
from {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
25% {
-webkit-transform: scale(0.95, 1.05);
transform: scale(0.95, 1.05);
}
50% {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: none;
transform: none;
}
51% {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
75% {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: scale(0.98, 1.02);
transform: scale(0.98, 1.02);
}
to {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: none;
transform: none;
}
}
@keyframes house-6-move {
from {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
25% {
-webkit-transform: scale(0.95, 1.05);
transform: scale(0.95, 1.05);
}
50% {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: none;
transform: none;
}
51% {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
75% {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: scale(0.98, 1.02);
transform: scale(0.98, 1.02);
}
to {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: none;
transform: none;
}
}
@-webkit-keyframes house-5-move {
from {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
25% {
-webkit-transform: scale(0.9, 1.2);
transform: scale(0.9, 1.2);
}
50% {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: none;
transform: none;
}
51% {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
75% {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: scale(0.95, 1.05);
transform: scale(0.95, 1.05);
}
to {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: none;
transform: none;
}
}
@keyframes house-5-move {
from {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
25% {
-webkit-transform: scale(0.9, 1.2);
transform: scale(0.9, 1.2);
}
50% {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: none;
transform: none;
}
51% {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
75% {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: scale(0.95, 1.05);
transform: scale(0.95, 1.05);
}
to {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: none;
transform: none;
}
}
@-webkit-keyframes house-4-move {
from {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
25% {
-webkit-transform: scale(0.9, 1.2);
transform: scale(0.9, 1.2);
}
50% {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: none;
transform: none;
}
51% {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
75% {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: scale(0.95, 1.05);
transform: scale(0.95, 1.05);
}
to {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: none;
transform: none;
}
}
@keyframes house-4-move {
from {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
25% {
-webkit-transform: scale(0.9, 1.2);
transform: scale(0.9, 1.2);
}
50% {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: none;
transform: none;
}
51% {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
75% {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: scale(0.95, 1.05);
transform: scale(0.95, 1.05);
}
to {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: none;
transform: none;
}
}
@-webkit-keyframes house-3-move {
from {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
25% {
-webkit-transform: scale(0.9, 1.2);
transform: scale(0.9, 1.2);
}
50% {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: none;
transform: none;
}
51% {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
75% {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: scale(0.95, 1.0.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0