• web制作

【css】動きをつける練習

大和田
このエントリーをはてなブックマークに追加

始めに

cssでも色々な動きが作れるらしいのです。
※スマートフォンでは動きません。
※この記事はブログではなく最早メモです。
練習用ページ

横線と縦

作りは基本となる箱の上に他の箱を重ねていくやつ。
基本の箱にposition:relativeを指定して、重ねる箱にposition:absoluteを指定すれば、後はtop:0;left:0;で調整できます。
左横から出てくるように見せるために指定するには、leftに-100%などを指定して、hover時にleft:0;にしてあげるとなぜかスライドの動きになるようです。

横線×2

width:50%、height:50pxの箱を左右から出す。
基本positionを片方はleft:-100%に指定し、もう片方はright:-100%に指定して
hover時にどちらの値も0にすると、左右から閉めているように見えるんですね。

格子

top:-100% width:10%;height:100%の箱と、left:-100% width:100%;height:10% の箱を同じ行動時間でセットしていく。
よくあるようなないような格子状のカタチができる。

ソース

<p>横線と縦</p>

<div class="s2">
<div class="box5">ccc</div>
<div class="box6"></div>
<div class="box7"></div>
<div class="box8"></div>
<div class="box9"></div>
<div class="box10"></div>
<div class="box11"></div>
<div class="box12"></div>
<div class="box13"></div>
<div class="box14"></div>
<div class="box15"></div>
<div class="box16"></div>
</div><br>

<p>横線×2</p>
<div class="s4">
<div class="box28"></div>
<div class="box29"></div>
<div class="box30"></div>
<div class="box31"></div>
<div class="box32"></div>
<div class="box33"></div>
<div class="box34"></div>
<div class="box35"></div>
<div class="box36"></div>
<div class="box37"></div>
<div class="box38"></div>
<div class="box39"></div>
</div>

<p>格子</p>

<div class="s3">
<div class="box17"></div>
<div class="box18"></div>
<div class="box19"></div>
<div class="box20"></div>
<div class="box21"></div>
<div class="box22"></div>
<div class="box23"></div>
<div class="box24"></div>
<div class="box25"></div>
<div class="box26"></div>
<div class="box27"></div>
</div>

