【css】鼠标移入出现不同线性框效果

张＊＊

已于 2022-11-16 14:06:51 修改

阅读量247

点赞数

分类专栏： css

于 2022-11-16 11:35:27 首次发布

本文链接：https://blog.csdn.net/mojina/article/details/127882120

版权

css css3 前端

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h3 {
            text-align: center;
            margin: 100px auto 40px;
        }
        .items {
            display: flex;
            align-self: center;
            max-width: 60%;
            margin:0 auto;
        }
        .item{
            position: relative;
            width: 23.5%;
            height: 200px;
            background-color: #ccc;
            margin-right: 2%;
        }
        .item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            background: red;
            content: "";
            width: 100%;
            height: 2px;
            box-sizing: border-box;
            transition: 0.4s;
            transform-origin: left top;
            z-index: 2;
            transform: scaleX(0);
        }
        .item::after {
            position: absolute;
            right: 0;
            top: 0;
            background: red;
            content: "";
            width: 2px;
            height: 100%;
            box-sizing: border-box;
            transition: 0.4s;
            transform-origin: left top;
            transform: scaleY(0);
        }
        .item i::before{
            position: absolute;
            right: 0;
            bottom: 0;
            background: red;
            content: "";
            width: 100%;
            height: 2px;
            box-sizing: border-box;
            transition: 0.4s;
            transform-origin: right top;
            transform: scaleX(0);
        }
        
        .item i::after{
            position: absolute;
            left: 0;
            bottom: 0;
            background: red;
            content: "";
            width: 2px;
            height: 100%;
            box-sizing: border-box;
            transition: 0.4s;
            transform-origin: left bottom;
            transform: scaleY(0);
        }

        /* 效果一 */
      
        .box1 .item:hover::before{
            transform: scaleX(1);
        }
        
        .box1 .item:hover::after{
            transform: scaleY(1);
            transition-delay: 0.4s;
        }
        .box1 .item:hover i:before {
            transform: scaleX(1);
            transition-delay: 0.8s;
        }
        .box1 .item:hover i::after {
            transform: scaleY(1);
            transition-delay: 1.2s;
        }


        /* 效果二 */

        .box2 .item:hover::before {
            transform: scaleX(1);
        }
        .box2 .item:hover::after{
            transform: scaleY(1);
            transition-delay: 0.4s;
        }
        .box2 .item:hover i:before {
            transform: scaleX(1);
        }
        .box2 .item:hover i::after {
            transform: scaleY(1);
            transition-delay: 0.4s;
        }

        /* 效果三 */
        .box3 .item::after{
            transform-origin: left bottom;
        }
        .box3 .item i::after{
            transform-origin: right top;
        }
        .box3 .item:hover::before {
            transform: scaleX(1);
        }
        .box3 .item:hover::after{
            transform: scaleY(1);
            transition-delay: 0.2s;
        }
        .box3 .item:hover i:before {
            transform: scaleX(1);
        }
        .box3 .item:hover i::after {
            transform: scaleY(1);
            transition-delay: 0.2s;
        }

        /* 效果四 */
        .box4 .item::after{
            transform-origin: left bottom;
        }
        .box4 .item i::after{
            transform-origin: right top;
        }
        .box4 .item:hover::before {
            transform: scaleX(1);
        }
        .box4 .item:hover::after{
            transform: scaleY(1);
        }
        .box4 .item:hover i:before {
            transform: scaleX(1);
        }
        .box4 .item:hover i::after {
            transform: scaleY(1);
        }
    </style>
</head>
<body>

    <!-- 效果一 -->
    <h3>效果一</h3>
    <div class="items box1">
        <div class="item"><i></i>1</div>
        <div class="item"><i></i>2</div>
        <div class="item"><i></i>3</div>
        <div class="item"><i></i>4</div>
    </div>

    
    <!-- 效果二 -->
    <h3>效果二</h3>
    <div class="items box2">
        <div class="item"><i></i>1</div>
        <div class="item"><i></i>2</div>
        <div class="item"><i></i>3</div>
        <div class="item"><i></i>4</div>
    </div>

     <!-- 效果三 -->
     <h3>效果三</h3>
     <div class="items box3">
         <div class="item"><i></i>1</div>
         <div class="item"><i></i>2</div>
         <div class="item"><i></i>3</div>
         <div class="item"><i></i>4</div>
     </div>

     <!-- 效果四 -->
     <h3>效果四</h3>
     <div class="items box4">
         <div class="item"><i></i>1</div>
         <div class="item"><i></i>2</div>
         <div class="item"><i></i>3</div>
         <div class="item"><i></i>4</div>
     </div>
</body>
</html>