操作方法：CSS3-当鼠标移入和移出时更改样式

1，使用伪类实现样式切换

伪类是CSS2.1中出现的一项新功能。使用CSS可以实现许多最初需要JavaScript的效果。

例如，要实现以下鼠标悬停效果，只需对：hover伪类应用一组新样式。访问者将鼠标悬停在按钮上时，浏览器将自动将此新样式应用于按钮。

1

2

（[2）背景色，文本需要过渡效果

以上示例显示，尽管背景色已实现过渡，但文字颜色会直接更改。要实现多种样式的转换，只需使用逗号作为分隔符，并同时指定多个样式属性。

（[3）过渡所有样式

如果要转换所有样式并希望同时完成所有转换，则可以在指定属性名称的地方全部填写。

1

2

transition：all0.5s;

-webkit-transition：all0.5s;

3，更多的过渡效果

（[1）淡入淡出

通过修改不透明度属性来更改透明度，从而实现图像的淡入淡出。

1

（3）发光效果

您还可以使用box-shadow属性实现发光效果，但是将阴影偏移设置为0。

8

4，以下样式不适合使用过渡效果

用于填充，边距和字体大小。如果应用程序由于浏览器而需要重新计算布局大小或文本提示，则此转换将消耗更多功率，并可能导致响应缓慢和卡纸。

如果要移动，放大或缩小元素，最好使用变形技术。

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/bofangqi/article-321283-1.html