咨询电话:
15628812133
24
2017/06

css3鼠标划过如何出现阴影

发布时间:2017-06-24 16:27:45
发布者:369563174
浏览量:
0

在有的网站中,有些地方鼠标划过去会有个阴影出来,那么它是怎么写出来的,我们在做普邦项目的时候就用到了这个阴影的写法:

blob.png

你会发现它底部跟左右两侧都有一点点阴影,它是这么写出来的:


      
            
  •         
  •         
  •         
  •         
  •         
  •         
  •         
  •         
  •         
  •         
      
.anli-nr li{ -webkit-transition: all .2s linear; transition:all .2s linear ;}
.anli-nr li:hover{-webkit-box-shadow: 0 15px 30px rgba(0,0,0,0.2);
box-shadow: 0 15px 30px rgba(0,0,0,0.2);
-webkit-transform: translate3d(0, -2px, 0);
transform: translate3d(0, -2px, 0)}

就是加了个过度,然后用css3中的box-shadow属性给li加了个阴影,这样就显示出来了

演示地址:http://www.cnwenhui.cn/d/demo/yinying/

上一篇: js实现时间轴自动排列效果
下一篇: 一个页面如何使用多个swiper插件?
关键词:
返回列表
相关文章
相关案例
热门文章
最新文章