请选择 进入手机版 | 继续访问电脑版

【米色】双十一三只松鼠分类特效分享,淘宝店可用 

2017-11-05 20:51 发布

经验交流 /[电商代码]
101 0 0

83

帖子

22

听众

302

米币

超级版主

Rank: 8Rank: 8

积分
632
米色设计 发表于 2017-11-5 20:51:52 | 显示全部楼层 |阅读模式
友情提示: 如果有任何不懂或者问题要问的, 请在相应的在线求助发表新帖提问, 谢谢合作!!!

在美设网注册账号,查看完整图文信息哦

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
一年一度的电商盛会,双十一正在如火如荼的进行中,还有五天就正式开始了。

米色作为一名在电商里面摸爬滚打这么多的老司机,忍不住也到处去逛逛,看看有啥好东西。由于米色是超级吃货一枚,所以不出意外的逛到了卖零食的店铺。

可能是职业病的缘故,我进店铺首先是看店铺设计和特效表现,当进去三只松鼠店铺的时候,被其中一个特效吸引了。
有同志要问了,不就是一个简单的CSS特效嘛,至于被吸引吗?

当然了,吸引我的不是特效本身,大家都知道不管淘宝店还是天猫店,默认时候店铺里面是没有CSS权限的,也就是你制作不了特效。虽说这个特效在本地很快就能写好,但是米色君,想尝试一下,当店铺没有购买CSS权限的情况下,能不能在店铺里面也实现这个特效呢?

米色本身就是一个执行力比较强的人,说干咱就干,然后就撸起袖子一阵干.....(此处省虐1111个字)

随着一阵忙活,终于算是大功告成了。跟三只老鼠店铺一对比 基本上是一模一样了。看下图完成后效果

1.gif

​这时候有同志要问,要么完成,要么没完成,咋还算是完成呢?理由如下:
  • 店铺没有购买CSS权限,所以难免效果有点小瑕疵,还好问题不大
  • 因为米色穷,没有天猫店测试,所以暂时没有编写天猫店可用的代码,下面你将看到的代码是仅限淘宝店铺使用的。
这也是一大遗憾,如果能做成全店通用就完美了,可惜了,没有天猫店测试......

说了半天,有同志忍不住了,老湿,咱能别打这么多字吗,头晕,说半天,还是木有看到什么代码。
这位仁兄,不要慌,凡事还不得有个前奏不是,一上来就直奔主题,未免显得猴子,有失风度不是。
好了不多说了,不然该被揍了。下面来聊聊代码部分的东西:

【特效分析】:
这个效果很简单,会代码的人 基本上分分钟搞定,但是再淘宝店就不是那么好使了。好像又偏题了....
咋一看这特效,老夫掐指一算,肯定是鼠标经过分类图的时候,图片右边移动一点(0 - 0 老湿,明眼人一看就知道)
那么能实现这样效果的CSS样式有哪些呢?(定位,萎类....)

【代码说明】:
作者:米色(miser1314)
权限:无需购买CSS权限,无需购买店铺模板
  • 你要做的只是,按照这个效果的图片样子去设计你需要的效果,然后替换图片地址,链接地址。图片原件也分享出来了
  • 由于代码量较多,所以不懂代码的话,最好只是修改图片,不要修改改吗效果。有代码基础的话,可以做效果变形
  • 由于米色没有天猫店,所以暂时没有做天猫版的,以后有天猫店铺了,再分享把
  • 注意,代码中已经添加了全屏代码,所以如果你是淘宝专业版,智能版,可直接复制代码放自定义模块-源码模式下使用。如果你是基础班的,就复制下面对应的基础班代码。

【源码分享】:
密码: dwie


回复

使用道具 举报

B Color Smilies
联系
我们
快速回复 返回顶部 返回列表