[CSS] animation 여러가지효과 응용 연습!

 

 

저번에 했었던 transition과 animation을 응용한 연습해본 html/css입니다.

 

<div class="box">
  <h2>animation효과</h2>
  <p>border</p>
  <p class="view">on sunday_tistory</p>
  <a href="#"></a>
</div>

.box{
  position:relative; 
  width:300px; 
  height:300px; 
  background:#fff; 
  padding:25px; 
  border:1px solid #ddd; 
  border-radius:5px;
}
.box h2{
  font-size:24px; 
  color:#444; 
  line-height:1.4; 
  font-weight:bold; 
}
.box p{
  font-size:14px; 
  color:#444;
  line-height:1.8;
}
.box p:nth-of-type(1){margin-top:20px;}
.box p.view{
  position:absolute; 
  left:0; right:0; 
  text-align:center; 
  margin-left:0; 
  bottom:25px; 
  font-size:14px; 
  color:#444; 
  font-weight:bold; 
}
.box a{position:absolute; left:0; top:0; width:100%; height:100%;}
.box:hover h2{color:red; }
.box:hover p{color:deeppink; }
.box:hover > a:before{
  content:""; 
  position:absolute; 
  left:-1px; top:-1px; 
  width:calc(100% - 1px); 
  height:calc(100% - 1px); 
  border: 2px solid skyblue; 
  border-radius:5px;
}

 

div에 1px의 테두리가 있는 상태에서 마우스 hover했을 때 2px 두께의 테두리가 보이는 효과 입니다.

 

---

<div class="box">
	<span class="left_top"></span>
	<span class="right_top"></span>
	<span class="right_bottom"></span>
	<span class="left_bottom"></span>
	<dl>
      <dt>animation효과</dt>
      <dd>border</dd>
      <dd class="view">on sunday_tistory</dd>
	</dl>
</div>

.box{
  position:relative; 
  width:300px; 
  height:300px; 
  background:#fff; 
  padding:25px; 
  border:1px solid gray;
}
.box dl dt{font-size:24px; color:#444; line-height:1.4; font-weight:bold; }
.box dl dd{font-size:14px; color:#444;line-height:1.8;}
.box dl dd:nth-of-type(1){margin-top:20px;}
.box dl dd.view{
  position:absolute; 
  left:0; right:0; 
  text-align:center; 
  bottom:25px; 
  font-size:14px; 
  color:#444; 
  font-weight:bold; 
}
.box:hover dl dt{color:deeppink; }
.box:hover dl dd{color:deeppink; }
.box:hover .left_top{height:100%;}
.box:hover .right_top{width:100%;}
.box:hover .right_bottom{height:100%;}
.box:hover .left_bottom{width:100%;}
.left_top{
  position:absolute; 
  left:0; top:0; 
  width:2px; 
  height:0; 
  transition:0.5s all; 
  background:blue; 
}
.right_top{
  position:absolute; 
  right:0; top:0; 
  width:0; 
  height:2px; 
  transition:0.5s all; 
  background:red;
}
.right_bottom{
  position:absolute;
  right:0; bottom:0; 
  width:2px; 
  height:0; 
  transition:0.5s all;  
  background:yellow;
}
.left_bottom{
  position:absolute; 
  left:0; bottom:0; 
  width:0px; 
  height:2px; 
  transition:0.5s all;
  background:green;
}

 

마우스 hover했을 때 box div의 테두리가 천천히 보여지면서 글씨 색도 같이 변합니다.

transition: 0.5s all; 을 사용해서 마우스를 올리고 0.5초동안

빨강,파란,노랑,초록색 선이 나타나는 방향까지 잘보이는 효과입니다.

 

---

<div class="box">
	<h2>animation효과</h2>
	<p>배경화면</p>
</div>

.box{
  position:relative;
  width:200px; height:200px; 
  background:#002187; 
  opacity:1;
  border-radius:50%; 
  animation:flash 2s infinite; 
  display:table-cell; 
  vertical-align:middle; 
  text-align:center;
}
@keyframes flash{
0%{opacity:1;}
50%{opacity:.5;}
100%{opacity:1;}
}

.box h2{color:aquamarine}
.box p{color:aquamarine}

animation keyframes를 이용해 배경화면 opacity(투명도) 조절을 이용하여 깜박깜박하는 효과를 줄수 있습니다.

 

---

<ul class="box">
	<li><img src="/images/view.jpg"></li>
	<li>
		<h2>on sunday</h2>
		<p>css / animation효과</p>
		<em>won&only</em>
		<a class="btn">MORE VIEW</a>
	</li>
</ul>

*{margin:0; padding:0; box-sizing:border-box;}
ul,li{list-style:none;}

.box{overflow:hidden;}
.box > li{
  float:left; 
  position:relative; 
  width:50%; 
}
.box > li:last-child{}
.box > li:last-child:before{
  content:"";
  position:absolute; 
  left:0; top:0; 
  width:100%; height:100%; 
  background:#dfdfdf;
  z-index:-1; 
  transition:all 0.5s;
}
.box > li:first-child{text-align:right;}
.box > li:last-child{padding:30px;}
.box > li:last-child h2{
  font-size:25px; 
  color:#444;
}
.box > li:last-child p{
  font-size:35px; 
  color:#444; 
  line-height:1;
  margin-top:10px;
}
.box > li:last-child em{
  display:block; 
  font-size:20px; 
  color:#444; 
  line-height:2; 
  margin-top:30px;
  font-style:normal;
}
a.btn{
  position:relative; 
  display:inline-block; 
  height:50px; 
  line-height:50px; 
  border:1px solid #444;
  padding:0 30px; 
  font-size:20px; 
  font-weight:bold; 
  margin-top:50px; 
  z-index:1;
}


.box:hover li:last-child:before{content:""; background-color:crimson;}
.box:hover li:last-child h2{color:#fff;}
.box:hover li:last-child p{color:#fff;}
.box:hover li:last-child em{color:#fff;}
.box:hover li:last-child a.btn{color:#fff;}
a.btn:before{
  content:""; 
  position:absolute; 
  left:0; top:0; 
  width:100%; height:0;
  background:black; 
  z-index:-1; 
  transition:all 0.5s;
}
.box:hover li:last-child a.btn:before{height:100%;}

 

ul 영역에 마우스를 올렸을때 오른쪽 텍스트가 있는 li에 배경이 나타나고, 글씨는 하얀색으로, MORE VEIW부분 배경화면이 위->아래로 천천히 내려오는효과가 눈에 보이는 애니메이션 입니다.