NAKAZI LAB.(ナカジラボ)

Webサイト制作を円滑にすることを目的とした、cssやJavaScript(jQuery)の小技備忘録サイトです。

CSS3のanimationを使って回転するグラフィックをつくる

2014年4月4日CSSテクニック

CSS3のanimationを使って回転するグラフィックをつくる

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%; 
}

デモページ

  • ̃Gg[͂ĂȃubN}[Nɒlj

関連記事

  1. CSS3のanimationを使って回転するグラフィックをつくる

更新情報をチェックする

rss feedly twitter facebook

今週の人気記事TOP10

サイト内検索

中の人

nakazi

Web関係のお仕事をしてます。効率化が大好きです。当サイトの更新情報やWeb制作に関する事を@nakazilabでつぶやいています。

連絡先

nakazilab[atmark]gmail.com