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

tanzhongfa2 发表于 2022-3-22 12:39

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代码
<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;
   }

EchoY 发表于 2022-3-22 13:33

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

tanzhongfa2 发表于 2022-3-22 14:26

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

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

zjj1970 发表于 2022-3-22 13:31

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

DHLORE 发表于 2022-3-22 13:41

学到了，感谢楼主

夕阳枫 发表于 2022-3-22 14:43

点赞支持

Well54 发表于 2022-3-22 16:04

pink老师的源码吗？

DreamSuen123 发表于 2022-3-22 16:33

楼主加油！点赞支持

1024A1024 发表于 2022-3-22 17:09

学习了，手动试验下

tanzhongfa2 发表于 2022-3-24 10:05

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

棒棒的你

页: [1] 2

吾爱破解 - 52pojie.cn's Archiver

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