Web 前端开发 让前端飞

利用css的渐变写border

2017-07-06  本文已影响0人  jackPan

事情是这样的,有时候我想给 border 加点动效,但是无奈 css 本身的
border 的动画不能满足我的需要,比如我用 border 最多也就只能做到如下的动画

代码如下:

<div class="box"></div>
.box {
  width: 100px;
  height: 100px;
  border: 10px solid red;
  transition: all 1s ease;
}
.box:hover {
  border: 5px dashed blue;
}

border动画

但是我想让一个底边 hover 之后从无到有, 这一点估计使用 border 很难做到
于是乎, 我就用 background 的渐变色来模拟 border , 然后达到了我想要的效果。

<div class="box"></div>
.box {
  width: 100px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 5px;
  background-color: #ccc;
  transition: all .5s ease;
  background: #ccc linear-gradient(to right, blue, blue) no-repeat center bottom;
  background-size: 0 2px;
  background-position: center bottom;
}

.box:hover {
  background-size: 100% 2px;
} 

效果链接

上一篇 下一篇

猜你喜欢

热点阅读