jquery - 底部三 Angular 形的双边框 + 完整动画

Question

我的网站右下角有一个三 Angular 形的按钮

代码:

#top-btn a, #top-btn-BG {
 position: fixed;
 right: 0;
 margin: 0; 
}

#top-btn a {
  z-index: 999;
  padding: 30px 30px 25px 35px;
  color: #707070;
  bottom: 0; right: 0;
}

#top-btn-BG {
  display: block;
  z-index: 950;
  border-width: 0 0 100px 100px;
  border-color: transparent transparent red transparent;
  border-style: solid;
  bottom: 0; right: 0;
  width: 0; height: 0;
  -webkit-transform:rotate(360deg);
}

<div id="top-btn">
  <a href="...">up</a>
  <div id="top-btn-BG"></div>
</div>	

我想在三 Angular 形的外侧添加一个 1px color: #000; 边框(就在左上边缘)

我还想在鼠标悬停时为右下角的三 Angular 形设置动画，但这个功能不太重要。

Answer 1

根据评论更新了答案

我不确定(只是左上边缘)但这是你想要的吗？

我已经使用 : before 来实现这个，我也为你放了一些 transition，希望这对你有帮助，如果还有什么请问我。

改变transition的值，让动画变慢变快。

transition: all 0.6s ease-in-out;

#top-btn a,
#top-btn-BG {
  position: fixed;
  right: 0;
  margin: 0;
}

#top-btn a {
  z-index: 999;
  padding: 30px 30px 25px 35px;
  color: #707070;
  bottom: 0;
  right: 0;
}

#top-btn-BG {
  display: block;
  z-index: -7;
  bottom: -30px;
  right: -70px;
  width: 172px;
  height: 100px;
  transform: rotate(135deg);
  background: transparent;
  overflow:hidden;
  border-bottom: 1px solid #000;
}

#top-btn-BG:after {
  content: '';
  display: block;
  z-index: 950;
  border-width: 0 0 124px 125px;
  border-color: transparent transparent red transparent;
  border-style: solid;
  
  bottom: 100px;
  right: -2%;
  width: 42px;
  height: 0;
  position: relative;
  transition: all 0.6s ease-in-out;
}

#top-btn a:hover+#top-btn-BG:after,#top-btn-BG:hover:after {
  bottom: 15px;
}

<div id="top-btn">
  <a href="...">up</a>
  <div id="top-btn-BG"></div>
</div>