css3 - css如何实现素描描边效果
迷茫
迷茫 2017-04-17 11:36:29
0
4
631

css如何实现这样的秒变效果呢

不用给这种复杂的图形描边,只要给一个p的border描边就行

当鼠标进入就给这个p的border加一个描边的效果,现在是直接的显示隐藏,感觉不好看。

求大神给一个demo或者方法,谢谢了先!

迷茫
迷茫

业精于勤,荒于嬉;行成于思,毁于随。

全部回复(4)
刘奇

css3的新版特性动画应该可以解决。或者也可以这样、

<p>
    <img src="xxx,jpg"/>
    <span class="top"></span>
    <span class="bootom"></span>
    <span class="left"></span>
    <span class="right"></span>
</p>

具体效果可以参考:
http://www.jq22.com/yanshi1524

幽灵按钮或者按钮动画。

理论就是用span代替4个border。然后用css3或者jq来写动画

小葫芦

这种直接svg吧 svg描边动画

洪涛

css

p{border:1px solid transparent}
p:hover{boeder:1px solid gray}

就是p hover状态时,改变border的颜色

洪涛

<style type="text/css">
.box {
  width: 100px;
  height: 100px;
  padding: 10px;
  transition: box-shadow .6s;
}
.box:hover {
  box-shadow: 0 0 6px 1px red inset;
}
</style>
<p class="box">p</p>
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板