由于录像软件的原因 这个图片的阴影有点问题
效果:效果就是鼠标经过旋转,无需CSS权限即可实现。
原理:调用官方待遇旋转属性的CSS,实现的
优点:无需CSS权限 直接换图就可以实现
缺点:由于是调用官方CSS 所以样式是固定的,官方CSS里面旋转设置了偏移点,所以要想实现想要的效果,需要根据偏移点 来设置图片 不然鼠标经过图片会产生一点偏移。
用法:
将代码直接放进自定义 就可以实现效果
如果要将效果定位到海边或者其他地方,需要添加官方的定位CSS 天猫【sn-simple-logo】 C店【footer-more-trigger】通过调整left 和 top 调整效果的未知。
如果想一排显示几个这样的效果,直接先写一个DIV 然后将代码 整个放进大DIV里面,然后在每个效果代码里面加浮动属性 即可实现了。
说明:这个效果呢 也不是什么新鲜效果,以前就有了,只是很多人问我怎么实现的,所以我就发出来,附带一些简单的使用说明,方便大家用下
<div class="footer-more" style="width:241px;height:246px;border:0px;padding:0px;float:none;z-index:10;background-color:transparent;">
<div class="footer-more-trigger" style="width:241px;height:246px;border:0px;padding:0px;left:0px;top:0px;background-color:transparent;"> <a class="arrow-d" style="display:block;width:241px;height:246px;border:0px;background-color:transparent;background-image:url(http://img03.taobaocdn.com/imgextra/i3/675431384/TB2kKFSbVXXXXbgXXXXXXXXXXXX_!!675431384.png);-webkit-transition:0.8s ease-out;transition:0.8s ease-out;"></a> </div>
</div>
http://img03.taobaocdn.com/imgextra/i3/675431384/TB2kKFSbVXXXXbgXXXXXXXXXXXX_!!675431384.png
是图片地址,可以替换,替换后,如果图片尺寸有变化,适当修改代码中的宽高尺寸,跟图片一致