场景:
在鼠标移动事件(悬停)上,动画播放(比如动画图像变得更大)。然后,在鼠标退出事件上,动画反转(动画图像在鼠标上无缝缩小,而不是在图像上徘徊)。动画在鼠标退出图像空间的任何时候都会反转。
约束:
文件中的
事件,在JS文件中使用
f 213)
发布于 2022-03-15 05:27:07
如果您使用的是transition而不是animation,这是相对容易的:
.hoverme {
height: 100px;
width: 100px;
display: flex;
justify-content: center;
align-items: center;
background: pink;
transition: height 10s, width 10s;
}
.hoverme:hover {
height: 300px;
width: 300px;
}<div class="hoverme">hover me</div>
发布于 2022-03-15 06:11:53
看看这个,
.hoverme {
padding: 50px;
transition: transform .2s;
width: 200px;
height: 200px;
margin: 0 auto;
}
.hoverme:hover {
transform: scale(1.5);
}<img class="hoverme" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYQAAACCCAMAAABxTU9IAAAAxlBMVEX/SBT+9fPvPSL98e//Rg//PQD++ff/r6D97On9RRb1QR3/NwABP1L/LwD/QgD/Qwj/hG75Qxr+4dn/f2n+5+H/oIr/moP+/f3/aUv+q5r28fDS1db/b1T/dVv+08n/emb+2NP/iXb/uqr/Wi7/SwT/bUb/gmT/ZUT+zMD/j3b/kX//UiH/xbni4eGBlp5YeISstrpviJHFycxQZnMAGDYAKUEgR1oAHzugq7AAMkiKkplmdYGWn6U7W2pMbnoyR1gAACgAABf0PUxhAAAD1UlEQVR4nO3c/3OaSBjHcfdgVxKCKApEk1iL12pqvTOmXE16d23//3/qdhGj+VLjzXTFqe/XTJxA8sPOfvLsAwSo1QAAAAAAAAAAAAAAAAAAAAAAAI6RK/2CbLhVD+U4uTIIfn/XTOI4Tt4P/cBvVD2ioxP6wageCaVSVXx5/WQY+NTDHoV+LYlS5XiaU3x6Ik2jxCWGvZFu0jEJOGLNMTl0koasenDHwQ1GY+U4T0IocnBU/zygGOwL5bUug+WcC/E0BtW5ZkmyLgy7wnk2+w884XwgBcvCRrwlAlMMOgVWJKtcP9lWB6Y9eyJq+1WP85cm29HWQjDd2hHjc46R7JHnY7V9MVqeM3S5jGGNW9NNeVsGq2KImixItvjNzvauvAzBcVQ2DKse7C/KrdW3L0brIDpvKQU7ZHvweiEsQxD1CV3BBrcRv94RVqI2B0g2yNHHnUNwvJgDJBtkM9q1DgSt2Q43TNZX7FSapurJxKtHuwasRxaEk/WxkZr+8ees9zgFdXFzM1cP+7wPhPDz6bPlVUtQF7ef8k/3j0JQ878+5/livR5x1myBvOw/zPgiPzu7u51vpKB693pf/uVCrUKou4Tw08nL8WrGe3/f6RD+MSEU64/5KEK4uyUEqzZCULOzu7PPX6ZK9C6mqVLzWU+oRa733fcIwSZ5tV6OdAr5v/qPXs3yr7OLm2+6AJQuj/xmulqhCMGKzRBE2usVC1FvkX///q1YhNRqHyHY8ygEPedlGtPFYl6uQWqjUROCFfLNQLzAnKI9PW0jBFt+EMIPEIIVhHAACOEAEMIB0CHs/C8dQrCESjgAsh2J53diE8JeEcIBMHdACvNYwk4xEIIVphKE2LUYCMEKKuEAyGb0wiNShLBXhHAACOEA/J97vwjBElMJhFAx+bZDJVRNh1BWgrPlBvnVzwjBilUIZprXKZjvNjIxPyt6NyFYUS5H+ggpS/rOQ1F06tfjjUgyvVUEQwg2LBuznvXED0blbal6vuMgaHTLTDyRTQI/LmqFEGyQb8xVVOGZ5/X9q0iZd+zoDHy3JidZcT3DUx+HsuYGJgWPEGwIh1kqVOe6eGeCfzVIhd5Kiluv5TBTmhOH5nZ4V9eCEiLm1ngLGqMsykblU5ly2B3042H5LhHZuOpmemv5cI4rL7N+POFJHRsamy+60xu6G6y2zAvx/I0t/ZtkAAAAAAA4YielqsdxlFqnp789d9oijT05eWH6N7SqHt8xaG3PQNdD1SM8Aq8UAqWwJ62XGkLZFaoe25E50d15rcUhEgAAAAAAAAAAAAAAAAAAAI7YfwZqP9bVk7iVAAAAAElFTkSuQmCC">
https://stackoverflow.com/questions/71477036
复制相似问题