前端案例--CSS3实现光影效果

纯CSS3实现图片光影效果，主要用到了背景渐变的知识以及其中需要注意的细节！interesting…

效果图：

HTML：

<div id="div">      图片光影效果</div>

CSS：

#div { width: 400px; height: 220px; margin: 20px 0; color: #fff; /*直接使用background缩放版本*/ /*每个渐变点的位置不能太小，不然会出现残缺光斑*/ /*no-repeat -270px 0：将光斑定位隐藏起来*/ background: -webkit-linear-gradient(-30deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 230px, rgba(255, 255, 255, 0.1) 260px, rgba(255, 255, 255, 0.1) 270px, rgba(255, 255, 255, 0) 300px, rgba(255, 255, 255, 0) 310px) no-repeat -270px 0, url(mcf.webp) no-repeat; transition: 1s; }        #div:hover { /*鼠标滑过实现光斑滑动，但是在多背景情况下，需要多个background-position属性值，否则会影响其他背景*/ background-position: 200px 0, 0 0; }

剧终