纯css实现视频遮罩播放效果

tanzhongfa2

css代码

[CSS] 纯文本查看 复制代码

.tudou {
            position: relative;
            width: 444px;
            height: 320px;
            background-color: pink;
            margin: 30px auto;
        }

        .tudou img {
            width: 100%;
            height: 100%;
        }

        .mask {
            /* 隐藏遮罩层 */
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;
html代码
[mw_shl_code=html,true]<div class="tudou">
        <div class="mask"></div>
        <img src="images/tudou.jpg" alt="">
    </div>
    <div class="tudou">
        <div class="mask"></div>
        <img src="images/tudou.jpg" alt="">
    </div>
    <div class="tudou">
        <div class="mask"></div>
        <img src="images/tudou.jpg" alt="">
    </div>
    <div class="tudou">
        <div class="mask"></div>
        <img src="images/tudou.jpg" alt="">
    </div>

        }

        /* 当我们鼠标经过了 土豆这个盒子，就让里面遮罩层显示出来 */
        .tudou:hover .mask {
            /* 而是显示元素 */
            display: block;
        }[/mw_shl_code]

EchoY

没看错的话是黑马程序员pink老师的教程里面的源码
黑马程序员pink老师的web开发讲得是真不错
https://www.bilibili.com/video/BV14J4114768?share_source=copy_web

tanzhongfa2

EchoY 发表于 2022-3-22 13:33
没看错的话是黑马程序员pink老师的教程里面的源码
黑马程序员pink老师的web开发讲得是真不错
...

是的，这是pink老师上课的源码

zjj1970

虽然看不懂，但楼主这种无私精神非常敬佩，值得点赞

DHLORE

学到了，感谢楼主

夕阳枫

点赞支持

Well54

pink老师的源码吗？

DreamSuen123

楼主加油！点赞支持

1024A1024

学习了，手动试验下

tanzhongfa2

lc82600 发表于 2022-3-23 13:43
已经是会了

棒棒的你