子比美化—制作文章特色图片鼠标悬停效果图片教程

前言:

  • 很久没有更新子比美化教程了,最近也看到很多美化的教程现在也来浅浅的水一下,今天分享的就是如标题教大家如何自己动手制作一张属于自己的独一无二的:鼠标悬停到文章特色图片效果图片教程 如下图
  • 也可以具体查看我的站点效果,不喜勿喷,这东西好看不好看就是千人千面的说法
图片[1]-子比美化—制作文章特色图片鼠标悬停效果图片教程-梦都歌-精品资源社区,梦都歌资源网

首先你要知道这东西是如何实现的

1.通过修改 css 样式让图片上层添加一层虚化的蒙版:css 样式如下,

2.子比主题设置--->自定义代码--->自定义 CSS 样式:,添加以下 CSS 代码:

这之前就分享过,今天主要说下如何制作这个图片

图片教程:

尺寸:45*45px

背景:透明

字体:江西楷体(自行更换自己喜欢的字体)

制作工具:稿定设计或者能力强点的 PS(下放稿定设计演示)

稿定设计进入之后按照上面的尺寸规格创建相同尺寸的画板记得背景效果透明

之后再画板上添加一个字,比如:觅

图片[2]-子比美化—制作文章特色图片鼠标悬停效果图片教程-梦都歌-精品资源社区,梦都歌资源网

之后选中此文字按照图片代码输入:#ffffff

图片[3]-子比美化—制作文章特色图片鼠标悬停效果图片教程-梦都歌-精品资源社区,梦都歌资源网

到这里就完事了,自己再导出一下图片记得一定要 PNG 格式的图片,上传到你的服务器即可

之后再修改上面的 CSS 样式种的图片路径

图片[4]-子比美化—制作文章特色图片鼠标悬停效果图片教程-梦都歌-精品资源社区,梦都歌资源网
资源下载说明:
PS:本站部分资源有免费和付费下载方式(区别在于下载速度不同)
本站所有资源百分之90都是通过测试后发布,且附带部分教程
如按教程等操作后任有问题可开通本站会员享受免费指导
技术安装或其他不详教程可付费指导
本站资源采用深度云盘付费存储永久有效

文章最后更新时间:2024-08-06 12:16:14,某些文章具有时效性,若有错误或已失效,请在下方留言或联系梦歌社长

子比美化—制作文章特色图片鼠标悬停效果图片教程-梦都歌-精品资源社区,梦都歌资源网
最近更新2024年08月06日
资源编号340

付费阅读   -   子比美化—制作文章特色图片鼠标悬停效果图片教程


郑重承诺丨本站资源主打真实可靠!
600积分
 


升级会员

© 版权声明
THE END
喜欢就支持一下吧
点赞7赞赏 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容