HTML5+CSS3でサイトを作ってみる。

■ アイコン

safari/chromeでご覧いただけます。

いろいろな動きをするアイコン達。

KAYAC DESIGNER'S BLOGさんのサイトを参考にしています。

--[ html ]-----------------------

<p class="anime01">
	<span class="ani01_t">T</span>
	<span class="ani01_e">e</span>
	<span class="ani01_x">x</span>
	<span class="ani01_t2">t</span>
</p>

--[ CSS ]------------------------

p.anime01{
	zoom: 1;
	display: table;
	line-height: 1;
	text-shadow: 0 1px 0 #3f3f3f;
	float: left;
}

p.anime01,
p.anime01 span{
	-webkit-animation-duration: 1.5s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: infinite;
}

p.anime01 span{
	display: inline-block;
	-webkit-transform-origin: middle center;
	-webkit-transform: scale(1);
	-webkit-animation-name: anime01;
	background: #369;
	color: #fff;
	font-weight: bold;
	padding: 4px;
}

.ani01_e	{ -webkit-animation-delay: 0.2s; }
.ani01_x	{ -webkit-animation-delay: 0.4s; }
.ani01_t2	{ -webkit-animation-delay: 0.6s; }

@-webkit-keyframes  anime01 {
0%	{ -webkit-transform: scale(1); }
70%	{ -webkit-transform: scale(1); }
85%	{ -webkit-transform: scale(1.5); }
100%	{ -webkit-transform: scale(1); }
}

--[ html ]-----------------------

<p class="anime02">
	<span class="ani01_t">T</span>
	<span class="ani02_e">e</span>
	<span class="ani02_x">x</span>
	<span class="ani02_t2">t</span>
</p>

--[ CSS ]------------------------

p.anime02{
	zoom: 1;
	display: table;
	line-height: 1;
	text-shadow: 0 1px 0 #3f3f3f;
	float: left;
}
p.anime02,
p.anime02 span{
	-webkit-animation-duration: 1.5s;
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-iteration-count: infinite;
}

p.anime02 span{
	display: inline-block;
	-webkit-transform-origin: middle center;
	-webkit-transform: scale(1);
	-webkit-animation-name: anime02;
	background: #369;
	color: #fff;
	font-weight: bold;
	padding: 4px;
	position: relative;
	bottom: 0;
}

.ani02_e	{-webkit-animation-delay: 0.2s;}
.ani02_x	{-webkit-animation-delay: 0.4s;}
.ani02_t2	{-webkit-animation-delay: 0.6s;}

@-webkit-keyframes anime02 {
0%	{bottom: 0;}
70%	{bottom: 0;}
85%	{bottom: 7px;}
100%	{bottom: 0;}
}

--[ html ]-----------------------

<p class="anime03">
	<span class="ani03_t">T</span>
	<span class="ani03_e">e</span>
	<span class="ani03_x">x</span>
	<span class="ani03_t2">t</span>
</p>

--[ CSS ]------------------------

p.anime03{
	zoom: 1;
	display: table;
	line-height: 1;
	text-shadow: 0 1px 0 #3f3f3f;
	float: left;
}
p.anime03,
p.anime03 span{
	-webkit-animation-duration: 4s;
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-iteration-count: infinite;
}

p.anime03 span{
	display: inline-block;
	-webkit-transform-origin: middle center;
	-webkit-transform: scale(1);
	-webkit-animation-name: anime03;
	background: #369;
	color: #fff;
	font-weight: bold;
	padding: 4px;
	position: relative;
	bottom: 0;
}

.ani03_e	{-webkit-animation-delay: 0.2s;}
.ani03_x	{-webkit-animation-delay: 0.4s;}
.ani03_t2	{-webkit-animation-delay: 0.6s;}

@-webkit-keyframes anime03 {
0%	{-webkit-transform: rotateX(0);}
42%	{-webkit-transform: rotateX(0);}
50%	{-webkit-transform: rotateX(180deg);}
57%	{-webkit-transform: rotateX(0);}
100%	{-webkit-transform: rotateX(0);}
}

--[ html ]-----------------------

<div class="box">
	<p class="anime04"><span>Text</span></p>
</div>

--[ CSS ]------------------------

.box{
	zoom: 1;
	display: table;
}

p.anime04{
	text-align: center;
	display: inline-block;
	padding: .35em 1em;
	text-align: center;
	background: #369;
	color: #fff;
	font-weight: bold;
	text-shadow: 0 1px 0 #3f3f3f;
	float: left;
	letter-spacing: 2px;
	border-radius: 2px;
	line-height: 1;
}

p.anime04 span{
	display: block;
	-webkit-transform: middle center scale(1);
	-webkit-animation: ani04 1.5s ease-in-out infinite;
}

@-webkit-keyframes ani04 {
0%	{ -webkit-transform: scale(1);}
70%	{ -webkit-transform: scale(1);}
85%	{ -webkit-transform: scale(1.4);}
100%	{ -webkit-transform: scale(1);}
}

--[ html ]-----------------------

<div class="box">
	<p class="anime05"><span>Text</span></p>
</div>

--[ CSS ]------------------------

.box{
	zoom: 1;
	display: table;
}

p.anime05{
	text-align: center;
	display: inline-block;
	padding: .35em 1em;
	text-align: center;
	background: #369;
	color: #fff;
	font-weight: bold;
	text-shadow: 0 1px 0 #3f3f3f;
	float: left;
	letter-spacing: 2px;
	border-radius: 2px;
	line-height: 1;
	-webkit-transform-origin: middle center;
	-webkit-animation: ani05 4s ease-in-out infinite;
	background: #54bb00;
}

