发表日期:2020-03-03 文章作者:爱永设计 浏览次数:33403 次
最近在开发一个网站时,有许多的图标需要排版,图标大小形状是一样的就是颜色不一样,最常规的办法就是需要切N张图片,来实现。但是那样效率太低了,并且要弄好多图片,于是从寻找更好的解决办法。终于找到了,通过css的filter属性来制作。下面是我总结的代码
.icon{ width:39px; margin:0 auto; position:relative; overflow:hidden;}
.icon img{ display:block; margin:0 auto; position:relative; filter: drop-shadow(39px 0 #289c8a); -webkit-filter: drop-shadow(39px 0 #289c8a);}
.icon:hover img{transform: translate(-39px, 0);-webkit-transform: translate(-39px, 0);-ms-transform: translate(-39px, 0);-o-transform: translate(-39px, 0);}
实现的效果图如下:
这个移上去显示红色的图标就是实现的效果,可以换成任何颜色(纯色)。
日期:2020-03-03 浏览次数:32285 次
日期:2020-03-03 浏览次数:32405 次
日期:2018-08-15 浏览次数:35634 次
开发日期:2021-06-21 浏览次数:699103 次
开发日期:2021-04-21 浏览次数:759303 次
开发日期:2020-05-03 浏览次数:816787 次
开发日期:2019-12-02 浏览次数:794411 次
开发日期:2019-10-02 浏览次数:1053852 次
日期:2014-03-26 浏览次数:16936 次
日期:2012-07-04 浏览次数:16042 次
日期:2017-08-29 浏览次数:105356 次
日期:2013-07-18 浏览次数:16649 次
日期:2012-08-15 浏览次数:17596 次
致力于互联网品牌建设与网络营销,专业领域包括网站建设、网站模板、移动互联网营销、wordpress平台开发等,服务范围涵盖基础的域名服务、主机 服务;企业邮箱、云服务器、网络营销等应用服务,为不同类型的客户提供良好的互联网应用定制解决方案,帮助客户在新的全球化互联网环境中保持优势。
爱永设计工作室一直致力于品牌精美的网页设计、网页制作DIV+CSS布局、JS效果、精美网站模板、标志设计、专业仿站, 低廉的价格,真诚的服务,我们拥有全国各地的客户群体和各行业的成功案例。以一流的服务,出色的网页设计和制作能力,认真严谨的工作态度为客户提供优质满意的服务。期待与您的合作!
Copyright © 2012 - 2024 aysheji.com All Rights Reserved 爱永设计 版权所有
邮箱:aysheji@163.com 在线客服:276583799 模板演示地址:www.aymoban.com 备案号:京ICP备13060102号-3
服务内容: 网页设计 网站建设 网站制作 网站模板 婚庆网站模板 摄影网站 手机网站制作 自适应网站制作