博客皮肤配置

页面定制css代码：

  1 #loading {
  2     background: #151728;
  3     overflow: hidden;
  4     position: fixed;
  5     right: 0;
  6     top: 0;
  7     bottom: 0;
  8     left: 0;
  9     z-index: 99999;
 10 }
 11 
 12 #load {
 13     position: absolute;
 14     width: 600px;
 15     height: 36px;
 16     left: 50%;
 17     top: 40%;
 18     margin-left: -300px;
 19     overflow: visible;
 20     -webkit-user-select: none;
 21     -moz-user-select: none;
 22     -ms-user-select: none;
 23     user-select: none;
 24     cursor: default;
 25 }
 26 
 27 #load div {
 28     position: absolute;
 29     width: 20px;
 30     height: 36px;
 31     opacity: 0;
 32     font-family: Helvetica, Arial, sans-serif;
 33     animation: move 2s linear infinite;
 34     -o-animation: move 2s linear infinite;
 35     -moz-animation: move 2s linear infinite;
 36     -webkit-animation: move 2s linear infinite;
 37     transform: rotate(180deg);
 38     -o-transform: rotate(180deg);
 39     -moz-transform: rotate(180deg);
 40     -webkit-transform: rotate(180deg);
 41     color: #35c4f0;
 42 }
 43 
 44 #load div:nth-child(2) {
 45     animation-delay: 0.2s;
 46     -o-animation-delay: 0.2s;
 47     -moz-animation-delay: 0.2s;
 48     -webkit-animation-delay: 0.2s;
 49 }
 50 #load div:nth-child(3) {
 51     animation-delay: 0.4s;
 52     -o-animation-delay: 0.4s;
 53     -webkit-animation-delay: 0.4s;
 54     -webkit-animation-delay: 0.4s;
 55 }
 56 #load div:nth-child(4) {
 57     animation-delay: 0.6s;
 58     -o-animation-delay: 0.6s;
 59     -moz-animation-delay: 0.6s;
 60     -webkit-animation-delay: 0.6s;
 61 }
 62 #load div:nth-child(5) {
 63     animation-delay: 0.8s;
 64     -o-animation-delay: 0.8s;
 65     -moz-animation-delay: 0.8s;
 66     -webkit-animation-delay: 0.8s;
 67 }
 68 #load div:nth-child(6) {
 69     animation-delay: 1s;
 70     -o-animation-delay: 1s;
 71     -moz-animation-delay: 1s;
 72     -webkit-animation-delay: 1s;
 73 }
 74 #load div:nth-child(7) {
 75     animation-delay: 1.2s;
 76     -o-animation-delay: 1.2s;
 77     -moz-animation-delay: 1.2s;
 78     -webkit-animation-delay: 1.2s;
 79 }
 80 
 81 @keyframes move {
 82     0% {
 83         left: 0;
 84         opacity: 0;
 85     }
 86     35% {
 87         left: 41%;
 88         -moz-transform: rotate(0deg);
 89         -webkit-transform: rotate(0deg);
 90         -o-transform: rotate(0deg);
 91         transform: rotate(0deg);
 92         opacity: 1;
 93     }
 94     65% {
 95         left: 59%;
 96         -moz-transform: rotate(0deg);
 97         -webkit-transform: rotate(0deg);
 98         -o-transform: rotate(0deg);
 99         transform: rotate(0deg);
100         opacity: 1;
101     }
102     100% {
103         left: 100%;
104         -moz-transform: rotate(-180deg);
105         -webkit-transform: rotate(-180deg);
106         -o-transform: rotate(-180deg);
107         transform: rotate(-180deg);
108         opacity: 0;
109     }
110 }
111 
112 @-moz-keyframes move {
113     0% {
114         left: 0;
115         opacity: 0;
116     }
117     35% {
118         left: 41%;
119         -moz-transform: rotate(0deg);
120         transform: rotate(0deg);
121         opacity: 1;
122     }
123     65% {
124         left: 59%;
125         -moz-transform: rotate(0deg);
126         transform: rotate(0deg);
127         opacity: 1;
128     }
129     100% {
130         left: 100%;
131         -moz-transform: rotate(-180deg);
132         transform: rotate(-180deg);
133         opacity: 0;
134     }
135 }
136 
137 @-webkit-keyframes move {
138     0% {
139         left: 0;
140         opacity: 0;
141     }
142     35% {
143         left: 41%;
144         -webkit-transform: rotate(0deg);
145         transform: rotate(0deg);
146         opacity: 1;
147     }
148     65% {
149         left: 59%;
150         -webkit-transform: rotate(0deg);
151         transform: rotate(0deg);
152         opacity: 1;
153     }
154     100% {
155         left: 100%;
156         -webkit-transform: rotate(-180deg);
157         transform: rotate(-180deg);
158         opacity: 0;
159     }
160 }
161 
162 @-o-keyframes move {
163     0% {
164         left: 0;
165         opacity: 0;
166     }
167     35% {
168         left: 41%;
169         -o-transform: rotate(0deg);
170         transform: rotate(0deg);
171         opacity: 1;
172     }
173     65% {
174         left: 59%;
175         -o-transform: rotate(0deg);
176         transform: rotate(0deg);
177         opacity: 1;
178     }
179     100% {
180         left: 100%;
181         -o-transform: rotate(-180deg);
182         transform: rotate(-180deg);
183         opacity: 0;
184     }
185 }

标签：rotate,0deg,配置,皮肤,transform,博客,delay,animation,left
来源： https://www.cnblogs.com/imagine-lp/p/14240731.html