Tạo menu ở góc bên phải bằng CSS + CSS animation

Đến hẹn lại lên, mỗi ngày mình sẽ cho ra từ 1 đến 2 bài về thủ thuật blogspot. Hôm nay mình sẽ hướng dẫn các bạn tạo menu ở góc bên phải hiện ra khi hover bằng CSS kết hợp với hiệu ứng chuyển động cực đẹp.

Cách thực hiện

Demo

Bước 1: Truy cập blogger.com > chủ đề > chỉnh sửa html > dán đoạn css này

.template-corner {
  position: fixed;
  color: #FFF;
  width: 1000px;
  text-align: center;
  font-size: 14px;
  z-index: 99999999;
}
.template-corner.template-top.template-right {
  top: -12px;
  right: -472px;
  -webkit-transform: rotateZ(45deg);
          transform: rotateZ(45deg);
}
.template-corner .template-title {
  position: relative;
  z-index: 999999999999999;
  background: #01B17B;
  height: 80px;
  line-height: 120px;
  width: 100%;
  border-bottom: 2px solid rgba(0, 0, 0, 0.25);
  font-weight: 600;
  display: block;
  opacity: 0.5;
  transition: 0.2s;
  transition-delay: 1.2s;
}
.template-corner .template-title:hover:after {
  content: '';
  background: rgba(255, 255, 255, 0.1);
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.template-corner .template-title .template-icon {
  position: absolute;
  text-align: center;
  top: 35px;
  left: 50%;
  font-size: 26px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.template-corner .template-links {
  position: relative;
  top: -42px;
  line-height: 40px;
  width: 100%;
  text-align: center;
  opacity: 0;
  transition: 0.2s;
  transition-delay: 1s;
}
.template-corner .template-links .template-link {
  display: block;
  cursor: pointer;
  position: absolute;
  transition: all 0.2s;
  transition-delay: 1s;
  left: 0;
  width: 100%;
  border-bottom: 2px solid rgba(0, 0, 0, 0.25);
  background: #333;
  color: #FFF;
  font-weight: 600;
  height: 41px;
  box-sizing: border-box;
}
.template-corner .template-links .template-link:hover:after {
  content: '';
  background: rgba(255, 255, 255, 0.1);
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.template-corner .template-links .template-link span {
  opacity: 0;
  transition: all 0s;
  position: relative;
  -webkit-transform: translateX(-275px) translate3D(0, 0, 0);
          transform: translateX(-275px) translate3D(0, 0, 0);
  display: inline-block;
  transition: all 0.2s;
  transition-delay: 0.6s;
}
.template-corner:hover .template-title {
  -webkit-animation: none;
          animation: none;
  transition-delay: 0s;
  opacity: 1;
}
.template-corner:hover .template-links {
  transition-delay: 0s;
  opacity: 1;
}
.template-corner:hover .template-links .template-link {
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  transition-delay: 0s;
}
.template-corner:hover .template-links .template-link:nth-of-type(1) {
  -webkit-transform: translate3D(0px, 40px, 0);
          transform: translate3D(0px, 40px, 0);
}
.template-corner:hover .template-links .template-link:nth-of-type(1) span {
  transition-delay: 0.2s;
}
.template-corner:hover .template-links .template-link:nth-of-type(2) {
  -webkit-transform: translate3D(0px, 80px, 0);
          transform: translate3D(0px, 80px, 0);
}
.template-corner:hover .template-links .template-link:nth-of-type(2) span {
  transition-delay: 0.4s;
}
.template-corner:hover .template-links .template-link:nth-of-type(3) {
  -webkit-transform: translate3D(0px, 120px, 0);
          transform: translate3D(0px, 120px, 0);
}
.template-corner:hover .template-links .template-link:nth-of-type(3) span {
  transition-delay: 0.6s;
}
.template-corner:hover .template-links .template-link:nth-of-type(4) {
  -webkit-transform: translate3D(0px, 160px, 0);
          transform: translate3D(0px, 160px, 0);
}
.template-corner:hover .template-links .template-link:nth-of-type(4) span {
  transition-delay: 0.8s;
}
.template-corner:hover .template-links .template-link span {
  opacity: 1;
  transition: 0.2s;
  -webkit-animation: none;
          animation: none;
  -webkit-transform: translateX(0px);
          transform: translateX(0px);
}

Bước 2: Dán đoạn html này ngay dưới thẻ mở

<body>

<div class="template-corner template-top template-right">
    <div class="template-title"><i class="template-icon fa fa-bars"></i></div>
    <div class="template-links"><a class="template-link" href="https://www.facebook.com/mkhoi2001" target="_blank"><span><i class='fa fa-facebook'></i> facebook</span> </a><a class="template-link" href="https://instagram.com/mkhoi_1112" target="_blank"><span><i class="fa fa-instagram"></i> instagram</span></a><a class="template-link" href="https://codepen.io/khoiromdz"
            target="_blank"><span><i class="fa fa-codepen"></i> codepen</span> </a><a class="template-link" href="https://github.com/khoiromdz" target="_blank"><span><i class="fa fa-github"></i> github</span> </a></div>
</div>

Bước 3: Chỉnh sửa, lưu lại, sau đó thì hưởng thụ kết quả.

Tổng kết

Chỉ với 3 bước nhanh gọn lẹ, chúng ta đã tạo ra menu ở góc phải rồi. Chúc các bạn thành công!