每日css

最新推荐文章于 2024-07-20 16:31:54 发布

niuyueyang

最新推荐文章于 2024-07-20 16:31:54 发布

阅读量69

点赞数

分类专栏： css3

本文链接：https://blog.csdn.net/qq_33332184/article/details/103619795

版权

css3 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            list-style: none;
            background: #06bae7;
        }
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            box-sizing: border-box;
        }
        .tbody{
            width: 1000px;
            height: 90vh;
            margin: 0 auto;
            margin-top: 10px;
        }
        .tm{
            width: 200px;
            height: 320px;
            position: relative;
        }
        .tm img{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }
        .line-top{
            width: 98%;
            height: 1%;
            background-color: white;
            position: absolute;
            right: 1%;
            top:0;
            display: block;
            transition: all .6s linear;
            transition-delay: 1.8s;
        }
        .tm:hover .line-top{
            width: 0;
            transition-delay: 0s;
        }
        .line-right{
            width: 1%;
            height: 98%;
            background-color: white;
            position: absolute;
            right: 0;
            bottom:1%;
            display: block;
            transition: all .6s linear;
            transition-delay: 1.2s;
            transform-origin: top center;
        }
        .tm:hover .line-right{
            height: 0;
            transition-delay: 0.6s;
        }
        .line-bottom{
            width: 98%;
            height: 1%;
            background-color: white;
            position: absolute;
            left: 1%;
            bottom:0;
            display: block;
            transition: all .6s linear;
            transition-delay: 0.6s;
        }
        .tm:hover .line-bottom{
            width: 0;
            transition-delay: 1.2s;
        }
        .line-left{
            width: 1%;
            height: 98%;
            background-color: white;
            position: absolute;
            left: 1%;
            top:1%;
            display: block;
            transition: all .6s linear;
            transition-delay: 0s;
        }
        .tm:hover .line-left{
            height: 0;
            transition-delay: 1.8s;
        }
    </style>
</head>
<body>
<div class="tbody">
    <div class="tm">
        <img src="http://phpdiansang.top/img/fj1.jpg" />
        <span class="line-top"> </span>
        <span class="line-right"></span>
        <span class="line-bottom"></span>
        <span class="line-left"></span>
    </div>
</div>
</body>
</html>