News Contents
信息中心

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

发表日期:2019/1/11      浏览次数:

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


(1)背景色过渡变化

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


<style>.slickButton {    color: white;    font-weight: bold;    padding: 10px;    border: solid 1px black;    background: lightgreen;    cursor: pointer;    transition: background 0.5s;    -webkit-transition: background 0.5s;
} 
.slickButton:hover {    color: black;    background: yellow;
}</style>
 <button class="slickButton">hangge.com</button>



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


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


<style>.slickButton {    color: white;    font-weight: bold;    padding: 10px;    border: solid 1px black;    background: lightgreen;    cursor: pointer;    transition: background 0.5s, color 0.5s;    -webkit-transition: background 0.5s, color 0.5s;
} 
.slickButton:hover {    color: black;    background: yellow;
}</style>
 <button class="slickButton">hangge.com</button>



(3)过渡所有样式

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


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


(4)淡入淡出

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

<style>.slickButton2 {    color: white;    font-weight: bold;    padding: 10px;    border: solid 1px black;    background: lightgreen;    cursor: pointer;    opacity: 0.5;    transition: opacity 0.5s;    -webkit-transition: opacity 0.5s;
}.slickButton2:hover {    opacity: 1;
}</style><button class="slickButton2">hangge.com</button>


(5)阴影(投影)效果

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


<style>.slickButton3 {    color: white;    font-weight: bold;    padding: 10px;    border: solid 1px black;    background: lightgreen;    cursor: pointer;   
    transition: box-shadow 0.5s;    -webkit-transition: box-shadow 0.5s;
}.slickButton3:hover {    box-shadow:5px 5px 10px gray;
}</style><button class="slickButton3">hangge.com</button>


(6)发光效果

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


<style>.slickButton4 {    color: white;    font-weight: bold;    padding: 10px;    border: solid 1px black;    background: lightgreen;    cursor: pointer;   
    transition: box-shadow 0.5s;    -webkit-transition: box-shadow 0.5s;
} 
.slickButton4:hover {    box-shadow:0px 0px 20px orange;
}</style><button class="slickButton4">hangge.com</button>


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

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

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


盛大建站承接个人、公司、企业的网站建设、网页设计、网店制作、独立商城制作、外贸网站制作,也承接同行介绍的业务,欢迎联系!
本站承接主要业务如下:
1、提供免备案虚拟主机(网站空间),有独立国内服务器、高速美国服务器、香港服务器、韩国服务器、日本服务器,>> http://www.fuanxx.com
2、网站建设:个人网店制作、企业建站、公司网站、新闻、下载等;论坛、博客网站搭建,承接外贸英文站制作
3、承接阿里巴巴、京东、淘宝、天猫等的商品数据采集
4、网站防钓鱼,可以过360、QQ、搜狗、金山、微信拦截
5、要就发IP网站限制访问系统,防止同行抄袭并保障海外客户访问不受影响,>> http://www.198ip.com
  下一篇:没有了!
十年如一日,我们专注于提供高品质 定制网站建设服务!
您的信任,我们的责任,期待与您的合作!