CSS 实现鼠标悬浮边框线动画效果研究

一、transition

CSS transition（过渡效果）详解

CSS 中提供了 5 个有关过渡的属性，如下所示：

• transition-property：设置元素中参与过渡的属性；
• transition-duration：设置元素过渡的持续时间；
• transition-timing-function：设置元素过渡的动画类型；
• transition-delay：设置过渡效果延迟的时间，默认为 0；

　　同时，transition：简写属性，用于同时设置上面的四个过渡属性。

二、css代码实现

方式一

右上-左下同步

.item {
                width: 100%;
                height: 89px;
                box-sizing: border-box;
                margin-bottom: 15px;
                border: 1px solid transparent;
                position: relative;
                &::before,
                &::after {
                    box-sizing: border-box;
                    position: absolute;
                    content: "";
                    border: 1px solid transparent;
                    width: 0;
                    height: 0;
                }
                &::before {
                    top: 0;
                    left: 0;
　　　　　　　　　　　　/* 鼠标移入增加效果 */

　　　　　　　　　　　　　transition:

                        border-color 0s ease-out calc(0.4s / 1),

                        width calc(0.4s / 4) ease-out calc(0.4s / 4 * 3),

                        height calc(0.4s / 4) ease-out calc(0.4s / 2);

                }

                &::after {
                    bottom: 0;
                    right: 0;

　　　　　　　　　　   /* 鼠标移入增加效果 */

　　　　　　　　　　　　 transition:

                        border-color 0s ease-out calc(0.4s / 2),

                        width calc(0.4s / 4) ease-out calc(0.4s / 4),

                        height calc(0.4s / 4) ease-out ;

                }
                &:hover::before {
                    width: 100%;
                    height: 100%;
                    border-top-color: xxx;
                    border-right-color: xxx;
                    transition: 
                        width 0.2s ease-out,
                        height 0.2s ease-out 0.2s;
                }

                &:hover::after {
                    width: 100%;
                    height: 100%;
                    border-bottom-color: xxx;
                    border-left-color: xxx;
                    transition: 
                        // border-color 0s ease-out calc(0.4s / 2),
                        width 0.2s ease-out,
                        height 0.2s ease-out 0.2s;
                }
            }

方式二

上右下左顺序

&:hover::before {
                    width: 100%;
                    height: 100%;
                    border-top-color: xxx;
                    border-right-color: xxx;
                    transition: 
                        width calc(0.4s / 4) ease-out,
                        height calc(0.4s / 4) ease-out calc(0.4s / 4);
                }

                &:hover::after {
                    width: 100%;
                    height: 100%;
                    border-bottom-color: xxx;
                    border-left-color: xxx;
                    transition: 
                        border-color 0s ease-out calc(0.4s / 2),
                        width calc(0.4s / 4) ease-out calc(0.4s / 2),
                        height calc(0.4s / 4) ease-out calc(0.4s / 4 * 3);
                }

其实本质是通过定义transition的时间与延迟，达到不同效果

想实现更复杂的动画效果，使用css animation属性亦可