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

【米色】淘宝店鼠标经过图片旋转180度效果分析,附源码下载 

2017-11-04 18:36 发布

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

83

帖子

22

听众

302

米币

超级版主

Rank: 8Rank: 8

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

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

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

x

180度.jpg



1.gif

【上图就是鼠标经过图片180度旋转的效果图,这个效果挺不错的 很多店铺以及很多地方都会用得到它】
【一些说明】:授人以鱼不如授人以渔,本来想直接分享代码的。担心很多同志没有代码基础的话,就不知道怎么回事。所以米色详细的剖析一下 这个鼠标经过旋转180度 到底是怎么回事。最后米色也将整理出来的  特效源码模板 分享出来了。懒人模板,你要做的只是作图 替换图片。不用考虑尺寸的问题了。下面是教程开始。

第一:我们先来看看 实现这个效果的CSS代码(这里为了方便查看对代码做了精简)
  1. .arrow-d {
  2. transform: rotate(180deg);      /*这里是实现图片旋转*/
  3. transform-origin: 50% 30%;    /*这是淘宝CLASS默认附带的原点移动样式*/
  4. }
复制代码
上面这个就是淘宝官方的CLASS,第一个属性是  CSS3变形 ; 第二个属性是 原点移动。配合上图 我们会发现。一般情况下  我们不对元素进行原点移动,那默认是以元素中心点进行移动的,就是图中的红点。
3.JPG
第三:上图是米色用代码写的一个模拟旋转轨迹的DOM,是以中心点进行旋转的
4.JPG
第四:这里米色给DOM添加了 原点移动   transform-origin:50% 30%;   我们会发现  元素的原点从中心点  移动到了  上面 也就是白点位置。对原点移动以后的元素 旋转轨迹如上图所示。
会发现,从初始位置到最后的位置,其实整个过程 元素 只是上移了大概40px的距离。(背景图每一小格高度为10px,图片尺寸100*100)
也就是说,添加了原点移动的话,图片旋转时候的中心点位置就会发生偏移。这也是为什么米色分享的这个效果,其中比较麻烦的地方,需要计算偏移的距离。

第五:这个图是给大家演示看看,原点移动能实现什么效果。(效果说明,鼠标经过图片往右缩放 二不是从中心点缩放)
7.gif
通过上面的动图,就非常直观的看出来,淘宝店里面给图片添加了这个效果后,图片是如何变化的。
所以问题就来了,上面很直观看到,图片旋转了180度后,图片的位置发生了变化,如果这么直接放店铺里面,那到时候买家看不到完整的图片,影响用户体验。
那怎么才能解决这个问题呢?这里米色分别编写了2个版本的源码模板,供大家测试使用。源码里面已经写了很详细的文字说明。
【简单版】:不需要计算代码里面的宽高数值,只需要在PS里面制作一张专用尺寸的图片即可。
【升级版】:不需要专门设计图片了,只需要修改代码里面一个参数即可(推荐)
很多人还是觉得,专门去设计一个尺寸的图片太麻烦,如果无视尺寸,什么图片都能实现效果,那就完美了。所以米色推荐使用升级版。

【优势】:
  • 你不需要去计算繁琐的数值。用这个米色模板,你只需要   替换图片地址 链接  和 图片尺寸数值 即可。
  • 就算你不懂这个原点的运动原理,按照米色提供的尺寸计算公式  你就能随意在店铺实现这种特效了。
  • 源码中,也考虑到了,如果有需要一排放多个图片的情况,也做了相关的说明。
  • 有很多同志还是会说,还是太麻烦了,可不可以傻瓜式操作,我只需要复制粘贴 修改简单参数就可以直接生成特效代码呢? 所以米色专门将这个特效编写开发成了一个在线生成工具,你要做的事情就是复制粘贴图片地址和修改宽高尺寸。并且还提供了特效运动方式和时间的控制,可以做成各种各样的炫酷效果。

【源码下载】:
下载链接: https://pan.baidu.com/s/1crrLYu 密码: qtt4
公众号二维码.jpg
扫码关注米色公众号(miser1314)


回复

使用道具 举报

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