如何用transition实现鼠标移到一行字从左往右伸出一条线，离开时又缩回原样（分析两种情况）？

最新推荐文章于 2024-02-12 12:20:40 发布

sensus森森

最新推荐文章于 2024-02-12 12:20:40 发布

阅读量2.4k

点赞数 1

分类专栏： CSS2/CSS3 文章标签：伸长缩短过渡效果

本文链接：https://blog.csdn.net/qq_27682041/article/details/75651468

版权

CSS2/CSS3 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

我们先来看下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>

效果截图: