小特效-css高光效果

最新推荐文章于 2024-08-23 10:21:04 发布

云创吴彦祖

最新推荐文章于 2024-08-23 10:21:04 发布

阅读量5k

点赞数

分类专栏： css 文章标签： css特效 css高光

本文链接：https://blog.csdn.net/weixin_41756610/article/details/83028436

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

.spring_footer .light {
    cursor: pointer;
    position: absolute;
    left: -1180px;
    top: 0;
    width: 1240px;
    height: 90px;
    background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
    background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
    transform: skewx(-25deg);
    -o-transform: skewx(-25deg);
    -moz-transform: skewx(-25deg);
    -webkit-transform: skewx(-25deg);
}
.spring_footer:hover .light {
    left: 1180px;
    -moz-transition: 2s;
    -o-transition: 2s;
    -webkit-transition: 2s;
    transition: 2s;
}

light在结构层中属于光亮层，请包裹在具有relative定位以及overflow：hidden的容器内；具体角度以及长度依据需要调整transform以及偏移量。