Logo 动画实现 - 图1

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>Title</title>
    6. </head>
    7. <style>
    8. body {
    9. font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    10. overflow: hidden;
    11. background: #fff;
    12. }
    13. .center {
    14. margin: 80px auto;
    15. }
    16. .so {
    17. display: block;
    18. width: 500px;
    19. height: 156px;
    20. background: #ffffff;
    21. }
    22. .so .inner {
    23. width: 500px;
    24. height: 156px;
    25. position: absolute;
    26. }
    27. .so .inner * {
    28. position: absolute;
    29. animation-iteration-count: infinite;
    30. animation-duration: 3.5s;
    31. }
    32. .so .inner .name {
    33. position: absolute;
    34. font-size: 54px;
    35. left: 130px;
    36. top: 95px;
    37. }
    38. .so .inner .name .b {
    39. font-weight: bold;
    40. }
    41. .so .inner .stack-box {
    42. top: 100px;
    43. width: 115px;
    44. height: 56px;
    45. }
    46. .so .inner .box {
    47. width: 115px;
    48. height: 56px;
    49. left: 0px;
    50. }
    51. .so .inner .box div {
    52. background: #BCBBBB;
    53. }
    54. .so .inner .box .bottom {
    55. bottom: 0px;
    56. left: 0px;
    57. width: 115px;
    58. height: 12px;
    59. }
    60. .so .inner .box .left {
    61. bottom: 11px;
    62. left: 0px;
    63. width: 12px;
    64. height: 34px;
    65. }
    66. .so .inner .box .right {
    67. bottom: 11px;
    68. left: 103px;
    69. width: 12px;
    70. height: 34px;
    71. }
    72. .so .inner .box .top {
    73. top: 0px;
    74. left: 0px;
    75. width: 0;
    76. height: 12px;
    77. }
    78. .so .inner .stack {
    79. left: 22px;
    80. top: 22px;
    81. }
    82. .so .inner .stack .inner-item {
    83. background: #F48024;
    84. width: 71px;
    85. height: 12px;
    86. }
    87. .so .inner .stack .item {
    88. transition: transform 0.3s;
    89. width: 291px;
    90. }
    91. .so .inner .stack div:nth-child(1) {
    92. transform: rotate(0deg);
    93. }
    94. .so .inner .stack div:nth-child(2) {
    95. transform: rotate(12deg);
    96. }
    97. .so .inner .stack div:nth-child(3) {
    98. transform: rotate(24deg);
    99. }
    100. .so .inner .stack div:nth-child(4) {
    101. transform: rotate(36deg);
    102. }
    103. .so .inner .stack div:nth-child(5) {
    104. transform: rotate(48deg);
    105. }
    106. .so .inner .box {
    107. animation-name: box;
    108. }
    109. .so .inner .box .top {
    110. animation-name: box-top;
    111. }
    112. .so .inner .box .left {
    113. animation-name: box-left;
    114. }
    115. .so .inner .box .right {
    116. animation-name: box-right;
    117. }
    118. .so .inner .box .bottom {
    119. animation-name: box-bottom;
    120. }
    121. .so .inner .stack-box {
    122. animation-name: stack-box;
    123. }
    124. .so .inner .stack {
    125. animation-name: stack;
    126. }
    127. .so .inner .stack .inner-item {
    128. animation-name: stack-items;
    129. }
    130. .so .inner .stack .item:nth-child(1) {
    131. animation-name: stack-item-1;
    132. }
    133. .so .inner .stack .item:nth-child(2) {
    134. animation-name: stack-item-2;
    135. }
    136. .so .inner .stack .item:nth-child(3) {
    137. animation-name: stack-item-3;
    138. }
    139. .so .inner .stack .item:nth-child(4) {
    140. animation-name: stack-item-4;
    141. }
    142. .so .inner .stack .item:nth-child(5) {
    143. animation-name: stack-item-5;
    144. }
    145. @keyframes stack {
    146. 0% {
    147. left: 22px;
    148. }
    149. 15% {
    150. left: 22px;
    151. }
    152. 30% {
    153. left: 52px;
    154. }
    155. 50% {
    156. left: 52px;
    157. }
    158. 80% {
    159. left: 22px;
    160. }
    161. }
    162. @keyframes stack-item-1 {
    163. 0% {
    164. transform: rotate(12deg * 0);
    165. }
    166. 10% {
    167. transform: rotate(0deg);
    168. }
    169. 50% {
    170. transform: rotate(0deg);
    171. }
    172. 54% {
    173. transform: rotate(0deg);
    174. }
    175. 92% {
    176. transform: rotate(12deg * 0);
    177. }
    178. }
    179. @keyframes stack-item-2 {
    180. 0% {
    181. transform: rotate(12deg * 1);
    182. }
    183. 10% {
    184. transform: rotate(0deg);
    185. }
    186. 50% {
    187. transform: rotate(0deg);
    188. }
    189. 54% {
    190. transform: rotate(0deg);
    191. }
    192. 92% {
    193. transform: rotate(12deg * 1);
    194. }
    195. }
    196. @keyframes stack-item-3 {
    197. 0% {
    198. transform: rotate(12deg * 2);
    199. }
    200. 10% {
    201. transform: rotate(0deg);
    202. }
    203. 50% {
    204. transform: rotate(0deg);
    205. }
    206. 54% {
    207. transform: rotate(0deg);
    208. }
    209. 92% {
    210. transform: rotate(12deg * 2);
    211. }
    212. }
    213. @keyframes stack-item-4 {
    214. 0% {
    215. transform: rotate(12deg * 3);
    216. }
    217. 10% {
    218. transform: rotate(0deg);
    219. }
    220. 50% {
    221. transform: rotate(0deg);
    222. }
    223. 54% {
    224. transform: rotate(0deg);
    225. }
    226. 92% {
    227. transform: rotate(12deg * 3);
    228. }
    229. }
    230. @keyframes stack-item-5 {
    231. 0% {
    232. transform: rotate(12deg * 4);
    233. }
    234. 10% {
    235. transform: rotate(0deg);
    236. }
    237. 50% {
    238. transform: rotate(0deg);
    239. }
    240. 54% {
    241. transform: rotate(0deg);
    242. }
    243. 92% {
    244. transform: rotate(12deg * 4);
    245. }
    246. }
    247. @keyframes stack-items {
    248. 0% {
    249. width: 71px;
    250. }
    251. 15% {
    252. width: 71px;
    253. }
    254. 30% {
    255. width: 12px;
    256. }
    257. 50% {
    258. width: 12px;
    259. }
    260. 80% {
    261. width: 71px;
    262. }
    263. }
    264. @keyframes box {
    265. 0% {
    266. left: 0;
    267. }
    268. 15% {
    269. left: 0;
    270. }
    271. 30% {
    272. left: 30px;
    273. }
    274. 50% {
    275. left: 30px;
    276. }
    277. 80% {
    278. left: 0;
    279. }
    280. }
    281. @keyframes box-top {
    282. 0% {
    283. width: 0;
    284. }
    285. 6% {
    286. width: 0;
    287. }
    288. 15% {
    289. width: 115px;
    290. }
    291. 30% {
    292. width: 56px;
    293. }
    294. 50% {
    295. width: 56px;
    296. }
    297. 59% {
    298. width: 0;
    299. }
    300. }
    301. @keyframes box-bottom {
    302. 0% {
    303. width: 115px;
    304. }
    305. 15% {
    306. width: 115px;
    307. }
    308. 30% {
    309. width: 56px;
    310. }
    311. 50% {
    312. width: 56px;
    313. }
    314. 80% {
    315. width: 115px;
    316. }
    317. }
    318. @keyframes box-right {
    319. 15% {
    320. left: 103px;
    321. }
    322. 30% {
    323. left: 44px;
    324. }
    325. 50% {
    326. left: 44px;
    327. }
    328. 80% {
    329. left: 103px;
    330. }
    331. }
    332. @keyframes stack-box {
    333. 0% {
    334. transform: rotate(0deg);
    335. }
    336. 30% {
    337. transform: rotate(0deg);
    338. }
    339. 40% {
    340. transform: rotate(135deg);
    341. }
    342. 50% {
    343. transform: rotate(135deg);
    344. }
    345. 83% {
    346. transform: rotate(360deg);
    347. }
    348. 100% {
    349. transform: rotate(360deg);
    350. }
    351. }
    352. </style>
    353. <body>
    354. <div class="so center">
    355. <div class="inner">
    356. <div class="stack-box">
    357. <div class="stack">
    358. <div class="item">
    359. <div class="inner-item"></div>
    360. </div>
    361. <div class="item">
    362. <div class="inner-item"></div>
    363. </div>
    364. <div class="item">
    365. <div class="inner-item"></div>
    366. </div>
    367. <div class="item">
    368. <div class="inner-item"></div>
    369. </div>
    370. <div class="item">
    371. <div class="inner-item"></div>
    372. </div>
    373. </div>
    374. <div class="box">
    375. <div class="bottom"></div>
    376. <div class="left"></div>
    377. <div class="right"></div>
    378. <div class="top"></div>
    379. </div>
    380. </div>
    381. <div class="name">
    382. stack<span class="b">overflow</span>
    383. </div>
    384. </div>
    385. </div>
    386. </body>
    387. </html>