实现鼠标悬停,div勾画div边框的动画

鼠标悬浮,边框div边框的动画样式,效果图如下:

首先定义div及其样式:

 <style>
   .show
   {
        width:300px;
        height:200px;
        border:1px solid red;
        background:yellow;
 }
 </style>
 <div class="show"></div>

界面展示效果如下:

通过指定样式clip来指定,裁剪的区域:

然后需要做的是将这个裁剪过程用动画连贯起来,修改css样式

    .show
     {
         position: absolute;
         width: 300px;
         height: 200px;
         top: 400px;
         left: 400px;
         bottom: 400px;
         right: 400px;
         border:1px solid red;
         animation: ClipAfter 4s linear infinite;
         background: yellow;
     }
     @keyframes ClipAfter {
         0%, 100% {
             /*为了在动画过程中能保留右边框和下边框,rect的right和bottom分别多取两个像素*/
             /*为了在动画的终点和起点不要显示上边框和左边框,rect的top和left分别多取了一个像素*/
             clip: rect(1px,302px,202px,1px);
         }
         25% {
             clip: rect(100px,302px,202px,150px);
         }

         50% {
             clip: rect(200px,302px,202px,300px);
         }
         75% {
             clip: rect(100px,302px,202px,150px);
         }
     }

更改之后的效果图如下:

同样可以定义出保留上边框和左边框的动画样式:

   @keyframes ClipBefore {
         100%,0%{
             clip:rect(0px,300px,200px,0px);
         }
         25%
         {
             clip:rect(0px,150px,100px,0px);
         }
         50%{
             clip:rect(0px,0px,0px,0px);
         }
         75%{
             clip:rect(0px,150px,100px,0px);
         }
     }

由于开篇示例中的动画,是左上,和右下方边框的动画是同步进行的,所以使用div的伪类before(实现左上边框动画),after(实现右下边框动画)

css:

     .region-wrap {
         width: 320px;
         height: 220px;
         border: 1px solid #f4f4f4;
     }

     .region {
         position: absolute;
     }
     .content
     {
         position:  absolute;
         top: 10px;
         left: 10px;
         width: 300px;
         height: 200px;
         border:1px solid #aa0507;
     }
     .content:before,.content:after
     {
         position: absolute;
         top:;
         right:;
         bottom:;
         left:;
         color: #A0A0A0;
         content: '';
         box-sizing: border-box;
         margin: -10px;
         z-index: -1;
     }
     .content:before
     {
         /*background: #cc1234;*/
         box-shadow: inset 0 0 0 1px;
         animation: ClipBefore 4s linear infinite;
     }
     .content:after
     {
         box-shadow: inset 0 0 0 2px;
         animation: ClipAfter 4s linear infinite;
         /*由于图片展示的区域比外边框小,所以这里要重新定位after的展示位置*/
         top: 18px;
         bottom: 0px;
         right: 0px;
         left: 18px;
     }
     .content>img
     {
         width: 300px;
         height: 200px;
     }

     @keyframes ClipAfter {
         0%, 100% {
             clip: rect(0px,302px,202px,0px);
         }
         25% {
             clip: rect(100px,302px,202px,150px);
         }

         50% {
             clip: rect(200px,302px,202px,300px);
         }
         75% {
             clip: rect(100px,302px,202px,150px);
         }
     }
     @keyframes ClipBefore {
         100%,0%{
             clip:rect(0px,300px,200px,0px);
         }
         25%
         {
             clip:rect(0px,150px,100px,0px);
         }
         50%{
             clip:rect(0px,0px,0px,0px);
         }
         75%{
             clip:rect(0px,150px,100px,0px);
         }
     }
     @keyframes ClipAfter {
         0%, 100% {
             /*为了在动画过程中能保留右边框和下边框,rect的right和bottom分别多取两个像素*/
             /*重新定位后,为了在动画的终点和起点不要显示上边框和左边框,rect的top和left分别多取了二个像素*/
             clip: rect(2px,302px,202px,2px);
         }
         25% {
             clip: rect(100px,302px,202px,150px);
         }

         50% {
             clip: rect(200px,302px,202px,300px);
         }
         75% {
             clip: rect(100px,302px,202px,150px);
         }
     } 

html:

 <div class="region-wrap">
     <div class="region">
         <div class="content">
             <img src="./images/show-window/timg.jpg"/>
         </div>
     </div>
 </div>

效果如下:

最后,利用flex布局,放入以列表的形式展示,并将样式应用到hover伪类中

