
CSS3のanimationを使って回転するグラフィックをつくる
2014年4月4日CSSテクニック
CSS3のanimationを使い、常時回転するサークルの集合体のようなグラフィックをつくり、賑やかし等に活用します。
HTML
<div id="circleBox"> <div class="circle" id="c01"></div> <div class="circle" id="c02"></div> <div class="circle" id="c03"></div> <div class="circle" id="c04"></div> <div class="circle" id="c05"></div> </div>
CSS
#circleBox { position: relative; margin: 0 auto; width: 200px; height: 200px; } .circle { animation-name: css3RotationGraphic; animation-timing-function: linear; animation-iteration-count: infinite; animation-duration: 5s; -webkit-animation-name: css3RotationGraphic; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 5s; -moz-animation-name: css3RotationGraphic; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-duration: 5s; width: 200px; height: 200px; border-radius: 200px; border-style: solid; border-width: 1px; position: absolute; } @keyframes css3RotationGraphic { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @-webkit-keyframes css3RotationGraphic { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @-moz-keyframes css3RotationGraphic { 0% { -moz-transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); } } #c01 { border-color: #52d3ff; left: 1px; top: 2px; -webkit-transform-origin: 50% 52%; -moz-transform-origin: 50% 52%; } #c02 { border-color: #52f1ff; left: 3px; top: 2px; -webkit-transform-origin: 51% 51%; -moz-transform-origin: 51% 51%; } #c03 { border-color: #52ffe9; left: 3px; top: 1px; -webkit-transform-origin: 52% 50%; -moz-transform-origin: 52% 50%; } #c04 { border-color: #52bcff; left: 0px; top: 2px; -webkit-transform-origin: 51% 50%; -moz-transform-origin: 51% 50%; } #c05 { border-color: #529bff; left: 2px; top: 2px; -webkit-transform-origin: 52% 50%; -moz-transform-origin: 52% 50%; }