搜尋

首頁  >  問答  >  主體

css3 - css如何实现素描描边效果

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

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

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

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

迷茫迷茫2767 天前635

全部回覆(4)我來回復

  • 怪我咯

    怪我咯2017-04-17 11:38:29

    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來寫動畫

    回覆
    0
  • 高洛峰

    高洛峰2017-04-17 11:38:29

    這種直接svg吧 svg描邊動畫

    回覆
    0
  • PHP中文网

    PHP中文网2017-04-17 11:38:29

    css

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

    就是p hover狀態時,改變border的顏色

    回覆
    0
  • PHP中文网

    PHP中文网2017-04-17 11:38:29

    雷雷

    回覆
    0
  • 取消回覆