Question

我创建了以下笔：http://codepen.io/crashy/pen/zvKEPb

最初基于此笔：http://codepen.io/giana/pen/yYBpVY

不，我已大规模扩大边界以证明错误。

当发生边界过渡时，基本上在按钮的两条水平线上有一个奇怪的三角形类型形状与过渡一起运行。

我不知道造成这种情况的原因是什么，但它似乎没有发生在原作中，任何想法？

SASS如下：

$theme-primary-alpha: #27ae60;
$theme-primary-beta: #2ecc71;

$theme-secondary-alpha: #8e44ad;
$theme-secondary-beta: #9b59b6;

$theme-highlight-alpha: #bdc3c7;
$theme-highlight-beta: #ecf0f1;

$theme-lowlight-alpha: #2c3e50;
$theme-lowlight-beta: #34495e;

$border-width: 10px;

.btn { // Stripped out BS button
  display: inline-block;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
}

.btn-theme {
  @extend .btn;
  // Exagerate:
  font-size: 30px;
  padding: 20px 30px;
  // Effect styles
  border: 0;
  box-sizing: border-box;
  background-color: transparent;
  position: relative;
  vertical-align: middle;
  &::before,
  &::after {
    box-sizing: border-box;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
  }
}

.btn-theme-primary, .btn-theme-secondary {
  color: $theme-highlight-alpha;
  box-shadow: inset 0 0 0 $border-width $theme-highlight-alpha;
  transition: color 1000ms ease;
  &::before,
  &::after {
    border: $border-width solid transparent;
    width: 0;
    height: 0;
  }
  &::before {
    top: 0;
    left: 0;
  }
  &::after {
    bottom: 0;
    right: 0;
  }
  &:hover::before,
  &:hover::after,
  &:active::before,
  &:active::after,
  &:focus::before,
  &:focus::after {
    width: 100%;
    height: 100%;
  }
  &:hover::before,
  &:active::before,
  &:focus::before {
    transition: width 0.25s ease-out,
    height 0.25s ease-out 0.25s;
  }
  &:hover::after,
  &:active::after,
  &:focus::after {
    transition: border-color 0s ease-out 0.5s,
    width 0.25s ease-out 0.5s,
    height 0.25s ease-out 0.75s;
  }
}

.btn-theme-primary {
  &:hover,
  &:active,
  &:focus {
    color: $theme-primary-alpha;
  }
  &:hover::before,
  &:active::before,
  &:focus::before {
    border-top-color: $theme-primary-alpha;
    border-right-color: $theme-primary-alpha;
  }
  &:hover::after,
  &:active::after,
  &:focus::after {
    border-bottom-color: $theme-primary-alpha;
    border-left-color: $theme-primary-alpha;
  }
}

.btn-theme-secondary {
  &:hover,
  &:active,
  &:focus {
    color: $theme-secondary-alpha;
  }
  &:hover::before,
  &:active::before,
  &:focus::before {
    border-top-color: $theme-secondary-alpha;
    border-right-color: $theme-secondary-alpha;
  }
  &:hover::after,
  &:active::after,
  &:focus::after {
    border-bottom-color: $theme-secondary-alpha;
    border-left-color: $theme-secondary-alpha;
  }
}

Answer 1

您拥有border-width到10px，这意味着您已将所有边都设置为10px，从而制作一个20px宽度和高度的框。尝试从此处设置删除速记边框宽度：

border: 10px solid transparent;

而是为border-width和::before分别设置::after：

::before {
  border-width: 10px 10px 0 0;
}

::after {
  border-width: 0 0 10px 10px;
}

在测试中为我工作：http://codepen.io/pageaffairs/pen/KdgXEG

CSS边界过渡：之前和之后：奇怪的效果

1 个答案: