css特效:鼠标滑过图片出现一道闪光效果

最新推荐文章于 2024-08-14 09:51:23 发布

一位不愿透露姓名的大英俊

最新推荐文章于 2024-08-14 09:51:23 发布

阅读量4k

点赞数 2

分类专栏：每天一道小菜文章标签： css 图片鼠标

本文链接：https://blog.csdn.net/wjy199506/article/details/53640662

版权

每天一道小菜专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>╭(╯^╰)╮</title>
    <style>
        .container{
            width: 580px;
            height: 325px;
            position: relative;
        }
        .container:hover:before{
            transition: left 2s;/*过渡,改变闪光的位置*/
            left: 770px;
        }
        .container:before{/*在图片之前插入闪光*/
            content: '';
            position: absolute;
            width: 100px;
            height: 325px;
            top: 0;
            left: -190px;
            overflow: hidden;
            background-image: linear-gradient(to right,rgba(255,255,255,.2) 0,rgba(255,255,255,.5) 50%,rgba(255,255,255,.2) 100%);/*linear-gradient渐变效果*/
            transform: skewX(-25deg);/*沿x轴倾斜*/
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="yinhun.jpg" alt="加载中..."/>
    </div>
</body>
</html>