Alt-k
11/13/2019 - 5:18 AM

hoverした時に横から背景アニメーション

【参考サイト】 https://www.nxworld.net/tips/10-css-hover-fill-animation.html

index.html
content_copyfile_download
<ul class="header_nav_list flex_box flex_between">
            <li class="button"><a href="#">HOME</a></li>
            <li><a href="#">BUSINESS</a></li>
            <li><a href="#">ABOUT US</a></li>
            <li><a href="#">PROCLAMATION</a></li>
            <li><a href="#">CONTACT</a></li>
            <li><a href="#">WEB事業部サイト</a></li>
          </ul>
style.css
content_copyfile_download
.header_nav_list li:hover {
  color: #fff;
}

.header_nav_list li::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  content: "";
  background: #333;
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform 0.3s;
}

.header_nav_list li:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}

.header_nav_list li a {
  padding: 10px;
}