给 HTML 元素 Hover 态加点料

UE 小姐姐经常会说：“这个按钮 Hover 的时候背景色要变深，这个图片 Hover 的时候要动一下”，你可以选择「搜地一声」从一种状态变成另一种状态，也可以让这个变化过程中有一种「过渡效果」。

这其中背后使用的基本都是 transition 来实现，在第16天：领导说，体验差这节内容中有提到过它，今天系统学一遍。

当修改 CSS 「某些」属性的时候，可以给这些属性添加效果，让其带有动画改变，有一个过渡效果，而不是「搜地一声」就变过去了。transition 这货和 animation 用法基本一致。先回顾一下 animation 的属性，各个属性的作用可以看跳动的音符动画实现原理剖析：

再来看 transition，其实就是 mini 版的 animation。

transition 是过渡动画，修改某些属性的时候不会立刻生效，它会以动画的形式逐渐过渡到要设置的值。比如设置某个 HTML 元素的背景颜色，修改宽度和高度。

.move-transition {/* transition-property: all; */transition-property: background-color, height, width;transition-duration: 1.8s, 1.0s, 1.0s;transition-delay: 0.1s;transition-timing-function: linear;
}

transition-property: 指需要使用过渡动画的属性，这里设置了背景色，高度和宽度。也可以通过关键字 all 设置所有的属性；
transition-duration: 动画持续的时间，可以单独控制某个属性的时间， transition-duration：1.8s, 1.0s, 1.0s 表示修改 background-color 需要 1.8s, 修改 height 需要 1.0s, 修改 width 需要 1.0s;
transition-delay：动画开始时需要延迟多长时间才开始执行；
transition-timing-function：表示动画执行时的时间函数，不同函数走过的曲线不一样，详细内容可参考小猴子跌落山崖之 linear、ease、ease-in。

我们做一个 hover 态时按钮背景变化：

代码如下：

总的来说可以把 transition 看做是「一次性动画」，如果想给某些 HTML 元素属性改变时添加点动效，可以通过它来实现。

大家加油！

推荐阅读：

学习前端的 7 个专题

给 HTML 元素 Hover 态加点料相关推荐

【Less】给 CSS 加点料
[Less]给 CSS 加点料博客说明文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 说明相比Sass的高调宣言,Less就比较低调 ...
发布一个实体类属性生成小工具，给开发加点料
做了很久的代码生成工具,基本上都是基于表生成实体类属性的,把数据库表的信息拿出来,然后之乎者也后生成一个标准的实体类,包含字段.属性.描述等东西. 是基于整个数据库生成整个框架代码的工具,如我的代码生 ...
react列表元素hover
常见的列表元素hover,我们使用的方式是,在获得原始数组对象的时候加一个标识符,然后mouseIn 的时候改变状态,mouseOut的时候恢复状态: 一.举例演示 const arr = [{nam ...
使用soundtouch为音频加点料
使用soundtouch为音频加点料作者个人网站链接 jiguangchao.com 为什么要为音频加点料? 为音频加点料就是实现音频的特效,可以实现音频的倍数播放,以及音乐的升降调.响度增加等功能 ...
通过Filter给Request、Response加点料
一.简介使用过 ASP.NET 的同学都知道,Filter 是一个非常中的概念,是项目开发过程中也是经常使用的.今天我们就来讲讲,通过Filter给 Request.Response 加点料.通过 ...
农产品想畅销需在包装加点料
产品的包装是品牌与消费者沟通的最直接方式,一款好的包装够吸引消费者,提升销量.传统农产品包装大红大绿是主调,现在随着消费者审美不断提高,农产品包装急需升级. 蓝狮农业品牌营销策划机构贾商认为,在农 ...
chrome 开发者工具，查看元素 hover 样式
在web开发中,浏览器开发者工具是我们常用的调试工具.我们经常会有这样的需求,就是查看元素的时候需要查看它的hover样式.相信有很多小伙伴都遇到过这样的情形,始终选不中hover后的元素状态.其实在 ...
css一元素hover状态控制另一元素显现
.delIndex { //目标元素默认不显现display: none; } .historyPanel:hover .delIndex { //对目标元素的父标签添加hover状态,控制目标元素显 ...
CSS实现某元素hover时所有兄弟节点样式改变
2019独角兽企业重金招聘Python工程师标准>>> css 提供的兄弟节点选择器有两种第一种:+ 相邻兄弟选择器( li + li )只能选择与自己紧紧相连的身后的一个兄弟, ...

给 HTML 元素 Hover 态加点料

给 HTML 元素 Hover 态加点料相关推荐

最新文章

热门文章