HTML5+CSS3从入门到精通之如何实现鼠标移入移出时改变样式
沉沙 2019-01-29 来源 : 阅读 888 评论 0

摘要:本篇教程探讨了HTML5+CSS3从入门到精通之如何实现鼠标移入移出时改变样式,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入。

本篇教程探讨了HTML5+CSS3从入门到精通之如何实现鼠标移入移出时改变样式,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入。

HTML5+CSS3从入门到精通之如何实现鼠标移入移出时改变样式

<

1,使用伪类实现样式切换
伪类是CSS2.1时出现的新特性,让许多原本需要JavaScript才能做出来的效果使用CSS就能实现。
比如实现下面的鼠标悬停效果,只要为:hover伪类应用一组新样式即可。当访客鼠标移动到按钮上面时,浏览器会自动为按钮应用这新样式。
1
2
<style>
.slickButton {
    color: white;
    font-weight: bold;
    padding: 10px;
    border: solid 1px black;
    background: lightgreen;
    cursor: pointer;
}
 
.slickButton:hover {
    color: black;
    background: yellow;
}
 
<button class="slickButton">hangge.com</button>
2,使用CSS3的过渡功能实现颜色过渡
直接使用伪类虽然实现了样式的改变,但由于没有过渡效果会显得很生硬。以前如果要实现过渡,就需要借助第三方的js框架来实现。现在只需要使用CSS3的过渡(transition)功能,就可以从一组样式平滑的切换到另一组样式。
(1)背景色过渡变化
下面鼠标移入后,按钮背景色会慢慢地变成黄色。鼠标离开,过渡效果又会发生,颜色恢复到初始状态。
1
2
<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。
1
2
transition: all 0.5s;
-webkit-transition: all 0.5s;
3,更多的过渡效果
(1)淡入淡出
通过修改 opacity 属性改变透明度,从而实现图像的淡入淡出。
1
<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;
}
 
<button class="slickButton2">hangge.com</button>
(2)阴影(投影)效果
使用 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>
(3)发光效果
同样利用 box-shadow 属性可以实现发光效果,只不过把阴影偏移量设为0。
8
<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>
4,下面样式不值得使用过渡效果
对于内边距(padding)、外边距(margin)和字体大小(font-size)。如果应用由于浏览器要重新计算布局大小或文本提示,这样过渡会消耗更多电量,同时可能导致响应迟钝和卡壳。
如果想要移动、放大、缩小元素,那么最好使用变形技术。    

本文由职坐标整理发布,学习更多的相关知识,请关注职坐标IT知识库!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程