码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2020-06-07 16:35:02      阅读:232      评论:0      收藏:0      [点我收藏+]

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

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

 

(1)背景色过渡变化

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

 

 1 <style>
 2 .slickButton {
 3     color: white;
 4     font-weight: bold;
 5     padding: 10px;
 6     border: solid 1px black;
 7     background: lightgreen;
 8     cursor: pointer;
 9     transition: background 0.5s;
10     -webkit-transition: background 0.5s;
11 }
12  
13 .slickButton:hover {
14     color: black;
15     background: yellow;
16 }
17 </style>
18  
19 <button class="slickButton">hangge.com</button>

 

 

 

(2)背景色,文字都需要过渡效果

 

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

 

 1 <style>
 2 .slickButton {
 3     color: white;
 4     font-weight: bold;
 5     padding: 10px;
 6     border: solid 1px black;
 7     background: lightgreen;
 8     cursor: pointer;
 9     transition: background 0.5s, color 0.5s;
10     -webkit-transition: background 0.5s, color 0.5s;
11 }
12  
13 .slickButton:hover {
14     color: black;
15     background: yellow;
16 }
17 </style>
18  
19 <button class="slickButton">hangge.com</button>

 

 

 

(3)过渡所有样式

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

 

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

 

 

(4)淡入淡出

通过修改 opacity 属性改变透明度,从而实现图像的淡入淡出。
 1 <style>
 2 .slickButton2 {
 3     color: white;
 4     font-weight: bold;
 5     padding: 10px;
 6     border: solid 1px black;
 7     background: lightgreen;
 8     cursor: pointer;
 9     opacity: 0.5;
10     transition: opacity 0.5s;
11     -webkit-transition: opacity 0.5s;
12 }
13 .slickButton2:hover {
14     opacity: 1;
15 }
16 </style>
17 <button class="slickButton2">hangge.com</button>

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

 

(5)阴影(投影)效果

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

 

 1 <style>
 2 .slickButton3 {
 3     color: white;
 4     font-weight: bold;
 5     padding: 10px;
 6     border: solid 1px black;
 7     background: lightgreen;
 8     cursor: pointer;   
 9     transition: box-shadow 0.5s;
10     -webkit-transition: box-shadow 0.5s;
11 }
12 .slickButton3:hover {
13     box-shadow:5px 5px 10px gray;
14 }
15 </style>
16 <button class="slickButton3">hangge.com</button>

 

 

(6)发光效果

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

 

 1 <style>
 2 .slickButton4 {
 3     color: white;
 4     font-weight: bold;
 5     padding: 10px;
 6     border: solid 1px black;
 7     background: lightgreen;
 8     cursor: pointer;   
 9     transition: box-shadow 0.5s;
10     -webkit-transition: box-shadow 0.5s;
11 }
12  
13 .slickButton4:hover {
14     box-shadow:0px 0px 20px orange;
15 }
16 </style>
17 <button class="slickButton4">hangge.com</button>


 

 

下面样式不值得使用过渡效果

对于内边距(padding)、外边距(margin)和字体大小(font-size)。如果应用由于浏览器要重新计算布局大小或文本提示,这样过渡会消耗更多电量,同时可能导致响应迟钝和卡壳。
如果想要移动、放大、缩小元素,那么最好使用变形技术。

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

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

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!