新建html文档。

书写hmtl代码。

书写svg代码。

书写css代码。body { background: #fff; font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #fff; font-size: 24px; }.wwdc15 { font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #fff; font-size: 24px; }.wwdc15 span { display: block; position: absolute; top: -webkit-calc(50% - 10em); top: calc(50% - 10em); left: -webkit-calc(50% - 10em); left: calc(50% - 10em); width: 20em; height: 20em; }.wwdc15 .large-circles { -webkit-an  imation: spin 10s linear infinite; an  imation: spin 10s linear infinite; }.wwdc15 .small-shapes { -webkit-an  imation: spin 30s linear infinite; an  imation: spin 30s linear infinite; }.wwdc15 .content-squircle { -webkit-an  imation: spin-pulse 20s linear infinite; an  imation: spin-pulse 20s linear infinite; } @-webkit-keyframes spin {  0% { -webkit-transform: rotateZ(0); transform: rotateZ(0);} 100% { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg);}} @keyframes spin {  0% { -webkit-transform: rotateZ(0); transform: rotateZ(0);} 100% { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg);}} @-webkit-keyframes spin-pulse {  0% { -webkit-transform: scale(1) rotateZ(0); transform: scale(1) rotateZ(0);} 50% { -webkit-transform: scale(0.9) rotateZ(180deg); transform: scale(0.9) rotateZ(180deg);} 100% { -webkit-transform: scale(1) rotateZ(360deg); transform: scale(1) rotateZ(360deg);}} @keyframes spin-pulse {  0% { -webkit-transform: scale(1) rotateZ(0); transform: scale(1) rotateZ(0);} 50% { -webkit-transform: scale(0.9) rotateZ(180deg); transform: scale(0.9) rotateZ(180deg);} 100% { -webkit-transform: scale(1) rotateZ(360deg); transform: scale(1) rotateZ(360deg);}}

代码整体结构。

查看效果。