标签：rotate 0deg 配置 皮肤 transform 博客 delay animation left

页面定制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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。