我们先来看下transition的相关知识
定义和用法
transition 属性是一个简写属性,用于设置四个过渡属性,如需向多个样式添加过渡效果,请添加多个属性,由逗号隔开:
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
注释:请始终设置 transition-duration 属性,否则时长为 0,就不会产生过渡效果。
语法
transition: property duration timing-function delay;
值 | 描述 |
---|---|
transition-property | 规定设置过渡效果的 CSS 属性的名称。 |
transition-duration | 规定完成过渡效果需要多少秒或毫秒。 |
transition-timing-function | 规定速度效果的速度曲线。默认是ease,还有liner |
transition-delay | 定义过渡效果何时开始。 |
transition-timing-function属性指定切换效果的速度。此属性允许一个过渡效果,以改变其持续时间的速度。
语法
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(
n,
n,
n,
n);
现在有以下的函数供调用:
值 | 描述 |
---|---|
linear | 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。 |
ease | 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。 |
ease-in | 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。 |
ease-out | 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。 |
ease-in-out | 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。 |
cubic-bezier(n,n,n,n) (三次贝塞尔曲线) | 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>如何实现鼠标移到一行字从左往右伸出一条线,离开时又缩回原样?</title>
<style>
.stretch{
width: 16px;
height: 2px;
background: red;
transition: width 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
.transition:hover{
cursor: pointer;
}
#sibling-transition:hover + #sibling-stretch,#parent-transition:hover #parent-stretch{
width: 335px;
}
/* 第一种是兄弟元素时的写法,但是#stretch要在#transition的后面才有效果,因为还没有根据节点选择前面的兄弟节点的选择器*/
/* 第二种是父子元素时的写法 */
</style>
</head>
<body>
兄弟元素时:
<div class="transition" id="sibling-transition">
鼠标移近时,线段伸长,鼠标移开时,线段缩回
</div>
<div class="stretch" id="sibling-stretch"></div>
父子元素时:
<div class="transition" id="parent-transition">
<div class="stretch" id="parent-stretch"></div>
鼠标移近时,线段伸长,鼠标移开时,线段缩回
</div>
</body>
</html>
效果截图: