伪元素的背景剪辑

2022-01-28 01:30:20 标签 htmlcss

我有一个按钮(实际上是一个使用的链接)。

我必须使用伪元素。::after

问题是我想倾斜伪元素,然后剪辑到我的原始框。

这是没有伪元素的按钮。

@import url("https://fonts.googleapis.com/css2?family=Staatliches&display=swap");
body {
  display: flex;
  justify-content: center;
  text-align: center;
  color: #788;
}
#hover-skew {
  display: block;
  text-decoration: none;
  color: #ffffff;
  width: 7em;
  padding: 1em;
  background-color: #000000;
  font-size: 30px;
  font-family: Staatliches;
  letter-spacing: 0.3em;
  position: relative;
  z-index: 1;
}
<a href="#" id="hover-skew">Button</a>

注意到它是如何溢出的了吗?我希望它和盒子的原始尺寸一样。

@import url("https://fonts.googleapis.com/css2?family=Staatliches&display=swap");
body {
  display: flex;
  justify-content: center;
  text-align: center;
  color: #788;
}
#hover-skew {
  display: block;
  text-decoration: none;
  color: #ffffff;
  width: 7em;
  padding: 1em;
  background-color: #000000;
  font-size: 30px;
  font-family: Staatliches;
  letter-spacing: 0.3em;
  position: relative;
  z-index: 1;
}
#hover-skew::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #777;
  z-index: -1;
  transform: skewX(-30deg) scale(1.3, 1);
  -webkit-background-clip: border-box;
  overflow: hidden;
  transition: transform 200ms ease-in;
}
<a href="#" id="hover-skew">Button</a>

我知道我用了比例,但这无关紧要,我要澄清的是,我用了比例,就像我用了倾斜,所以比例使它适合盒子。

同样要澄清的是,我使用了倾斜,这样我将缩放::after元素为0,缩放为1:hover创建一个漂亮的效果。

我试图复制这个网站上的悬停按钮的风格,但通过使用标签,所以如果你有任何其他方法,然后请评论。

谢谢你!

下面是一个例子:

有用的来源:

@import url("https://fonts.googleapis.com/css2?family=Staatliches&display=swap");
body {
  display: flex;
  justify-content: center;
  text-align: center;
  color: #788;
}
#hover-skew {
  display: block;
  text-decoration: none;
  color: #ffffff;
  width: 7em;
  padding: 1em;
  background-color: #000000;
  font-size: 30px;
  font-family: Staatliches;
  letter-spacing: 0.3em;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
#hover-skew:after {
  content: "";
  display: block;
  position: absolute;
  height: 100%;
  width: 120%;
  top: 0;
  left: -5%;
  z-index: -1;
  transition: transform .3s ease-out;
  transform: translateX(-100%) skew(-10deg);
  background-color: #777;
}
#hover-skew:hover:after {
  transform: translateX(0) skew(-10deg);
}
<a href="#" id="hover-skew">Button</a>

伪元素徘徊

阅读全文

▼ 版权说明

相关文章也很精彩
推荐内容
更多标签
相关热门
全站排行
随便看看

错说 cuoshuo.com —— 程序员的报错记录

部分内容根据CC版权协议转载;网站内容仅供参考,生产环境使用务必查阅官方文档

辽ICP备19011660号-5

×

扫码关注公众号:职场神器
发送: 1
获取永久解锁本站全部文章的验证码