@-webkit-keyframes ani05 {
0%	{ background: #369; }
30%	{ background: #369; }
50%	{ background: #9cc; -webkit-box-shadow: 0 0 7px #9cc; }
70%	{ background: #369; }
100%	{ background: #369; }
}

--[ html ]-----------------------

<div class="box">
	<p class="anime06"><span>Text</span></p>
</div>

--[ CSS ]------------------------

.box{
	zoom: 1;
	display: table;
}

p.anime06{
	text-align: center;
	display: inline-block;
	padding: .35em 1em;
	text-align: center;
	background: #369;
	color: #fff;
	font-weight: bold;
	text-shadow: 0 1px 0 #3f3f3f;
	float: left;
	letter-spacing: 2px;
	border-radius: 2px;
	line-height: 1;
	position: relative;
	bottom: 0;
	-webkit-transform: middle center rotate(0deg);
	-webkit-animation: ani06 1.5s ease-in-out infinite;
}

@-webkit-keyframes ani06 {
0%	{ -webkit-transform: rotate(0deg); bottom: 0; }
50%	{ -webkit-transform: rotate(0deg); bottom: 0;}
60%	{ -webkit-transform: rotate(5deg); bottom: 5px; }
70%	{ -webkit-transform: rotate(-5deg); }
80%	{ -webkit-transform: rotate(4deg); }
90%	{ -webkit-transform: rotate(-3deg); }
100%	{ -webkit-transform: rotate(0deg); }
}

--[ html ]-----------------------

<div class="box">
	<p class="anime07"><span>Text</span></p>
</div>

--[ CSS ]------------------------

.box{
	zoom: 1;
	display: table;
}

p.anime07{
	text-align: center;
	display: inline-block;
	padding: .35em 1em;
	text-align: center;
	background: #369;
	color: #fff;
	font-weight: bold;
	text-shadow: 0 1px 0 #3f3f3f;
	float: left;
	letter-spacing: 2px;
	border-radius: 2px;
	line-height: 1;
	overflow: hidden;
}

p.anime07 span{
	-webkit-transform-origin: middle center;
	-webkit-animation: ani07 6s linear infinite;
	position: relative;
	left: 0;
}

@-webkit-keyframes ani07 {
0%	{ left: 3em; }
100%	{ left: -3em; }
}

--[ html ]-----------------------

<div class="box">
	<p class="anime08"><span>Text</span></p>
</div>

--[ CSS ]------------------------

.box{
	zoom: 1;
	display: table;
}

p.anime08{
	text-align: center;
	display: inline-block;
	padding: .35em 1em;
	text-align: center;
	background: #369;
	color: #fff;
	font-weight: bold;
	text-shadow: 0 1px 0 #3f3f3f;
	float: left;
	letter-spacing: 2px;
	border-radius: 2px;
	line-height: 1;
}

p.anime08{
	-webkit-transform-origin: bottom center;
	-webkit-animation: ani08 4s ease-in infinite;
}

@-webkit-keyframes ani08 {
0%	{ -webkit-transform: scale(1, 1); }
48%	{ -webkit-transform: scale(1, 1); }
50%	{ -webkit-transform: scale(1.1, 0.9); }
53%	{ -webkit-transform: scale(0.9, 1.1) translate(0, -5px); }
57.5%	{ -webkit-transform: scale(1, 1) translate(0, -3px); }
59%	{ -webkit-transform: scale(1, 1) translate(0, 0px); }
100%	{ -webkit-transform: scale(1, 1); }
}

--[ html ]-----------------------

<div class="box">
	<p class="anime09"><span>Text</span></p>
</div>

--[ CSS ]------------------------

.box{
	zoom: 1;
	display: table;
}

p.anime09{
	text-align: center;
	display: inline-block;
	padding: .35em 1em;
	text-align: center;
	background: #369;
	color: #fff;
	font-weight: bold;
	text-shadow: 0 1px 0 #3f3f3f;
	float: left;
	letter-spacing: 2px;
	border-radius: 2px;
	line-height: 1;
	-webkit-animation: ani09 3s ease-in infinite;
}

@-webkit-keyframes ani09 {
0%	{ -webkit-transform: rotateX(0); }
42%	{ -webkit-transform: rotateX(0); }
50%	{ -webkit-transform: rotateX(180deg); }
57%	{ -webkit-transform: rotateX(0); }
100%	{ -webkit-transform: rotateX(0); }
}

--[ html ]-----------------------

<div class="box">
	<p class="anime10"><span>Text</span></p>
</div>

--[ CSS ]------------------------

.box{
	zoom: 1;
	display: table;
}

p.anime10{
	text-align: center;
	display: inline-block;
	padding: .35em 1em;
	text-align: center;
	background: #369;
	color: #fff;
	font-weight: bold;
	text-shadow: 0 1px 0 #3f3f3f;
	float: left;
	letter-spacing: 2px;
	border-radius: 2px;
	line-height: 1;
	-webkit-box-shadow: 0 1em 1em rgba(0,0,0,0.2);
	-webkit-transform: rotateX(0);
	-webkit-animation: ani10 2.5s ease-in infinite;
	position: relative;
	top: 0;
}

@-webkit-keyframes ani10 {
0%	{ -webkit-box-shadow: 0 1em 1em rgba(0,0,0,0.2);
	top: 0; }
50%	{ -webkit-box-shadow: 0 1.3em 1.2em rgba(0,0,0,0.15);
	top: -5px; }
100%	{ -webkit-box-shadow: 0 1em 1em rgba(0,0,0,0.2);
	top: 0; }
}