CSS3-闪光效果

最新推荐文章于 2024-10-02 23:33:51 发布

qwe耿

最新推荐文章于 2024-10-02 23:33:51 发布

阅读量3.6k

点赞数 1

分类专栏： html/css 文章标签： css3 图片光线效果

本文链接：https://blog.csdn.net/gyy93/article/details/71083261

版权

本文介绍如何使用CSS3为一张钻石图片创建鼠标悬停时的闪光光线效果。通过HTML和CSS代码实现，详细展示了相关样式和图片资源。

摘要由CSDN通过智能技术生成

效果：一张钻石图片，鼠标hover图片的时候有一道光线闪过
html代码：

    <body>
        <div class="content">
            <img src="img/ring.png" alt="闪光图片" />
            <!--闪光遮罩层-->
            <div class="light"></div>
        </div>
    </body>

css代码：

        <style type="text/css">
            .content{
                position: relative;
                width: 403px;/*图片宽度*/
                height: 352px;/*图片高度*/
            }
            .light{
                cursor: pointer;
                position: absolute;
                left: -403px;
                top: 0;
                width: 403px; /*图片宽度*/
                height: 352px;/*图片高度*/
                /*闪光其实是一个渐变的遮罩层*/
                background: -webkit-linear-gradient(0deg, rgba(255,255,255,0),