CSS3实现了当鼠标移入和移出时更改样式的效果

移入和移出有效. 我们通常使用js或jquery来实现它，但是现在css3非常强大. 使用css3可以直接实现许. 让我们看一个使用CSS3来实现鼠标进出的示例. 更改样式的效果不需要第三方插件或js的配合.

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

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

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

代码如下

复制代码

（2）背景颜色和文本需要过渡效果

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

代码如下

复制代码

（3）转换所有样式

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

代码如下

复制代码

转换: 全部0.5s;

-webkit-transition: 全部0.5s;

3，更多的过渡效果

（1）淡入淡出

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

代码如下

复制代码

（3）发光效果

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

代码如下

复制代码

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

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

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

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