Question

我想＆＃34;画＆＃34;围绕矩形按钮的轮廓，这意味着我喜欢边界过渡而不是淡入。我已经对这些按钮有一堆效果..我试图应用一个已经制作的绘制轮廓CSS的例子但它什么都没做..

这是我的代码

＆＃13;

function hoverIcons(classnm) {
  document.getElementById(classnm).css({height: '+=30%', width: '+=30%'});
}

function nothoverIcons(classnm) {
  document.getElementById(classnm).css({height: '+=30%', width: '+=30%'});
}

＆＃13;

#menu {
  position: fixed;
  bottom: 20;
  right: 20;
  width: 80;
  height: 30px;
  background-color: Menu background;
  z-index: 10;
}

#mainicons {
  position: fixed;
  bottom: 20px;
  right: 193px;
  text-align: center;
}

#mainicons i {
  display: inline-block;
  margin-top: 0;
  margin-left: -3px;
  height: 30px;
  width: 50px;
  padding: 10px;
  color-color: Main icon;
  background-color: Main icon background;
  text-transform: uppercase;
  font-size: 15px;
  line-height: 30px;
  -webkit-transition: all .7s ease;
  -moz-transition: all .7s  ease;
  -o-transition: all .7s  ease;
  transition: all .7s  ease;
}

#mainicons i:hover {
  color-color: Hover;
  background-color: Main icon;
  transform: scale(1.1);
  -webkit-transition: all .7s ease;
  -moz-transition: all .7s  ease;
  -o-transition: all .7s  ease;
  transition: all .7s  ease;
}

/*-- BEGINNING BORDER EFFECT (PASTED) --*/
#mainicons {
  transition: color 0.25s;
  box-sizing: border-box;
}
#mainicons::before, #mainicons::after {
  box-sizing: inherit;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
}
#mainicons::before, #mainicons::after {
  border: 2px solid transparent;
  width: 0;
  height: 0;
}
#mainicons::before {
  top: 0;
  left: 0;
}
#mainicons::after {
  bottom: 0;
  right: 0;
}
#mainicons:hover {
  color: #97c5e0;
}
#mainicons:hover::before, #mainicons:hover::after {
  width: 100%;
  height: 100%;
}
#mainicons:hover::before {
  border-top-color: #97c5e0;
  border-right-color: #97c5e0;
  transition: width 0.25s ease-out,  height 0.25s ease-out 0.25s;
}
#mainicons:hover::after {
  border-bottom-color: #97c5e0;
  border-left-color: #97c5e0;
  transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}



/*-- BEGINNING BORDER EFFECT (PASTED) --*/
/* originally written in SCSS


#mainicons {
    transition: color 0.25s;
    box-sizing: border-box;
    &::before,
  &::after {
    box-sizing: inherit;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;}

  &::before,
  &::after {
    border: 2px solid transparent;
    width: 0;
    height: 0;
  }

  &::before {
    top: 0;
    left: 0;
  }

  &::after {
    bottom: 0;
    right: 0;
  }
  
  &:hover {
    color: #97c5e0;
  }

  &:hover::before,
  &:hover::after {
    width: 100%;
    height: 100%;
  }

  &:hover::before {
    border-top-color: #97c5e0; 
    border-right-color: #97c5e0;
    transition:
      width 0.25s ease-out, 
      height 0.25s ease-out 0.25s; 
  }

  &:hover::after {
    border-bottom-color: #97c5e0;
    border-left-color: #97c5e0;
    transition:
      border-color 0s ease-out 0.5s,
      width 0.25s ease-out 0.5s,
      height 0.25s ease-out 0.75s; 
  }
}

*/

＆＃13;

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>

<div id="menu">

<div id="mainicons" onmouseover="hoverIcons('mainicons')" onmouseout="nothoverIcons('mainicons')">
<a href="/" title="Home"><i class="fa fa-home"></i></a>
<a href="/ask" title="Ask"><i class="fa fa-envelope"></i></a>
<a href="/submit" title="Request"><i class="fa fa-pencil "></i></a>
<a href="/archive" title="Archive"><i class="fa fa-clock-o"></i></a>
</div>
</div>

＆＃13;

我不得不承认，理解他/她为大纲（https://codepen.io/giana/pen/yYBpVY）尝试做的事情非常复杂。所以如果你有更好/更简单的方法来做这件事，非常感谢!!

Answer 1

你的html看起来很有趣 - 你有一个中心按钮的html但是没有出现？

你可以只使用紫色＆＃39;或者＆＃39; blue＆＃39;对于颜色如果你不想使用html代码/ id，你会发现它更容易，你不需要在你的CSS中定义这些 - 美元符号通常用于jquery - 我没有＆＃ 39;之前看到它在css中用过，但那只是我，我不会说它不能被使用[或者我会被纠正]。编辑：CSS vars仍然是no support in Chrome or IE的实验技术（虽然支持边缘）..由于Chrome中没有支持，我暂时不推迟使用它

我稍微调整了你的代码。我添加了一个显示：阻止按钮代码，所以现在它们在窗口中显示一个在另一个下面。删除它，它们将显示，因为布局将显示在您的原始代码中。出于代码段/ jsfiddle窗口的目的，它只是更方便。我用你定义中的html颜色替换了颜色，但就像我说的那样，将来你可以说border-color:red等。

请注意，这仅作为指南。根据需要调整！

＆＃13;

button {
  display: block;
  background: none;
  border: 0;
  box-sizing: border-box;
  margin: 1em;
  padding: 1em 2em;
  box-shadow: inset 0 0 0 2px #f45e61;
  color: #f45e61;
  font-size: inherit;
  font-weight: 700;
  position: relative;
  vertical-align: middle;
  &::before,
  &::after {
    box-sizing: inherit;
    content: '';
    position: relative;
    width: 100%;
    height: 100%;
  }
}


