使用 transform-origin 实现的 hover 动效 2

最新推荐文章于 2024-09-11 10:49:17 发布

庇耳拉海莱

最新推荐文章于 2024-09-11 10:49:17 发布

阅读量134

点赞数

分类专栏： css动效文章标签： css css3 前端动效动画

本文链接：https://blog.csdn.net/broken_promise/article/details/128700294

版权

css动效专栏收录该内容

11 篇文章 0 订阅

订阅专栏

使用 transform-origin 实现的 hover 动效2

先看结果
在这里插入图片描述

思路还是挺简单的, 一般要实现关于边框的效果都是在底层元素设置颜色, 在上层元素遮挡中间部分并且露出边框部分即可, 这个例子也不例外.

另外就是标题上写的使用 transform-origin, 因为两个边框分别是从「左下角」和「右上角」出现的.

HTML

<a class="welcome">
  <span>Happy New Year🐰</span>
</a>

CSS

.welcome {
  text-decoration: none;
  color: #111;
  position: relative;
  display: inline-block;
}
.welcome span {
  margin: 2px;
  padding: 0 1em;
  font-size: 20px;
  line-height: 1.5;
  display: inline-block;
  background-color: #fff;
  position: relative;
  z-index: 1;
}

两个边框都是使用伪元素实现的

.welcome::before, .welcome::after {
  content: '';
  display: block;
  position: absolute;
  background-color: #ff5e57;
  inset: 0;
  transform: scaleX(0) scaleY(0);
  transition: all .5s ease;
}
.welcome::before {
  transform-origin: left bottom;
}
.welcome::after {
  transform-origin: top right;
}
.welcome:hover::before,
.welcome:hover::after {
  transform: scaleX(1) scaleY(1);
}