最近少しだけはまっているCSS-Loaderですが、アニメーション処理はコンテンツ作成者にとってはひとつの面白みがありますね。
今回は、とあるサイトで見かけたloading処理を似せて作って見ました。
イメージは、４つのボールが集約して中央に文字が浮かび上がるループアニメーションです。
サンプルデモ
W
ソースコード
<!DOCTYPE html>
<html>
<head>
<style>
.loading {
filter:url(#drop);
position:relative;
width:100px;
height:100px;
}
.str {
z-index:2;
position:absolute;
text-align:center;
line-height:100px;
width:100%;
height:100%;
font-size:40px;
color:white;
font-weight:bold;
animation: anim-str 2s ease-in-out infinite;
}
.water {
z-index:1;
position:relative;
width:100%;
height:100%;
animation: anim-water 4s ease-in-out infinite;
}
.water > div {
position:absolute;
width:30px;
height:30px;
border-radius:50%;
background-color:#1DA9F1;
}
.water > div:nth-child(1) {
top:0;
left:0;
animation: anim-water-1 2s ease-in-out infinite;
}
.water > div:nth-child(2) {
top:0;
right:0;
animation: anim-water-2 2s ease-in-out infinite;
}
.water > div:nth-child(3) {
bottom:0;
left:0;
animation: anim-water-3 2s ease-in-out infinite;
}
.water > div:nth-child(4) {
bottom:0;
right:0;
animation: anim-water-4 2s ease-in-out infinite;
}
@keyframes anim-str {
0%{
opacity:0;
}
30%{
opacity:0;
}
50%{
opacity:1;
}
70%{
opacity:1;
}
80%{
opacity:0;
}
100%{
opacity:0;
}
}
@keyframes anim-water {
0%{
transform:rotate(0deg);
}
25%{
transform:rotate(90deg);
}
50%{
transform:rotate(180deg);
}
75%{
transform:rotate(270deg);
}
100%{
transform:rotate(360deg);
}
}
@keyframes anim-water-1 {
0%{
top:0;
left:0;
transform:scale(1);
}
50%{
top:35px;
left:35px;
transform:scale(2.5);
}
100%{
top:0;
left:0;
transform:scale(1);
}
}
@keyframes anim-water-2 {
0%{
top:0;
right:0;
transform:scale(1);
}
50%{
top:35px;
right:35px;
transform:scale(2.5);
}
100%{
top:0;
right:0;
transform:scale(1);
}
}
@keyframes anim-water-3 {
0%{
bottom:0;
left:0;
transform:scale(1);
}
50%{
bottom:35px;
left:35px;
transform:scale(2.5);
}
100%{
bottom:0;
left:0;
transform:scale(1);
}
}
@keyframes anim-water-4 {
0%{
bottom:0;
right:0;
transform:scale(1);
}
50%{
bottom:35px;
right:35px;
transform:scale(2.5);
}
100%{
bottom:0;
right:0;
transform:scale(1);
}
}
</style>
</head>
<body>
<h1>CSS Loading-Animation - Water</h1>
<div class="loading">
<div class="str">W</div>
<div class="water">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="drop">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"></feGaussianBlur>
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo"></feColorMatrix>
<feComposite in="SourceGraphic" in2="goo" operator="atop"></feComposite>
</filter>
</defs>
</svg>
</div>
</body>
</html>
0 件のコメント:
コメントを投稿