.draw {
  transition: color 0.25s;
  border: 2px solid transparent;
  height: 100%;
}

.draw::after {
  bottom: 0;
  right: 0;
}

.draw:hover {
  color: #60daaa;
  border-color: #fbca67;
  width: 100%;
}

.meet {
  border-top-color: #fbca67;
  border-right-color: #fbca67;
}
.meet::after {
  top: 0;
  left: 0;
}

.meet:hover {
  color: #fbca67;
  z-index: 1;
  border-bottom-color: #fbca67!important;
  border-left-color: #fbca67!important;
}



.center {
  width: 200px;
  height: 100px;
  text-align: center;
  padding: 10px;
  border-style: solid;
   border-top-width: 2px!important;
  border-bottom-width: 2px!important;
  border-color: #6477b9;
  color: #6477b9;
}

.center:hover {
  color: #FF0000;
  border-left-width: 2px!important;
  border-right-width: 2px!important;
  z-index: 90!important;
}

.center:focus {
  border: 3px dashed red;
  color: forestgreen;
}

.spin {
  width: 5em;
  height: 5em;
  padding: 0;
  border-width: 2px;
  border-style: solid;
  border-color: transparent;
  top: 0;
  left: 0;
}

.circle {
  border-radius: 100%;
  box-shadow: none;
}

.thick {
  color: #f45e61;
  z-index: -1;
  background: #ffffff;
  border-color: #f45e61;
}

.thick:hover {
  color: #fff;
  font-weight: 700;
  background: #f45e61;
}

.thick::after {
  mix-blend-mode: color-dodge;
}


/* Page styling */

html {
  background: #4b507a;
}

body {
  background: #fefefe;
  color: #4b507a;
  font: 300 24px/1.5 Lato, sans-serif;
  margin: 1em auto;
  max-width: 36em;
  padding: 1em 1em 2em;
  text-align: center;
}

.buttons {
  isolation: isolate;
}

h1 {
  font-weight: 300;
  font-size: 2.5em;
}

＆＃13;

<!---<h1>CSS Border Transitions</1>-->

<section class="buttons">
  <button class="draw">Draw</button>

  <button class="draw meet">Draw Meet</button>

  <button class="center">Center</button>

  <button class="spin">Spin</button>

  <button class="spin circle">Spin Circle</button>

  <button class="spin thick">Spin Thick</button>
</section>

＆＃13;

Fiddle here

Answer 2

oups，我终于明白了，效果实际上是在容器上设置的，你希望在链接上设置它。

您基本上需要更新选择器。

例如

function hoverIcons(classnm) {
 // document.getElementById(classnm).css({height: '+=30%', width: '+=30%'});
}

function nothoverIcons(classnm) {
//  document.getElementById(classnm).css({height: '+=30%', width: '+=30%'});
}

#menu {
  position: fixed;
  bottom: 20;
  right: 20;
  width: 80;
  height: 30px;
  background-color: Menu background;
  z-index: 10;
}

#mainicons {
  position: fixed;
  bottom: 20px;
  right: 193px;
  text-align: center;
}

#mainicons a {
  transition: color 0.25s;
  display: inline-block;
  position: relative;
  margin: 0 25px;
  padding: 10px 20px;
  box-sizing: border-box;
}

a::before,
a::after {
  content: '';
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

a::before,
a::after {
  border: 2px solid transparent;
  width: 0;
  height: 0;
}

a::before {
  top: 0;
  left: 0;
}

a::after {
  bottom: 0;
  right: 0;
}

a:hover {
  color: #97c5e0;
}

a:hover::before,
a:hover::after {
  width: 100%;
  height: 100%;
}

a:hover::before {
  border-top-color: #97c5e0;
  border-right-color: #97c5e0;
  transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}

a:hover::after {
  border-bottom-color: #97c5e0;
  border-left-color: #97c5e0;
  transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />

<div id="menu">

  <div id="mainicons" onmouseover="hoverIcons('mainicons')" onmouseout="nothoverIcons('mainicons')">
    <a href="/" title="Home"><i class="fa fa-home"></i></a>
    <a href="/ask" title="Ask"><i class="fa fa-envelope"></i></a>
    <a href="/submit" title="Request"><i class="fa fa-pencil "></i></a>
    <a href="/archive" title="Archive"><i class="fa fa-clock-o"></i></a>
  </div>
</div>

 #mainicons a{ /* select here the links */
  transition: color 0.25s;
  box-sizing: border-box;
  display:inline-block;
  position:relative ;
  margin:0 25px;
  padding: 10px 20px;
  box-sizing:content-box;

  &::before,
  &::after {
    content: '';
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    }

  &::before,
  &::after {
    border: 2px solid transparent;
    width: 0;
    height: 0;
    }

  &::before {
    top: 0;
    left: 0;
  }

  &::after {
    bottom: 0;
    right: 0;
  }

  &:hover {
    color: #97c5e0;
  }

  &:hover::before,
  &:hover::after {
    width: 100%;
    height: 100%;
  }

  &:hover::before {
    border-top-color: #97c5e0; 
    border-right-color: #97c5e0;
    transition:
      width 0.25s ease-out, 
      height 0.25s ease-out 0.25s; 
  }

  &:hover::after {
    border-bottom-color: #97c5e0;
    border-left-color: #97c5e0;
    transition:
      border-color 0s ease-out 0.5s,
      width 0.25s ease-out 0.5s,
      height 0.25s ease-out 0.75s; 
  }
}

在悬停

2 个答案: