css3响应式在线代码,CSS3 响应式移动设备

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;

}