纯css实现hover边框动画效果

最新推荐文章于 2025-06-01 02:56:14 发布

原创

最新推荐文章于 2025-06-01 02:56:14 发布 · 4k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#鼠标移入样式

效果展示：

源码展示：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>纯css实现hover动画效果</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        div {
            position:relative;
            width:200px;
            height:100px;
            border:1px #000 solid;
        }
        div p {
            width:100%;
            height:100%;
            position:absolute;
            left:0;
            top:0;
            overflow:hidden;
            z-index:999;
        }
        div  p::before,div p::after {
            position:absolute;