龙年大吉

.markdown

龙年大吉

A Pen by forestlet on CodePen.

License.

index.html

<div class="bg">
  <div class="txt"></div>
</div>

style.css

.bg {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  width: 480px;
  padding: 80px;
  margin: 0 auto;
  cursor: pointer;
  border: 0;
  border-radius: 0.4rem;
  transform: translateY(-50%);
  overflow: hidden;
}

.bg::before,
.bg::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.bg::before {
  transform: scale(1);
  inset: 0;
  background-image: url("https://cdn.midjourney.com/3cf4c274-8246-47e8-be4d-162a5cf2833e/0_2.webp");
  background-size: cover;
  transition: 0.3s ease transform;
  z-index: 1;
}

.txt {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
}

.txt::before,
.txt::after {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  line-height: 1;
  text-align: center;
  padding: 70px 0;
  transition: 0.2s ease all;
}

.txt::before {
  content: "开启新年";
  opacity: 1;
  transform: scale(1);
}

.txt::after {
  content: "龙年大吉";
  font-weight: bold;
  transform: scale(0);
  opacity: 0;
}

.bg:hover:before {
  transform: scale(1.3);
}

.bg:hover .txt::before {
  opacity: 0;
  transform: scale(4);
}

.bg:hover .txt::after {
  opacity: 1;
  transform: scale(1);
}