演示代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="reset.css"/>
        <style type="text/css">
            .box{
                width: 300px;height: 250px;
                margin: 100px auto;
                border-radius: 10px;
                overflow: hidden;
                box-shadow: 0 0 3px 3px #ccc;
                position: relative;
            }
            .box img{
                width: 300px;height: 220px;
            }
            span{
                line-height: 30px;
                padding-left: 10px;
                display: inline-block;
                transition: transform 200ms;
            }
            .box:hover span{
                /* 对行级元素没有效果 */
                transform: translateX(30px);
                color: #0000ff;
            }
            .box .sgt{
                width: 30px;height: 250px;
                position: absolute;top: 0;left: -110px;background-color: yellow;
                transform: skewX(-30deg);
                /* transition: left 500ms; */
                opacity: 0.5;
            }
            .box:hover .sgt{
                /* left: 380px; */
                animation: sgt 500ms;
            }
            @keyframes sgt{
                0%{left: -110px;}
                100%{left: 380px;}
            }
        </style>
    </head>
    <body>
        <div class="box">
            <img src="bj.jpg" >
            <span>我要自学，我准备好位移了！</span>
            <div class="sgt"></div>
        </div>
    </body>
</html>
打开支付宝首页搜“559920739”领红包，领到大红包的小伙伴赶紧使用哦！ （如果你觉得本文不错，请扫描下面二维码随意打赏哦）
最后修改：2020 年 09 月 14 日
© 禁止转载
如果觉得我的文章对你有用，请随意赞赏