很多人经常问，淘宝店铺里面如何实现特效？
那我们首先要了解，下面几个问题：
- 特效是什么？
- 特效实现的原理
一：特效是什么？
在不同领域说法也不一样，电商店铺里面特效指的是CSS特效。一般特指鼠标经过而实现的一些视觉上的特殊效果。比如鼠标经过图片放大等
二：特效实现的原理？
这个其实很简单，既然是鼠标经过而产生变化，那就类似于动画。
动画如何产生的，通过几个不同时间的关键帧，而让人视觉上产生动画的效果。
那么店铺特效也是，如何产生变化，就需要2个状态。
【鼠标经过前】：鼠标没有经过的时候，默认的效果
【鼠标经过后】：鼠标经过后，产生变化的部分。
而CSS里面能产生这种效果的，有很多。其中用的比较多的是，鼠标经过的状态，也就是伪类 :hover
现在知道了特效的原理。那如何在店铺实现呢？
其实我们做的事情，无非就是想方设法让某些样式产生变化。一般方法是下面这些：
- 购买CSS权限
- ***之写入CSS
- ***之调用可以写入CSS的模块
- 购买店铺模板
- 调用官方样式实现
这里我只是说说最后一种。调用的方法，我自己对它也分好几个境界。
- 简单的调用 —- 筑基期
- 嵌套的调用 —- 婴变期
- 大神级操作 —- 大天尊
一：简单调用
顾名思义就是简单的直接调用官方带 :hover 的样式实现。这里给大家提供几个，自己去试试
<style>
.tmsg_app:hover { background: #F7F7F7;}
.cloud-spu-list .cloud-total .more:hover { color: #f60;}
.pagination a:hover {color: #fff;background-color: #09f;}
</style>
<!–其实我自己的淘宝店里面，以前就已经展示了很多，如果想知道我店铺地址，可以留言–>
<div style=”height:100px;float:left;width:200px;border:none;height:auto;” class=”tmsg_app”>NO1：tmsg_app </div>
<div style=”height:100px;float:left;background:none;display:block;border:none;width:200px;” class=”cloud-spu-list”>
<div class=”cloud-total”>
<div class=”more”> NO2：more </div>
</div>
</div>
<div class=”pagination” style=”float:left;”> <a> NO3：pagination </a> </div>
需要注意的是，官方样式，因为我们是调用，说明这些样式默认是存在其他样式的，而这些其他样式我们是不需要的，导致测试的时候 效果不理想。所以我们需要把不需要的样式覆盖掉或者修改成你想要的效果
二：嵌套的调用
顾名思义，就是不单单直接调用，而是灵活的将不同的官方样式，融合在一起 从而实现一些更炫酷的效果
三：大神的操作
官方没有带 :hover 的铍铜样式，如何来实现特效，也就是化腐朽为神奇，所以叫大神级操作
这里不做过多介绍，关注米色公众号，以后有机会 可能会分享这个方法。
店铺特效，很多人会说，现在手机端更重要。不可否认是这样。那是不是手机端更重要就不需要代码了呢？答案是否定的
- 手机端会不会永远都是直接添加图片和链接呢？肯定不会，因为人的审美会变化，或许以后，人们对手机端的效果要求更高了呢，电商平台允许我们事先代码做效果。就像当初时电脑端也只是图片加文字，而现在各种炫酷网页特效。凡事不能看眼前，应该看长远点
- 代码不仅仅是装修店铺，还可以做很多事情，做很多工作，这里就不多说了。以前发帖说过这个问题。
最后一句话，凡事不能只想着，现在不需要 就不在乎。防患于未然，也许现在不需要，但是将来很需要呢？
