css 鼠标离开样式,CSS3 - 鼠标移入移出时改变样式
1,使用伪类实现样式切换
伪类是CSS2.1时出现的新特性,让许多原本需要JavaScript才能做出来的效果使用CSS就能实现。
比如实现下面的鼠标悬停效果,只要为:hover伪类应用一组新样式即可。当访客鼠标移动到按钮上面时,浏览器会自动为按钮应用这新样式。
1
2
.slickButton {
color: white;
font-weight: bold;
padding: 10px;
border: solid 1px black;
background: lightgreen;
cursor: pointer;
}
.slickButton:hover {
color: black;
background: yellow;
}
hangge.com
2,使用CSS3的过渡功能实现颜色过渡
直接使用伪类虽然实现了样式的改变,但由于没有过渡效果会显得很生硬。以前如果要实现过渡,就需要借助第三方的js框架来实现。现在只需要使用CSS3的过渡(transition)功能,就可以从一组样式平滑的切换到另一组样式。
(1)背景色过渡变化
下面鼠标移入后,按钮背景色会慢慢地变成黄色。鼠标离开,过渡效果又会发生,颜色恢复到初始状态。
1
2
.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;
}
hangge.com
(2)背景色,文字都需要过渡效果
上面样例看到虽然背景色实现了过渡,文字颜色还是直接改变的。要实现多个样式的过渡,只需使用逗号作为分隔符,同时制定多个样式属性即可。
.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;
}
hangge.com
(3)过渡所有样式
如果想要过渡所有的样式,并且希望所有过渡都同步完成,可以在指定属性名的地方填 all。
1
2
transition: all 0.5s;
-webkit-transition: all 0.5s;
3,更多的过渡效果
(1)淡入淡出
通过修改 opacity 属性改变透明度,从而实现图像的淡入淡出。
1
.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;
}
hangge.com
(2)阴影(投影)效果
使用 box-shadow 属性可以为任何盒子元素添加阴影,从而制作出漂亮的悬停效果。
.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;
}
hangge.com
(3)发光效果
同样利用 box-shadow 属性可以实现发光效果,只不过把阴影偏移量设为0。
8
.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;
}
hangge.com
4,下面样式不值得使用过渡效果
对于内边距(padding)、外边距(margin)和字体大小(font-size)。如果应用由于浏览器要重新计算布局大小或文本提示,这样过渡会消耗更多电量,同时可能导致响应迟钝和卡壳。
如果想要移动、放大、缩小元素,那么最好使用变形技术。
css 鼠标离开样式,CSS3 - 鼠标移入移出时改变样式相关推荐
- html设置鼠标移入移出样式,鼠标移入移出_CSS3实现鼠标移入移出时改变样式的效果...
摘要 腾兴网为您分享:CSS3实现鼠标移入移出时改变样式的效果,壹学车,小猿口算,网易uu,万步有约等软件知识,以及山西个税,自动伴奏软件,成都农商银行app,儿歌千千,抖音群控系统,qq领赞,201 ...
- 鼠标移入移出时定时器加速的原因_购买游戏鼠标的几点关键 你必须知道
对枪被秒,补兵点空,游戏中的常见失误,除去玩家自身操作水平原因,很大一部分是由于鼠标性能无法满足游戏需求导致.普通鼠标所使用引擎刷新率较低,高速移动时定位准确性不佳,甚至还会出现丢帧问题,对玩家操作产 ...
- 鼠标移入移出时定时器加速的原因_赛睿Rival 3 Wireless测评:实用出彩的无线鼠标...
在选择鼠标等外设产品时,是否支持无线连接已经逐渐成为许多小伙伴们选购指标之一.毕竟随着无线技术的发展,无线外设产品的延迟表现逐渐能够媲美有线,而且少了线的束缚用起来也更加随心所欲.所以即使是在游戏外设 ...
- html语言鼠标悬停特效,CSS3鼠标悬停文字幻影动画特效
这是一款CSS3鼠标悬停文字幻影动画特效.该特效利用before和after伪元素来制作当鼠标悬停在超链接文本上的时候的幻影效果. 使用方法 在页面中引入bootstrap.css.jquery和ph ...
- html鼠标悬浮缩放,CSS3鼠标悬浮过渡缩放效果
以下为一个纯css写的图片鼠标悬浮缩放效果,其实基本原理十分简单,我们访问一些网站可以发现他们都会对图片做一些交互效果的处理,当然实现图片过渡效果有很多方式,例如使用JQuery或者一些第三方js动画 ...
- html图片鼠标动态效果代码,CSS3鼠标hover图片动画特效代码
这是一款CSS3鼠标hover图片动画特效代码.该鼠标hover动画使用简单的CSS transition技术,配合元素的宽度变化,制作出炫酷的鼠标hover图片遮罩层动画效果. 使用方法 在页面中引 ...
- 鼠标离开触发ajax,鼠标离开浏览器窗口时的Javascript事件[重复]
我希望当鼠标离开浏览器窗口时运行一些Javascript代码.我只需要支持Safari(WebKit). 我尝试将mouseout处理程序放在窗口上.当鼠标离开浏览器窗口时,将可靠地调用该处理程序.但 ...
- html鼠标点击伪类,CSS伪类:CSS3鼠标滑过按钮动画
前言 按钮,对开发者而言,是非常常见的一个功能.前端通常会对按钮加入一些操作交互样式,增加一些用户体验. 比如:hover样式.点击样式.loading样式等.下面我们通过简单示例在学习一下css3动 ...
- 鼠标移入移出时定时器加速的原因_《Among Us》网易UU加速器带你体验太空狼人杀...
<Among Us>自8月份爆火后,许多国内玩家都十分想尝试这款玩法简单.画风喜感的游戏.不过由于目前这款游戏只有外服,并且不支持中文,全英文的界面和聊天方式,让许多小伙伴望而却步.小编推 ...
最新文章
- java中调用python
- 克服大数据技能差距的策略
- Visual studio内存泄露检查工具--BoundsChecker
- python面试 hashmap是什么_面试不慌,看完保证让你写HashMap跟玩一样
- Exploit练习Protostar——stack3
- java 内部类 返回值_Java学习笔记:形参和返回值、内部类、常用API
- 经典卷积神经网络的学习(三)—— Inception Net
- win2003 ent 64 + mssql ent 64
- Xftp:找不到匹配的outgoing encryption算法
- (bilibili)b站看不见视频评论区或不显示高级弹幕
- 自定义计时器_笑死我了_哈哈哈哈哈嗝儿
- rabbitmq多个消费者消费同一个队列中的同一条消息。
- JeecgBoot 2.4.6 版本发布,基于代码生成器的企业级低代码平台
- Android播放流媒体视频
- 快速将webp格式转换成jpg
- c语言break在if中用法,break可用于什么语句 break语句可用于for语句和if语句中 对吗...
- Fastjson反序列化
- Verilog实现八人抢答器
- 双网卡 跃点_Windows10下如何提升双网卡提升网速叠加网卡跃点数
- 目标检测算法——YOLOv7改进|增加小目标检测层
热门文章
- 高中学历的益阳老总顾慧军,“强撑”一家新能源企业IPO?
- squid介绍和作用
- Windows10系统自定义右键新建菜单(添加md和docx文件)
- 【C/C++小游戏】2048 大作战!(基于Easyx图形窗口实现)
- 学习日记08 08——超级数组
- (超链接字体的颜色设置
- 常见的apk专项测试,主要有几类
- Spring boot实现国际化
- ListView的简单应用(一)
- git使用中 error: pathspec ‘XXX‘ did not match any file(s) known to git 报错解决方法