html5 - 用CSS实现鼠标移动到图片上的变化

Question

1. 如何用CSS实现鼠标移动到图片上，发生图片旋转或变色等响应变化
   以及跟着页面移动的悬浮框怎么制作

希望能有完整代码例子，带注释就更好不过了（小白在这里谢谢了）

1. https://handuyishe.tmall.com/shop/view_shop.htm?spm=a230r.7195193.1997079397.1.81V5Fs参考网站

2. 贴上报错信息

3. 贴上相关截图

4. 已经尝试过哪些方法仍然没解决（附上相关链接）

Answer 1

lz 又是你！ ！ 、
1：懸浮框是用了佈局position:fixed
2: 那個圖片旋轉是css3 屬性transform:rotate |rotateX Y Z|rotate3d
變色的實現思路：1: 圖片變色css3 filter3d

變色的實現思路：1: 圖變色css3 filter屬性，有限幾種變化， 相容性沒那麼好

              2:布局的背景色 变化
              3:图片切换 

思路給你說了， 直接搜、試、學 ~~~<🎜>

Answer 2

<li>
    <p>改变颜色</p>
</li>

li:hover p { color:red; }
是其他的變化也是同理，

Answer 3

純css實現? 類似效果多是使用jquery實現，懶人圖庫或腳本之家找找吧。

Answer 4

旋轉用 transform:rotate(xxdeg)，最好配上transition平滑過度
變色簡單的可以用opacity 或 filter，如 -webkit-filter:grayscale(1)

跟著老鼠移動的懸浮框似乎要用js了