想要实现的效果是 hover 时图片放大1.5倍且顺时针旋转360度
引言
tailwindcss v3 升级到 tailwindcss v4 后碰到了两个坑
背景透明度语法变更
bg-opacity-50 bg-gray-300->bg-gray-300/50
hover在移动端效果改变
hover在移动端表现是：点击后保持hover效果，点击其它元素取消hover效果（后面搜了下mdn，好像各浏览器不一样？）
使用v4版时，把窗口改为移动设备，然后
启用元素状态->hover这样居然也不生效，不知道tailwindcss v4怎么搞的
https://developer.mozilla.org/zh-CN/docs/Web/CSS/:hover
备注： 在触摸屏上，
:hover伪类可能存在问题。根据不同的浏览器，:hover伪类可能永远不会匹配，只会在触摸一个元素后短暂匹配，或者即使用户停止触摸并且直到用户触摸另一个元素之前仍然匹配。Web 开发人员应确保内容可以在具有有限或不存在悬停功能的设备上访问。
最近用移动端打开我的 主页 ，发现点头像居然不转了！这么好玩的效果怎么能消失！
想了想原因，估计是 tailwindcss 破坏性变更导致的（毕竟前几天刚修好背景透明度消失）
今天周六，刚好有空修修，结果碰到了神秘问题
踩坑
tailwindcss实现
hover: 在移动端用不了了，于是上文档搜了下，移动端推荐的是 active: 这个伪类
使用 active: 试了下，效果是点击后触发，触发完就消失，做不到保持状态的效果（点其它元素才会取消状态）
于是尝试用原生css的hover自己实现个
css实现
搜了搜文档，写了个效果
.xxx:hover {
transform: scale(1.5) rotate(360deg);
transition: transform 0.5s;
}结果发现只有缩放效果，没有旋转效果...
又搜了下
还有说旋转角度为
target%360
自己再试了下，旋转359度为反方向转1度，360度/720度之类的根本不转
后面又继续搜，搜到个相关的，看到这段css
.test {
margin: 50px;
width: 100px;
height: 100px;
background-color: red;
transition: all 1s;
transform: rotate(0) scale(.5);
}
/*css1*/
.test:hover {
transform: scale(1) rotate(360deg);
}
/*css2*/
#btn:hover+.test {
transform: rotate(360deg) scale(1);
想了想设置个初始状态，看看能不能正常旋转
结果发现居然成功了
.xxx {
transform: scale(1) rotate(0);
}设置初始状态后就能正常旋转360度了！
但离谱的是 transform 中的顺序一个都不能错，也不能缺状态
scale和rotate交换未知、删掉scale或者rotate，结果就是不旋转！
最终实现
.xxx {
transform: scale(1) rotate(0);
}
.xxx:hover {
transform: scale(1.5) rotate(360deg);
transition: transform 0.5s;
}其它
刚开始没找到不能旋转的原因，还用关键帧写了个...
结果一样是没有旋转，这时候才发现要设置个初始状态
（实际效果一松开就缩回去了，没有反向旋转的效果...）
放弃这个效果后才发现最终实现... 果然css是个坑
css is awesome...
@keyframes xxxx {
from {
transform: scale(1) rotate(0deg);
}
to {
transform: scale(1.5) rotate(360deg);
}
}
.xxx:hover {
animation: xxxx 0.5s ease forwards;
}
评论