CSS实现hover时滤镜方块滑动

凉风听雪

于 2024-08-07 10:05:08 发布

阅读量150

点赞数 3

CC 4.0 BY-SA版权

分类专栏： CSS炫酷使用文章标签： css 前端 javascript

本文链接：https://blog.youkuaiyun.com/p_s_p/article/details/140980554

CSS炫酷使用专栏收录该内容

20 篇文章

订阅专栏

ul li {
    background-color: #4CAF50;
    color: white;
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

ul li::before {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(45deg);
    transition: transform 0.5s;
}

ul li:hover::before {
    transform: translate(100%, 100%) rotate(45deg);
}