• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

CSS实现图片遮罩效果 百度爱玩效果

CSS3 web前端中文站 1年前 (2018-04-03) 2303次浏览 已收录 7个评论

最近自己用 css 来实现一个图片遮罩层的效果,看着不错,给大家分享下。关于遮罩层,可以用 JavaScript 实现,也可以用 css 来实现,主要还是看应用场景吧。具体效果如下:

CSS 实现图片遮罩效果  百度爱玩效果

CSS遮罩层

 

CSS 实现图片遮罩效果  百度爱玩效果

CSS遮罩层效果展示

下面贴下 html 的主要代码,css 代码太长,大家可以下载下来实践下。

 <a href="#" class="mp-game-link" target="_blank">
 <div class="mp-game-content">
 <div class="mp-game-show">
 <img width="166" height="140" src="images/3.jpg">
 <div class="mp-game-cover-platform">
 <div class="mp-game-cover-name">魅影传说</div>
 <div class="mp-game-cover-description">跨越时空征战,掀起万人 PK 狂潮!</div>
 <div class="mp-game-cover-start">
 <span class="start-btn">&nbsp;开始游戏&nbsp;</span>
 <span class="mp-more">更多平台</span>
 </div>
 <div class="mp-overlay"></div>
 </div>
 </div>
 <div class="mp-game-info">
 <div title="魅影传说" class="mp-game-info-name">魅影传说</div>
 <div class="mp-game-info-detail">
 <span class="mp-game-info-type">角色扮演</span>
 <span class="mp-game-info-op">51.com</span>
 </div>
 <div class="mp-game-score-ct">
 <div class="mp-game-score-ct-inner">
 <span class="mp-game-score-i">9</span>
 <span class="mp-game-score-d">.8</span>
 </div>
 </div>
 </div>
 </div>
 </a>

在线演示
具体遮罩层效果的 js 代码,html 和 css 代码 demo、素材在下面链接:

百度网盘下载 ? ? ?密码:16am

==========================

web 前端中文站点评:

在学习 web 前端,偶尔做一些小效果 demo,特别是对于初学者来说,这些小的web 前端 demo 效果,能让大家加深对 html,css 和 JavaScript 的理解,从而巩固了相关的学习,也能达到立竿见影的学习体验。

 


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:CSS 实现图片遮罩效果 百度爱玩效果
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(7)个小伙伴在吐槽
  1. 66
    www2019-04-01 15:51 回复
  2. 试一下
    sohey2019-01-02 20:34 回复
  3. good 想学
    112018-09-17 16:50 回复
  4. 挖到
    112018-09-17 16:49 回复
  5. :eek: 很好
    1232018-08-14 14:12 回复
  6. 点赞 :eek:
    yzf2018-07-25 21:28 回复