CSS

語言：

CSSSCSS

確定

#page-preloader {

background: #ffa805;

position: fixed;

left: 0;

top: 0;

right: 0;

bottom: 0;

z-index: 100500;

font-family: sans-serif;

-webkit-touch-callout: none;

-webkit-user-select: none;

-khtml-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

cursor: default; }

@media screen and (max-width: 500px) {

#page-preloader {

font-size: 75%; } }

#progressBar {

position: absolute;

bottom: -6.5em;

height: 1.5em;

width: 100%;

line-height: 1.5em;

background: rgba(255, 255, 255, 0.5);

text-align: center;

color: #03a0bf; }

#bar {

position: absolute;

top: 0;

left: 0;

height: 1.5em;

background: #fff;

z-index: -1; }

.text {

text-align: center;

font-size: 3em;

font-weight: normal;

color: #fcfcfc;

margin-bottom: 0.5em; }

.text span {

-webkit-animation: span 1s infinite ease;

-moz-animation: span 1s infinite ease;

-mos-animation: span 1s infinite ease;

-o-animation: span 1s infinite ease;

animation: span 1s infinite ease; }

.text span:nth-child(1) {

-webkit-animation-delay: 0s;

-moz-animation-delay: 0s;

-mos-animation-delay: 0s;

-o-animation-delay: 0s;

animation-delay: 0s; }

.text span:nth-child(2) {

-webkit-animation-delay: 0.15s;

-moz-animation-delay: 0.15s;

-mos-animation-delay: 0.15s;

-o-animation-delay: 0.15s;

animation-delay: 0.15s; }

.text span:nth-child(3) {

-webkit-animation-delay: 0.3s;

-moz-animation-delay: 0.3s;

-mos-animation-delay: 0.3s;

-o-animation-delay: 0.3s;

animation-delay: 0.3s; }

.text span:nth-child(4) {

-webkit-animation-delay: 0.45s;

-moz-animation-delay: 0.45s;

-mos-animation-delay: 0.45s;

-o-animation-delay: 0.45s;

animation-delay: 0.45s; }

.text span:nth-child(2) {

-webkit-animation-delay: 0.65s;

-moz-animation-delay: 0.65s;

-mos-animation-delay: 0.65s;

-o-animation-delay: 0.65s;

animation-delay: 0.65s; }

.text span:nth-child(5) {

-webkit-animation-delay: 0.85s;

-moz-animation-delay: 0.85s;

-mos-animation-delay: 0.85s;

-o-animation-delay: 0.85s;

animation-delay: 0.85s; }

.text span:nth-child(6) {

-webkit-animation-delay: 1s;

-moz-animation-delay: 1s;

-mos-animation-delay: 1s;

-o-animation-delay: 1s;

animation-delay: 1s; }

.text span:nth-child(7) {

-webkit-animation-delay: 1.15s;

-moz-animation-delay: 1.15s;

-mos-animation-delay: 1.15s;

-o-animation-delay: 1.15s;

animation-delay: 1.15s; }

.wrapper {

position: absolute;

top: 0em;

right: 0em;

left: 0em;

bottom: 0em;

margin: auto;

height: 14em;

width: 24em; }

.router {

position: relative; }

.router .top {

position: absolute;

top: 3em;

left: 5em;

width: 1em;

height: 5em;

background: #f2f2f2;

-webkit-border-top-left-radius: 1em;

-webkit-border-top-right-radius: 1em;

-moz-border-radius-topleft: 1em;

-moz-border-radius-topright: 1em;

border-top-left-radius: 1em;

border-top-right-radius: 1em; }

.router .top:before {

position: absolute;

content: '';

top: -4em;

left: 0.25em;

width: 0.5em;

height: 5em;

background: #f2f2f2;

-webkit-border-top-left-radius: 1em;

-webkit-border-top-right-radius: 1em;

-moz-border-radius-topleft: 1em;

-moz-border-radius-topright: 1em;

border-top-left-radius: 1em;

border-top-right-radius: 1em; }

.router .bottom {

position: absolute;

left: 50%;

top: 8em;

width: 15.5em;

height: 4em;

background: #f2f2f2;

-webkit-border-radius: 0.5em;

-moz-border-radius: 0.5em;

border-radius: 0.5em;

-webkit-transform: translateX(-50%); }

.router .bottom .lamp {

position: absolute;

top: 0.5em;

width: 1.5em;

height: 0.75em;

background: #555;

-webkit-border-radius: 0.15em;

-moz-border-radius: 0.15em;

border-radius: 0.15em;

-webkit-animation: lamp 1.5s infinite; }

.router .bottom .lamp:nth-child(1) {

left: 0.75em;

-webkit-animation-delay: 0s; }

.router .bottom .lamp:nth-child(2) {

left: 3.25em;

-webkit-animation-delay: 0.25s; }

.router .bottom .lamp:nth-child(3) {

left: 5.75em;

-webkit-animation-delay: 0.5s; }

.router .bottom .lamp:nth-child(4) {

left: 8.25em;

-webkit-animation-delay: 0.75s; }

.router .bottom .lamp:nth-child(5) {

left: 10.75em;

-webkit-animation-delay: 1s; }

.router .bottom .lamp:nth-child(6) {

left: 13.25em;

-webkit-animation-delay: 1.25s; }

.router .bottom .line {

position: absolute;

width: 0.25em;

height: 2em;

background: #555;

-webkit-border-radius: 0.25em;

-moz-border-radius: 0.25em;

border-radius: 0.25em; }

.router .bottom .line:nth-child(7) {

right: 0.75em;

bottom: 0.5em; }

.router .bottom .line:nth-child(8) {

right: 1.25em;

bottom: 0.5em; }

.router .bottom .line:nth-child(9) {

right: 1.75em;

bottom: 0.5em; }

.router .bottom .line:nth-child(10) {

right: 2.25em;

bottom: 0.5em; }

.router .bottom:before {

position: absolute;

content: '';

left: 2.5%;

bottom: -0.5em;

width: 95%;

height: 0.5em;

background: #ccc;

-webkit-border-radius: 0.5em;

-moz-border-radius: 0.5em;

border-radius: 0.5em; }

@-webkit-keyframes lamp {

0%, 25%, 100% {

background: #555; }

5%, 20% {

background: #03a0bf; } }

總結

以上是生活随笔為你收集整理的css3 手机信号,CSS3 无线路由器连接信号动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。