基于CSS3实现闪光条效果

最新推荐文章于 2021-09-11 12:29:29 发布

苦涩2020

最新推荐文章于 2021-09-11 12:29:29 发布

阅读量652

点赞数

分类专栏：前端案例练习文章标签： css3

本文链接：https://blog.csdn.net/UserPython/article/details/106463661

版权

前端同时被 2 个专栏收录

80 篇文章

订阅专栏

案例练习

11 篇文章

订阅专栏

本文介绍了两种使用CSS3创建闪光条效果的方法：一是利用转换中的倾斜转换，二是通过CSS3动画来实现。详细步骤和代码示例帮助你轻松掌握。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

在这里插入图片描述

方法一：使用转换中的倾斜转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style type="text/css">
        .box{
            width: 300px; height: 260px; 
            margin: 100px auto; border-radius: 10px;
            box-shadow: 0 0 3px #ccc; overflow: hidden;
            position: relative;
        }
        .box img{
            width: 300px; height: 230px;
        }
        .box span{
            display: block; line-height: 30px; padding-left: 10px;
            transition: transform 1s;
        }
        .box .sgt{
            width: 30px; height: 260px; 
            position: absolute; top: 0; left: -110px;
            background-color: white; opacity: 0.3;
            transform: skewX(-30deg);
            transition: left 0.5s;
        }
        
        .box:hover span{
            transform: translateX(100px); 
            color: rgb(47, 118, 211);
        }
        .box:hover .sgt{
            left: 380px;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="../img/img215.jpg" alt="">
        <span>文字移动</span>
        <div class="sgt"></div>
    </div>
</body>
</html>

方法二：使用动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style type="text/css">
        .box{
            width: 300px; height: 260px; 
            margin: 100px auto; border-radius: 10px;
            box-shadow: 0 0 3px #ccc; overflow: hidden;
            position: relative;
        }
        .box img{
            width: 300px; height: 230px;
        }
        .box span{
            display: block; line-height: 30px; padding-left: 10px;
            transition: transform 1s;
        }
        .box .sgt{
            width: 30px; height: 260px; 
            position: absolute; top: 0; left: -110px;
            background-color: white; opacity: 0.3;
            transform: skewX(-30deg);
        }
        
        .box:hover span{
            transform: translateX(100px); 
            color: rgb(47, 118, 211);
        }
        .box:hover .sgt{
            animation: sgt 500ms;
        }

        @keyframes sgt{
            0%{left: -110px;}
            100%{left: 380px;}
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="../img/img215.jpg" alt="">
        <span>文字移动</span>
        <div class="sgt"></div>
    </div>
</body>
</html>