奥林匹克五环动画

昨天晚上索契冬奥会开幕，开幕式上还出现了五环变四环的乌龙，哈哈。我们用SVG弄个五环动画加以弥补。

先来看看效果，效果如下图所示。

好的，Let‘s do it.

<svg width="550px" height="300px" class="circle" viewbox="0 0 550 300">
  <path class="blue" d="M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0 "/>
  <path class="green" d="M 365, 175 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0 "/>
  <path class="black" d="M 275, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0 "/>
  <path class="red" d="M 450, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0 "/>
  <path class="yellow" d="M 187.5, 175 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0 "/>
</svg>

//颜色变量
@blue : #0885C2;
@red : #ED334C;
@yellow : #FBB132;
@green : #1C8b3C;
@black : #292B2A;

//动画持续时间动画
@duration : 3s;

//设置svg居中显示
html, body { height: 100%; }
body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: whitesmoke; 
  margin: 0 1rem;
}
svg {
  maxwidth: 100%;
  height: auto;
  background: white;
  box-shadow: 0 1px 4px gainsboro;
  border-radius: .5rem;
}

//定义svg五环的绘制属性和动画效果  
path {
  fill: transparent;
  stroke: rgba(0,0,0,.4);
  stroke-width: 12;
  stroke-dasharray: 465;
  stroke-linecap: round;
  stroke-linejoin: round;
  -webkit-animation: load @duration linear infinite;
  animation: load @duration linear infinite;
  transform-origin: center center;
}
//动画关键帧
@keyframes load {
  from{stroke-dashoffset:480; }
  to { stroke-dashoffset: 0; }  
}

//五环的颜色
//旋转环以模拟实现异步效果
.blue {
  stroke: @blue;
  transform: rotate(210deg)
}
.black {
  stroke: @black;
  transform: rotate(-20deg)
}
.red {
  stroke: @red;
  transform: rotate(-55deg)
}
.yellow {
  stroke: @yellow;
  transform: rotate(40deg)
}
.green {
  stroke: @green;
}

大家可以到我的codepen在线修改、体验，或是下载收藏本效果。

---------------------------------------------------------------
前端开发whqet，关注web前端开发技术，分享网页相关资源。
---------------------------------------------------------------

奥林匹克五环动画

原文：http://blog.csdn.net/whqet/article/details/18982747