[CSS] animation Various effect application practice!

It is html / css that I practiced by applying the transition and animation that I taught before.

html/css

<div class="box">
  <h2>animation effect</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;
}

This is the effect of seeing the 2px thick boundary when hovering the mouse with the 1px boundary in the div.

html

<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 effect</dt>
      <dd>border</dd>
      <dd class="view">on sunday_tistory</dd>
	</dl>
</div>

css

.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;
}

When you hover the mouse, the border of the box div will slowly appear and the text color will change.
Raise the mouse using transition: 0.5s all; for 0.5 seconds
It is an effect that you can see well up to the direction where the red, blue, yellow, and green lines appear.

html

<div class="box">
	<h2>animation effect</h2>
	<p>background</p>
</div>

css

.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}

You can use animation keyframes to take advantage of the wallpaper's opacity adjustment to give it a flicker effect.

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

css

*{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%;}

When you hover the mouse over the ul area, the background appears in li with the right text, the characters are white, and the effect of slowly lowering the wallpaper of the MORE VEIW part from top to bottom is a visible animation.