css3图标旋转动画
1、新建html文档。
2、书写hmtl代码。
<article class="wwdc15">
<span class="large-circles">
<div class="large circle one"></div>
<div class="large circle two"></div>
<div class="large circle three"></div>
<div class="large circle four"></div>
<div class="large circle five"></div>
<div class="large circle six"></div>
<div class="large circle seven"></div>
<div class="large circle eight"></div>
</span>
<span class="small-shapes">
<div class="small circle one"></div>
<div class="small squircle two"></div>
<div class="small circle three"></div>
<div class="small squircle four"></div>
<div class="small circle five"></div>
<div class="small squircle six"></div>
<div class="small circle seven"></div>
<div class="small squircle eight"></div>
</span>
<span class="content-squircle">
<div class="large squircle one"></div>
</span>
<div class="large squircle two">
</div>
</article>
3、书写svg代码。
<div class="content">
<svg viewBox="0 0 160 164">
<g>
<g id="svg_1">
<path d="m127.805969,90.003128c0.224838,24.213104 21.241287,32.270615 21.474121,32.373459c-0.177704,0.56826 -3.358078,11.482742 -11.072464,22.756622c-6.668747,9.746841 -13.590027,19.457977 -24.493088,19.659103c-10.713348,0.197403 -14.158287,-6.353043 -26.406677,-6.353043c-12.24469,0 -16.072174,6.151901 -26.213551,6.550446c-10.52422,0.398254 -18.538303,-10.539917 -25.26247,-20.251053c-13.740021,-19.864456 -24.24024,-56.132286 -10.1411,-80.613663c7.004152,-12.157551 19.521101,-19.85622 33.10713,-20.053638c10.334515,-0.197132 20.089069,6.952717 26.406689,6.952717c6.313614,0 18.167473,-8.59832 30.628998,-7.335548c5.21682,0.217129 19.860519,2.1073 29.263641,15.871029c-0.75766,0.469692 -17.472931,10.200527 -17.291229,30.443592m-20.134499,-59.456692c5.587379,-6.7633 9.348007,-16.178439 8.322067,-25.546439c-8.053787,0.32369 -17.792625,5.36682 -23.569427,12.126399c-5.177124,5.985922 -9.711121,15.566772 -8.48777,24.749359c8.976891,0.69453 18.147476,-4.561718 23.73513,-11.329308"/>
</g>
</g>
</svg>
<h1>The epicenter of change.</h1>
<strong>WWDC</strong>15
</div>
4、书写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);
}
}
5、代码整体结构。
6、查看效果。
