[CSS] hover 시 테두리가 빛나는 css 만들기

box-shadow 속성을 변경하여 HTML 요소에 빛나는 효과를 만들 수 있다.

 

box-shadow는 offset 0, spread 10px 및 blur 0으로 요소에 흰색 반투명 ​​그림자를 추가한다.

transition 속성은 hover 시  box-shadow 값을 0.5초 이상 변경한다.

 

<h1>Shine css</h1>

<div class="shine">
<div class="red">
  <div class="orange">
    <div class="yellow">
      <div class="green">
        <div class="blue">
          <div class="tornado"></div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="padding red">
  <div class="padding orange">
    <div class="padding yellow">
      <div class="padding green">
        <div class="padding blue">
          <div class="padding purple">Not Collapsed</div>
        </div>
      </div>
    </div>
  </div>
</div>

 

/* PRESENTATIONAL STYLES */

html {
  font-size: 16px;
}

body {
  background-color: #333;
  color: #fff;
  font-family: Helvetica;
  padding: 25px;
  text-align: center;
}

h1 {
  font-size: 2em;
  font-weight: 800;
}

/* DEMO STYLES */

/* Parent */
div {
  margin: 15px 0;
}

/* Add padding to the parent */
.padding {
  padding: 1px 0;
}

/* Here come the children */
.red {
  background-color: #ff6b6b;
}

.orange {
  background-color: #ff9e2c;
}

.yellow {
  background-color: #eeee78;
}

.green {
  background-color: #4ecd9d;
}

.blue {
  background-color: #4e97cd;
}

.shine {
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  transition: box-shadow 0.5s;

}
.shine:hover {
  box-shadow: 0 0 20px rgba(255, 255, 255, 1);
}