CSS3入门--线条动画特效实例

HTML:

<div></div>

CSS:

  div{ 

      width: 200px; height: 200px; margin: 200px auto; background: #000; 
      position: relative;-webkit-backface-visibility: hidden;
    backface-visibility: hidden;}
     div::after{   
        border-right: 1px solid #fff;
        border-left: 1px solid #fff;
        -webkit-transform: scale(1,0);
        transform: scale(1,0);
                }
     div::before{ 
                border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
        -webkit-transform: scale(0,1);
        transform: scale(0,1);

     }
     div::before,div::after{
    position:absolute;
  top:30px;
  right:30px;
  bottom:30px;
  left:30px;
  content:'';
  opacity:0;
  -webkit-transition:opacity .35s,-webkit-transform .35s;
  transition:opacity .35s,transform .35s
   pointer-events: none;
     }
     
     div:hover::after,div:hover::before {
  opacity:1;
  -webkit-transform:scale(1);
  transform:scale(1)
}

     body{background: yellowgreen;}
     *, :after, :before, input[type=search] {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    text-align: center;
}

demo:http://paul-xiao.github.io/demo/

转载于:https://www.cnblogs.com/paul-xiao/p/5125212.html