<p>光と闇</p>
<div class="main_shield">
<div class="box1"><span class="text">光と</span></div>
<div class="box2"><span class="text">闇が</span></div>
<div class="box3"><span class="text">両方そなわり</span></div>
<div class="box4"><span class="text">最強に見える</span></div>
</div>
.main_shield{
width:300px;
height:300px;
overflow:hidden;
position:relative;
border:solid 2px #000000;
}
.box1{
background:#FFFFFF;
width:100%;
height:100%;
position:absolute;
z-index:2;
opacity:0;
top:0;
left:-100%;
text-align:center;
-webkit-transition: 1s;
transition: 1s;
}
.main_shield:hover .box1{
opacity:1;
left:0;
}
.box1 .text{
color:#000000;
font-size:120%;
position:relative;top:45%;
}
.box2{
background:#000000;
width:100%;
height:100%;
position:absolute;
z-index:3;
opacity:0;
top:0;
right:-100%;
text-align:center;
-webkit-transition: 1s 1s;
transition: 1s 1s;
}
.box2 .text{
color:#FFFFFF;
font-size:120%;
position:relative;top:45%;
}
.main_shield:hover .box2{
opacity:1;
right:0;
}
.box3{
background:#999999;
width:100%;
height:100%;
position:absolute;
z-index:4;
opacity:0;
top:0;
left:0;
text-align:center;
-webkit-transition: 1s 2s;
transition: 1s 2s;
}
.main_shield:hover .box3{
opacity:1;
}
.box3 .text{
color:#FFFFFF;
font-size:120%;
position:relative;top:45%;
}
.box4{
background:url(http://teamsanta.info/cms/wp-content/uploads/2014/10/kakaka.jpg)no-repeat top left;
width:100%;
height:100%;
position:absolute;
z-index:5;
opacity:0;
top:0;left:0;
text-align:center;
-webkit-transition: 1s 4s;
transition: 1s 4s;
}
.main_shield:hover .box4{
opacity:1;
}
.box4 .text{
color:#FFFFFF;
font-size:120%;
position:relative;top:45%;
text-shadow: 1px 1px 1px #FF0000;
}


.s2{
width:300px;
height:300px;
overflow:hidden;
position:relative;
border:solid 2px #000000;
}
.box5{
width:100%;
height:50px;
position:relative;top:0;left:-100%;
opacity:0;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.s2:hover .box5{
background:#ff0000;
opacity:1;
left:0;
}
.box6{
width:100%;
height:50px;
position:relative;top:0;left:-100%;
opacity:0;
-webkit-transition: 0.5s 0.3s;
transition: 0.5s 0.3s;

}
.s2:hover .box6{
background:#ff0000;
opacity:1;
left:0;
}
.box7{
width:100%;
height:50px;
position:relative;top:0;left:-100%;
opacity:0;
-webkit-transition: 0.5s 0.6s;
transition: 0.5s 0.6s;
}
.s2:hover .box7{
background:#ff0000;
opacity:1;
left:0;
}
.box8{
width:100%;
height:50px;
position:relative;top:0;left:-100%;
opacity:0;
-webkit-transition: 0.5s 0.9s;
transition: 0.5s 0.9s;
}
.s2:hover .box8{
background:#ff0000;
opacity:1;
left:0;
}
.box9{
width:100%;
height:50px;
position:relative;top:0;left:-100%;
opacity:0;
-webkit-transition: 0.5s 1.2s;
transition: 0.5s 1.2s;
}
.s2:hover .box9{
background:#ff0000;
opacity:1;
left:0;
}
.box10{
width:100%;
height:50px;
position:relative;top:0;left:-100%;
opacity:0;
-webkit-transition: 0.5s 1.5s;
transition: 0.5s 1.5s;
}
.s2:hover .box10{
background:#ff0000;
opacity:1;
left:0;
}

.box11{
width:100%;
height:50px;
position:absolute;top:0;left:0;
opacity:0;
-webkit-transition: 0.5s 0.3s;
transition: 0.5s 0.3s;
}
.s2:hover .box11{
background:rgba(0,0,0,0.7);
opacity:1;
}
.box12{
width:100%;
height:50px;
position:absolute;top:0;left:0;
opacity:0;
-webkit-transition: 0.5s 0.6s;
transition: 0.5s 0.6s;
}
.s2:hover .box12{
background:rgba(0,0,0,0.7);
opacity:1;
top:50px;
}
.box13{
width:100%;
height:50px;
position:absolute;top:0;left:0;
opacity:0;
-webkit-transition: 0.5s 0.9s;
transition: 0.5s 0.9s;
}
.s2:hover .box13{
background:rgba(0,0,0,0.7);
opacity:1;
top:100px;
}
.box14{
width:100%;
height:50px;
position:absolute;top:0;left:0;
opacity:0;
-webkit-transition: 0.5s 1.2s;
transition: 0.5s 1.2s;
}
.s2:hover .box14{
background:rgba(0,0,0,0.7);
opacity:1;
top:150px;
}
.box15{
width:100%;
height:50px;
position:absolute;top:0;left:0;
opacity:0;
-webkit-transition: 0.5s 1.5s;
transition: 0.5s 1.5s;
}
.s2:hover .box15{
background:rgba(0,0,0,0.7);
opacity:1;
top:200px;
}
.box16{
width:100%;
height:50px;
position:absolute;top:0;left:0;
opacity:0;
-webkit-transition: 0.5s 1.8s;
transition: 0.5s 1.8s;
}
.s2:hover .box16{
background:rgba(0,0,0,0.7);
opacity:1;
top:250px;
}

.s3{
width:300px;
height:300px;
overflow:hidden;
position:relative;
border:solid 2px #000000;
}
.box17{
width:100%;
height:100%;
position:absolute;
background:#FF0000;
}
.box18{
width:10%;
height:100%;
position:absolute;top:-100%;left:10%;
opacity:0;
background:#000000;
-webkit-transition: 0.5s 0.1s;
transition: 0.5s 0.1s;
}
.box19{
width:10%;
height:100%;
position:absolute;top:-100%;left:30%;
opacity:0;
background:#000000;
-webkit-transition: 0.5s 0.3s;
transition: 0.5s 0.3s;
}
.box20{
width:10%;
height:100%;
position:absolute;top:-100%;left:50%;
opacity:0;
background:#000000;
-webkit-transition: 0.5s 0.5s;
transition: 0.5s 0.5s;
}
.s3:hover .box20{
opacity:1;
top:0;
}
.box21{
width:10%;
height:100%;
position:absolute;top:-100%;left:70%;
opacity:0;
background:#000000;
-webkit-transition: 0.5s 0.7s;
transition: 0.5s 0.7s;
}
.s3:hover .box21{
opacity:1;
top:0;
}
.box22{
width:10%;
height:100%;
position:absolute;top:-100%;left:90%;
opacity:0;
background:#000000;
-webkit-transition: 0.5s 0.9s;
transition: 0.5s 0.9s;
}
.s3:hover .box22{
opacity:1;
top:0;
}
.s3:hover .box18,
.s3:hover .box19,
.s3:hover .box20,
.s3:hover .box21,
.s3:hover .box22{
opacity:1;
top:0;
}

.box23{
width:100%;
height:10%;
position:absolute;top:10%;left:-100%;
opacity:0;
background:#000000;
-webkit-transition: 0.5s 0.1s;
transition: 0.5s 0.1s;
}
.box24{
width:100%;
height:10%;
position:absolute;top:30%;left:-100%;
opacity:0;
background:#000000;
-webkit-transition: 0.5s 0.3s;
transition: 0.5s 0.3s;
}
.box25{
width:100%;
height:10%;
position:absolute;top:50%;left:-100%;
opacity:0;
background:#000000;
-webkit-transition: 0.5s 0.5s;
transition: 0.5s 0.5s;
}
.box26{
width:100%;
height:10%;
position:absolute;top:70%;left:-100%;
opacity:0;
background:#000000;
-webkit-transition: 0.5s 0.7s;
transition: 0.5s 0.7s;
}
.box27{
width:100%;
height:10%;
position:absolute;top:90%;left:-100%;
opacity:0;
background:#000000;
-webkit-transition: 0.5s 0.9s;
transition: 0.5s 0.9s;
}
.s3:hover .box23,
.s3:hover .box24,
.s3:hover .box25,
.s3:hover .box26,
.s3:hover .box27{
opacity:1;
left:0;
}

.s4{
width:300px;
height:300px;
overflow:hidden;
position:relative;
border:solid 2px #000000;
}
.box28{
width:50%;
height:50px;
position:relative;top:0;left:-100%;
opacity:0;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.s4:hover .box28{
background:#ff0000;
opacity:1;
left:0;
}
.box29{
width:50%;
height:50px;
position:relative;top:0;left:-100%;
opacity:0;
-webkit-transition: 0.5s 0.3s;
transition: 0.5s 0.3s;

}
.s4:hover .box29{
background:#ff0000;
opacity:1;
left:0;
}
.box30{
width:50%;
height:50px;
position:relative;top:0;left:-100%;
opacity:0;
-webkit-transition: 0.5s 0.6s;
transition: 0.5s 0.6s;
}
.s4:hover .box30{
background:#ff0000;
opacity:1;
left:0;
}
.box31{
width:50%;
height:50px;
position:relative;top:0;left:-100%;
opacity:0;
-webkit-transition: 0.5s 0.9s;
transition: 0.5s 0.9s;
}
.s4:hover .box31{
background:#ff0000;
opacity:1;
left:0;
}
.box32{
width:50%;
height:50px;
position:relative;top:0;left:-100%;
opacity:0;
-webkit-transition: 0.5s 1.2s;
transition: 0.5s 1.2s;
}
.s4:hover .box32{
background:#ff0000;
opacity:1;
left:0;
}
.box33{
width:50%;
height:50px;
position:relative;top:0;left:-100%;
opacity:0;
-webkit-transition: 0.5s 1.5s;
transition: 0.5s 1.5s;
}
.s4:hover .box33{
background:#ff0000;
opacity:1;
left:0;
}


.box34{
width:50%;
height:50px;
position:absolute;top:0;right:-100%;
opacity:0;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.s4:hover .box34{
background:#000000;
opacity:1;
right:0;
}
.box35{
width:50%;
height:50px;
position:absolute;top:50px;right:-100%;
opacity:0;
-webkit-transition: 0.5s 0.3s;
transition: 0.5s 0.3s;
}
.s4:hover .box35{
background:#000000;
opacity:1;
right:0;
}
.box36{
width:50%;
height:50px;
position:absolute;top:100px;right:-100%;
opacity:0;
-webkit-transition: 0.5s 0.6s;
transition: 0.5s 0.6s;
}
.s4:hover .box36{
background:#000000;
opacity:1;
right:0;
}
.box37{
width:50%;
height:50px;
position:absolute;top:150px;right:-100%;
opacity:0;
-webkit-transition: 0.5s 0.9s;
transition: 0.5s 0.9s;
}
.s4:hover .box37{
background:#000000;
opacity:1;
right:0;
}
.box38{
width:50%;
height:50px;
position:absolute;top:200px;right:-100%;
opacity:0;
-webkit-transition: 0.5s 1.2s;
transition: 0.5s 1.2s;
}
.s4:hover .box38{
background:#000000;
opacity:1;
right:0;
}
.box39{
width:50%;
height:50px;
position:absolute;top:250px;right:-100%;
opacity:0;
-webkit-transition: 0.5s 1.5s;
transition: 0.5s 1.5s;
}
.s4:hover .box39{
background:#000000;
opacity:1;
right:0;
}

終わりに

もう少し縮められるとはいえソース長過ぎですね。
いややわー

rss登録
このエントリーをはてなブックマークに追加