css如何实现这样的秒变效果呢不用给这种复杂的图形描边，只要给一个div的border描边就行当鼠标进入就给这个div的border加一个描边的效果，现在是直接的显示隐藏，感觉不好看。求大神给一个demo或者方法，谢谢了先！

这种直接svg吧 svg描边动画

css div{border:1px solid transparent} div:hover{boeder:1px solid gray} 就是div hover状态时，改变border的颜色

css3的新版特性动画应该可以解决。或者也可以这样、 <div> <img src="xxx,jpg"/> <span class="top"></span> <span class="bootom"></span> <span class="left"></span> <span class="right"></span> </div> 具体效果可以参考： http://www.jq22.com/yanshi1524 幽灵按钮或者按钮动画。理论就是用span代替4个border。然后用css3或者jq来写动画

css如何实现素描描边效果

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

图片描述

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

图片描述

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

求大神给一个demo或者方法，谢谢了先！

阅读 9.2k

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>Title</title>
<style>
    .linebox {
        position: relative;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background: #e8e8e8;
    }
    .linebox-stroke > .line-t {
        -webkit-animation: stroke .4s;
        animation: stroke .4s;
        -webkit-animation-delay: 0s;
        animation-delay: 0s;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
    }
    .linebox-stroke > .line-r {
        -webkit-animation: stroke .3s;
        animation: stroke .3s;
        -webkit-animation-delay: .4s;
        animation-delay: .4s;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
    }
    .linebox-stroke > .line-b {
        -webkit-animation: stroke .4s;
        animation: stroke .4s;
        -webkit-animation-delay: .7s;
        animation-delay: .7s;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
    }
    .linebox-stroke > .line-l {
        -webkit-animation: stroke .3s;
        animation: stroke .3s;
        -webkit-animation-delay: 1.1s;
        animation-delay: 1.1s;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
    }
    .linebox-stroke-reverse > .line {
        transform: scale(1, 1);
        opacity: 1;
    }
    .linebox-stroke-reverse > .line-l {
        -webkit-animation: stroke-reverse 0.3s;
        animation: stroke-reverse 0.3s;
        -webkit-animation-delay: 0s;
        animation-delay: 0s;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
    }
    .linebox-stroke-reverse > .line-b {
        -webkit-animation: stroke-reverse 0.4s;
        animation: stroke-reverse 0.4s;
        -webkit-animation-delay: 0.3s;
        animation-delay: 0.3s;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
    }
    .linebox-stroke-reverse > .line-r {
        -webkit-animation: stroke-reverse 0.3s;
        animation: stroke-reverse 0.3s;
        -webkit-animation-delay: .7s;
        animation-delay: .7s;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
    }
    .linebox-stroke-reverse > .line-t {
        -webkit-animation: stroke-reverse 0.4s;
        animation: stroke-reverse 0.4s;
        -webkit-animation-delay: 1s;
        animation-delay: 1s;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
    }
    .line {
        position: absolute;
        background-color: red;
        transform: scale(0, 0);
        opacity: 0;
    }
    .line-t {
        transform-origin: left;
        width: 100%;
        height: 1px;
        top: 0;
        left: 0;
    }
    .line-r {
        height: 100%;
        width: 1px;
        top: 0;
        right: 0;
        transform-origin: top;
    }
    .line-b {
        width: 100%;
        height: 1px;
        bottom: 0;
        right: 0;
        transform-origin: right;
    }
    .line-l {
        height: 100%;
        width: 1px;
        bottom: 0;
        left: 0;
        transform-origin: bottom;
    }
    @keyframes stroke {
        0% {
            transform: scale(0, 0);
            opacity: 0;
        }
        100% {
            transform: scale(1, 1);
            opacity: 1;
        }
    }
    @keyframes stroke-reverse {
        0% {
            transform: scale(1, 1);
            opacity: 1;
        }
        100% {
            transform: scale(0, 0);
            opacity: 0;
        }
    }

</style>

</head>
<body>
<div style="width:50%;height:400px;padding: 10px; position: relative; box-sizing: border-box; " >

<div class="linebox linebox-stroke-reverse">
    <span class="line line-t"></span>
    <span class="line line-r"></span>
    <span class="line line-b"></span>
    <span class="line line-l"></span>
</div>

</div>
<script>

window.onload=function(){
    var oDiv=document.querySelector('.linebox');
    oDiv.onmouseenter=function(){
        this.className="linebox linebox-stroke"
    }
    oDiv.onmouseleave=function(){
        this.className="linebox linebox-stroke-reverse"
    }
}

</script>
</body>
</html>

<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> <div class="box">div</div>

css如何实现素描描边效果

你尚未登录，登录后可以

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？

如何实现从一个div中拖拽dom到另一个div容器？

css3如何实现这样的圆环效果?

图片沿着圆环的转动有什么方法吗？

点击dom节点里面的子元素，如何点击的是某个节点？

flex相关 flex: 1的子元素如何宽度能100%且不溢出？