基於CSS3實現閃光條效果

效果圖

在這裏插入圖片描述

方法一:使用轉換中的傾斜轉換

<!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>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章