[CSS]box-shadowを使って、三連リングのようなカワイイ囲いを作るテクニック

三連リングのようなカワイイ囲いをスタイルシートで実装するテクニックを紹介します。

左のSingleだと、divは一つだけ！

Ring CSS

しかもこのリング、アニメーションでうねうね動きます。

左のSingleを例に、実装方法を紹介します。

HTML

div一つにclassを加えます。

[html]

[/html]

CSS

複数のリングは、box-shadowで作成します。アニメーションさせたくない場合は、keyframesは必要ありません。

※利用する際は、ベンダープレフィックスを加えてください。
参考：面倒なCSS3のベンダープレフィックスを自動で付与するスクリプト -Prefix free

[css]
.hoja {
color: #dcdce2;
position: absolute;
top: 50%;
left: 50%;
margin-left: -180px;
margin-top: -90px;
width: 180px;
height: 180px;
text-align: center;
font-family: 'Open Sans', sans-serif;
font-size: 22.5px;
line-height: 180px;
-webkit-font-smoothing: antialiased;
}
.hoja:after,
.hoja:before {
content: "";
border-radius: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-origin: center center;
}
.hoja:after {
box-shadow: inset 0 11.25px 0 rgba(250, 250, 0, 0.8), inset 11.25px 0 0 rgba(250, 200, 0, 0.8), inset 0 -11.25px 0 rgba(250, 150, 0, 0.8), inset -11.25px 0 0 rgba(250, 100, 0, 0.8);
animation: rotar 1.5s linear infinite;
}
.hoja:before {
box-shadow: inset 0 11.25px 0 rgba(0, 250, 250, 0.8), inset 11.25px 0 0 rgba(0, 200, 200, 0.8), inset 0 -11.25px 0 rgba(0, 150, 200, 0.8), inset -11.25px 0 0 rgba(0, 200, 250, 0.8);
animation: rotarIz 1.5s linear infinite;
}

@keyframes rotar {
0% {
transform: rotateZ(0deg) scaleX(1) scaleY(1);
}
50% {
transform: rotateZ(180deg) scaleX(0.82) scaleY(0.95);
}
100% {
transform: rotateZ(360deg) scaleX(1) scaleY(1);
}
}
@keyframes rotarIz {
0% {
transform: rotateZ(0deg) scaleX(1) scaleY(1);
}
50% {
transform: rotateZ(-180deg) scaleX(0.95) scaleY(0.85);
}
100% {
transform: rotateZ(-360deg) scaleX(1) scaleY(1);
}
}
[/css]

実際の動作は、下記ページで楽しめます。
コードを編集することもできるので、色を変えたりすることもできます。

Ring CSS

ダブルのデモもあります。

Double Ring