CSS
语言:
CSSSCSS
确定
.device {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 70%;
margin: 0 auto;
border: 2px solid #ebcb63;
border-radius: 6px;
box-shadow: 10px 10px 0 -2px #202126, 10px 10px 0 rgba(255, 255, 255, 0.1);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-animation: morphDevice 10s infinite cubic-bezier(1, 0.015, 0.295, 1.225) forwards;
animation: morphDevice 10s infinite cubic-bezier(1, 0.015, 0.295, 1.225) forwards;
}
.device figcaption {
position: absolute;
top: 15px;
left: 15px;
width: 10px;
height: 10px;
background: rgba(255, 255, 255, 0.1);
box-shadow: 15px 0 0 rgba(255, 255, 255, 0.1), 30px 0 0 rgba(255, 255, 255, 0.1);
border-radius: 50%;
-webkit-animation: morphButtons 10s infinite cubic-bezier(1, 0.015, 0.295, 1.225) forwards;
animation: morphButtons 10s infinite cubic-bezier(1, 0.015, 0.295, 1.225) forwards;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
@-webkit-keyframes morphDevice {
0%, 15% {
width: 100%;
padding-top: 70%;
border-color: #ebcb63;
box-shadow: 10px 10px 0 -2px #202126, 10px 10px 0 rgba(255, 255, 255, 0.1);
-webkit-transform: rotate(0);
transform: rotate(0);
}
25%,
40% {
width: 70%;
padding-top: 55%;
border-color: #4b8ac4;
box-shadow: 10px -10px 0 -2px #202126, 10px -10px 0 rgba(255, 255, 255, 0.1);
-webkit-transform: rotate(90deg) translateX(30px);
transform: rotate(90deg) translateX(30px);
}
50%,
65% {
width: 25%;
padding-top: 40%;
border-color: #ece9f2;
box-shadow: -8px -8px 0 -2px #202126, -8px -8px 0 rgba(255, 255, 255, 0.1);
-webkit-transform: rotate(180deg) translateY(-40px);
transform: rotate(180deg) translateY(-40px);
}
75%,
90% {
width: 55%;
padding-top: 70%;
border-color: #57c39f;
box-shadow: -10px 10px 0 -2px #202126, -10px 10px 0 rgba(255, 255, 255, 0.1);
-webkit-transform: rotate(270deg) translateX(0);
transform: rotate(270deg) translateX(0);
}
100% {
width: 100%;
padding-top: 70%;
border-color: #ebcb63;
box-shadow: 10px 10px 0 -2px #202126, 10px 10px 0 rgba(255, 255, 255, 0.1);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes morphDevice {
0%, 15% {
width: 100%;
padding-top: 70%;
border-color: #ebcb63;
box-shadow: 10px 10px 0 -2px #202126, 10px 10px 0 rgba(255, 255, 255, 0.1);
-webkit-transform: rotate(0);
transform: rotate(0);
}
25%,
40% {
width: 70%;
padding-top: 55%;
border-color: #4b8ac4;
box-shadow: 10px -10px 0 -2px #202126, 10px -10px 0 rgba(255, 255, 255, 0.1);
-webkit-transform: rotate(90deg) translateX(30px);
transform: rotate(90deg) translateX(30px);
}
50%,
65% {
width: 25%;
padding-top: 40%;
border-color: #ece9f2;
box-shadow: -8px -8px 0 -2px #202126, -8px -8px 0 rgba(255, 255, 255, 0.1);
-webkit-transform: rotate(180deg) translateY(-40px);
transform: rotate(180deg) translateY(-40px);
}
75%,
90% {
width: 55%;
padding-top: 70%;
border-color: #57c39f;
box-shadow: -10px 10px 0 -2px #202126, -10px 10px 0 rgba(255, 255, 255, 0.1);
-webkit-transform: rotate(270deg) translateX(0);
transform: rotate(270deg) translateX(0);
}
100% {
width: 100%;
padding-top: 70%;
border-color: #ebcb63;
box-shadow: 10px 10px 0 -2px #202126, 10px 10px 0 rgba(255, 255, 255, 0.1);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes morphButtons {
0%, 15%, 100% {
top: 15px;
left: 15px;
margin-left: -5px;
background: #ebcb63;
box-shadow: 15px 0 0 rgba(255, 255, 255, 0.1), 30px 0 0 rgba(255, 255, 255, 0.1);
}
25%,
40% {
top: 50%;
left: 100%;
width: 10px;
height: 10px;
margin-top: -5px;
margin-left: -25px;
background: #4b8ac4;
box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.05), 0 0 0 100px transparent;
}
50%,
65% {
top: 10px;
left: 50%;
width: 8px;
height: 8px;
margin-top: 0;
margin-left: -4px;
background: #ece9f2;
box-shadow: 0 0 0 50px transparent, 0 0 0 rgba(255, 255, 255, 0.05);
}
75%,
90% {
top: 100%;
left: 50%;
width: 10px;
height: 10px;
margin-top: -25px;
margin-left: -5px;
background: #57c39f;
box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.05), 0 0 0 100px transparent;
}
}
@keyframes morphButtons {
0%, 15%, 100% {
top: 15px;
left: 15px;
margin-left: -5px;
background: #ebcb63;
box-shadow: 15px 0 0 rgba(255, 255, 255, 0.1), 30px 0 0 rgba(255, 255, 255, 0.1);
}
25%,
40% {
top: 50%;
left: 100%;
width: 10px;
height: 10px;
margin-top: -5px;
margin-left: -25px;
background: #4b8ac4;
box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.05), 0 0 0 100px transparent;
}
50%,
65% {
top: 10px;
left: 50%;
width: 8px;
height: 8px;
margin-top: 0;
margin-left: -4px;
background: #ece9f2;
box-shadow: 0 0 0 50px transparent, 0 0 0 rgba(255, 255, 255, 0.05);
}
75%,
90% {
top: 100%;
left: 50%;
width: 10px;
height: 10px;
margin-top: -25px;
margin-left: -5px;
background: #57c39f;
box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.05), 0 0 0 100px transparent;
}
}
body {
height: 100%;
background: #202126;
}
.absolute-center {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
max-width: 300px;
height: 260px;
}
.ir {
font: 0/0 a;
text-shadow: none;
color: transparent;
}