[分享]css3按钮进入动画

CSS3的出现让网页设计更加自由和灵活。其中，按钮进入动画是网页设计中非常流行的一种效果，可以让网站更加生动有趣。这种效果通过CSS3的过渡和动画属性来实现。/ 定义按钮样式 / .btn { bac...

CSS3的出现让网页设计更加自由和灵活。其中，按钮进入动画是网页设计中非常流行的一种效果，可以让网站更加生动有趣。这种效果通过CSS3的过渡和动画属性来实现。

/* 定义按钮样式 */
.btn {
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
/* 鼠标悬停时的效果 */
.btn:hover {
  z-index: 1;
}
/* 定义before伪类 */
.btn:before {
  content: "";
  position: absolute;
  left: 0;
  top: -100%;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.1);
  transform: translateY(-100%);
  transition: transform 0.3s;
}
/* 鼠标进入时，按钮上方白色层下滑并停止 */
.btn:hover:before {
  transform: translateY(0);
}
/* 定义after伪类 */
.btn:after {
  content: "";
  position: absolute;
  left: -100%;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.1);
  transform: translateX(-100%);
  transition: transform 0.3s;
}
/* 鼠标进入时，按钮左侧白色层向右侧滑动并停止 */
.btn:hover:after {
  transform: translateX(0);
} 

以上代码通过CSS3的过渡和动画属性，定义了按钮进入动画的效果。在鼠标悬停时，通过伪类的transform属性和transition属性，实现了按钮上方和左侧的白色层下滑和滑动的效果，让按钮的交互效果更加生动有趣。