You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
120 lines
8.2 KiB
120 lines
8.2 KiB
5 months ago
|
/* normal */
|
||
|
|
body {
|
||
|
|
background: #eee;
|
||
|
|
color: #888; /* color is gray */
|
||
|
|
border: 1px solid; /*no*/
|
||
|
|
height: 20px; /* px */
|
||
|
|
padding: 6px; /*px*/
|
||
|
|
-webkit-animation: anim1 linear infinite;
|
||
|
|
}
|
||
|
|
.header, .footer span {
|
||
|
|
width: 100%;
|
||
|
|
height: 20px;
|
||
|
|
margin: 10px;
|
||
|
|
font-size: 28px; /*px*/
|
||
|
|
animation: anim2 linear infinite;
|
||
|
|
}
|
||
|
|
.main {
|
||
|
|
height: 400px;
|
||
|
|
}
|
||
|
|
.sidebar {
|
||
|
|
margin: 0;
|
||
|
|
height: 0px;
|
||
|
|
line-height: 0px; /*px*/
|
||
|
|
width: 40px;
|
||
|
|
-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12);
|
||
|
|
/* decimal */
|
||
|
|
padding: 24.5px 24px 0;
|
||
|
|
/* Data URI contains `px` */
|
||
|
|
background: 24px 12px url(data:image/png;base64,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);
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes anim1 {
|
||
|
|
0%, 100% {
|
||
|
|
-webkit-transform: none;
|
||
|
|
}
|
||
|
|
20%, 60% {
|
||
|
|
-webkit-transform: rotate(-45deg);
|
||
|
|
}
|
||
|
|
40%, 80% {
|
||
|
|
-webkit-transform: rotate(45deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes anim2 {
|
||
|
|
0% {
|
||
|
|
height: 75px; /*px*/
|
||
|
|
width: 75px;
|
||
|
|
border: 1px solid #ddd; /*no*/
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
height: 150px;
|
||
|
|
width: 150px;
|
||
|
|
border: 2px solid #ddd; /*no*/
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* media query */
|
||
|
|
@media only screen and (min-device-width: 241px) and (max-device-width: 360px) {
|
||
|
|
/* normal */
|
||
|
|
body {
|
||
|
|
background: #eee;
|
||
|
|
color: #888; /* color is gray */
|
||
|
|
border: 1px solid; /*no*/
|
||
|
|
height: 20px; /* px */
|
||
|
|
padding: 6px; /*px*/
|
||
|
|
-webkit-animation: anim3 linear infinite;
|
||
|
|
}
|
||
|
|
.header, .footer span {
|
||
|
|
width: 100%;
|
||
|
|
height: 20px;
|
||
|
|
margin: 10px;
|
||
|
|
font-size: 28px; /*px*/
|
||
|
|
animation: anim4 linear infinite;
|
||
|
|
}
|
||
|
|
.main {
|
||
|
|
height: 400px;
|
||
|
|
}
|
||
|
|
.sidebar {
|
||
|
|
margin: 0;
|
||
|
|
height: 0px;
|
||
|
|
line-height: 0px; /*px*/
|
||
|
|
width: 40px;
|
||
|
|
-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12);
|
||
|
|
/* decimal */
|
||
|
|
padding: 24.5px 24px 0;
|
||
|
|
/* Data URI contains `px` */
|
||
|
|
background: 24px 12px url(data:image/png;base64,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);
|
||
|
|
}
|
||
|
|
.footer {
|
||
|
|
height: 100px; /*px*/
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes anim3 {
|
||
|
|
0%, 100% {
|
||
|
|
-webkit-transform: none;
|
||
|
|
}
|
||
|
|
20%, 60% {
|
||
|
|
-webkit-transform: rotate(-45deg);
|
||
|
|
}
|
||
|
|
40%, 80% {
|
||
|
|
-webkit-transform: rotate(45deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes anim4 {
|
||
|
|
0% {
|
||
|
|
height: 75px;
|
||
|
|
width: 75px;
|
||
|
|
border: 1px solid #ddd; /*no*/
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
height: 150px;
|
||
|
|
width: 150px;
|
||
|
|
border: 2px solid #ddd; /*no*/
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer {
|
||
|
|
height: 100px; /*px*/
|
||
|
|
}
|