cssのグラデーションでborderを書く
1042 ワード
このようなことがあって、时には私は
コードは次のとおりです.
borderアニメーション
しかし、底辺
効果リンク
border
に少し効果をプラスしたいと思って、しかし仕方なくcss
自身のborder
のアニメーションは私の需要を満たすことができなくて、例えば私はborder
を使ってせいぜい以下のアニメーションしかできませんコードは次のとおりです.
.box {
width: 100px;
height: 100px;
border: 10px solid red;
transition: all 1s ease;
}
.box:hover {
border: 5px dashed blue;
}
borderアニメーション
しかし、底辺
hover
を無から有にするのは難しいと思います.border
を使うのは難しいと思います.background
のグラデーションでborder
をシミュレートし、私の望む効果を達成しました..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;
}
効果リンク