CSS3的过渡效果，使用transition实现鼠标移入/移出效果

2021-02-09 11:17

阅读：672

标签：add 变化 pad relative pointer style span 外边距 pos

在css中使用伪类虽然实现了样式的改变，但由于没有过渡效果会显得很生硬。以前如果要实现过渡，就需要借助第三方的js框架来实现。现在只需要使用CSS3的过渡（transition）功能，就可以从一组样式平滑的切换到另一组样式。

下面鼠标移入后，按钮背景色会慢慢地变成黄色。鼠标离开，过渡效果又会发生，颜色恢复到初始状态。

 1 18  
19

上面样例看到虽然背景色实现了过渡，文字颜色还是直接改变的。要实现多个样式的过渡，只需使用逗号作为分隔符，同时制定多个样式属性即可。

 1 18  
19

如果想要过渡所有的样式，并且希望所有过渡都同步完成，可以在指定属性名的地方填 all。

1 transition: all 0.5s;
2 -webkit-transition: all 0.5s;

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

 1 17

熊猫办公https://www.wode007.com/sites/73654.html

使用 box-shadow 属性可以为任何盒子元素添加阴影，从而制作出漂亮的悬停效果。

 1 16

同样利用 box-shadow 属性可以实现发光效果，只不过把阴影偏移量设为0。

 1 17

对于内边距（padding）、外边距（margin）和字体大小（font-size）。如果应用由于浏览器要重新计算布局大小或文本提示，这样过渡会消耗更多电量，同时可能导致响应迟钝和卡壳。

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

CSS3的过渡效果，使用transition实现鼠标移入/移出效果

标签：add 变化 pad relative pointer style span 外边距 pos

原文地址：https://www.cnblogs.com/ypppt/p/13060864.html

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：CSS3的过渡效果，使用transition实现鼠标移入/移出效果
文章链接：http://soscw.com/index.php/essay/53072.html

亲，登录后才可以留言！