这种效果如何实现?

cjwj
  • 628

背景图片暗色,中间矩形增亮!
网站网址:http://huil.com.cn/
效果:中间div进入后,div部分图片增亮!

clipboard.png

回复
阅读 2k
3 个回答

試了下,其實不用那麼麻煩還需要圖片什麼的,利用 border-shadow 就可以輕鬆產生遮罩,並且大小位置可以自訂。

實現

順帶加了個跟著滑鼠移動的效果

Codepen

說明

主要是利用 border-shadow 擴大其陰影範圍,遮蓋住整個圖片範圍,並且顏色設定半透明,就可以模擬遮罩效果。

而圖上的框線則可以用 div 在遮罩內進行拼接,可以看代碼如何實現的。

图片描述

看了一下元素结构,
增亮是通过一张蒙层图片(.shade这个元素)实现的,中间部分全透明,所以显得增亮:

这张

clipboard.png

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