html

 <div class="showwindow-wrap">
     <div class="showwindow">
         <ul class="li-items">
             <li>
                 <div class="region-wrap">
                     <div class="region">
                         <div class="content">
                             <img src="./images/show-window/timg1.jpg"/>
                         </div>
                     </div>
                 </div>
             </li>
             <li>
                 <div class="region-wrap">
                     <div class="region">
                         <div class="content">
                             <img src="./images/show-window/timg1.jpg"/>
                         </div>
                     </div>
                 </div>
             </li>
             <li>
                 <div class="region-wrap">
                     <div class="region">
                         <div class="content">
                             <img src="./images/show-window/timg1.jpg"/>
                         </div>
                     </div>
                 </div>
             </li>
             <li>
                 <div class="region-wrap">
                     <div class="region">
                         <div class="content">
                             <img src="./images/show-window/timg.jpg"/>
                         </div>
                     </div>
                 </div>
             </li>
             <li>
                 <div class="region-wrap">
                     <div class="region">
                         <div class="content">
                             <img src="./images/show-window/timg.jpg"/>
                         </div>
                     </div>
                 </div>
             </li>
             <li>
                 <div class="region-wrap">
                     <div class="region">
                         <div class="content">
                             <img src="./images/show-window/timg.jpg"/>
                         </div>
                     </div>
                 </div>
             </li>
         </ul>
     </div>
 </div>

css

.showwindow-wrap
    {
        width: 100%;
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .showwindow
    {
        width:1200px;
        flex:;
        background: #f4f4f4;
    }
    .li-items
    {
        margin: 0px;
        padding: 0px;
        display:flex;
        flex-direction: row;
        align-items: flex-start;
        flex-wrap: wrap;
        justify-content: center;
    }
    .li-items>li
    {
        float: left;
        width: 323px;
        height: 222px;
        overflow: hidden;
        margin-left: -2px;
        margin-top: -1px;
    }
    .region-wrap {
        width: 320px;
        height: 220px;
        border: 1px solid #f4f4f4;
    }

    .region {
        position: absolute;
    }
    .content
    {
        position:  absolute;
        top: 10px;
        left: 10px;
        width: 300px;
        height: 200px;
        /*border:1px solid #aa0507;*/
    }
    .content:before,.content:after
    {
        position: absolute;
        top:;
        right:;
        bottom:;
        left:;
        color: #ea0c0c;
        content: '';
        box-sizing: border-box;
        margin: -10px;
        z-index:;
    }
    .content:hover
    {
        cursor: pointer;
    }
    .content:hover:before
    {
        top: -1px;
        right:;
        bottom:;
        left: -1px;
        box-shadow: inset 0 0 0 1px;
        animation: ClipBefore 4s linear infinite;
    }
    .content:hover:after
    {
        box-shadow: inset 0 0 0 1px;
        animation: ClipAfter 4s linear infinite;
        /*由于图片展示的区域比外边框小,所以这里要重新定位after的展示位置*/
        top: 18px;
        bottom: 0px;
        right: 0px;
        left: 18px;
    }
    .content>img
    {
        width: 300px;
        height: 200px;
    }

    @keyframes ClipAfter {
        0%, 100% {
            clip: rect(0px,302px,202px,0px);
        }
        25% {
            clip: rect(100px,302px,202px,150px);
        }

        50% {
            clip: rect(200px,302px,202px,300px);
        }
        75% {
            clip: rect(100px,302px,202px,150px);
        }
    }
    @keyframes ClipBefore {
        100%,0%{
            clip:rect(0px,300px,200px,0px);
        }
        25%
        {
            clip:rect(0px,150px,100px,0px);
        }
        50%{
            clip:rect(0px,0px,0px,0px);
        }
        75%{
            clip:rect(0px,150px,100px,0px);
        }
    }
    @keyframes ClipAfter {
        0%, 100% {
            /*为了在动画过程中能保留右边框和下边框,rect的right和bottom分别多取两个像素*/
            /*重新定位后,为了在动画的终点和起点不要显示上边框和左边框,rect的top和left分别多取了二个像素*/
            clip: rect(2px,302px,202px,2px);
        }
        25% {
            clip: rect(100px,302px,202px,150px);
        }

        50% {
            clip: rect(200px,302px,202px,300px);
        }
        75% {
            clip: rect(100px,302px,202px,150px);
        }
    }
    *{
        font-size:12px;
        list-style: none;
        color: rgba(146, 248, 206, 0.91);
    }

效果如开篇所发.