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

我们先来看下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属性指定切换效果的速度。此属性允许一个过渡效果，以改变其持续时间的速度。

语法

现在有以下的函数供调用：

值	描述
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>

效果截图:

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

easyui实现鼠标移到某一行，就会弹出一个提示信息效果
问题描述:使用easyui的datagrid,产生的表格数据,经常有时候,某个单元格的数据比较多, 就会出现显示不全的问题,所以为了完整的显示数据,就可以当鼠标移到某个单元格的时候,这个单元格就会弹出 ...
html鼠标移上去变色放大,CSS3 鼠标滑过图片突出放大效果 | 腾讯云
今天给大家分享一款简单实用的CSS3鼠标滑过图片放大特效,我们可以将它应用在相册中,或者是轮播展示的图片中,这样可以将鼠标移到图片上进行快速预览图片.同时你也可以在此基础上扩展它,比如给图片加投影和边 ...
css划上去变长,Css3如何实现鼠标移上变长特效？（图文+视频）
本篇文章主要给大家介绍用css3实现鼠标移入变长效果的方法. 在前端页面设计中,css的功能是异常强大的,只要运用好它,你能实现很多网站各种精彩的动态效果.那么在之前的文章中也给大家分享介绍了一些用c ...
鼠标移到图片上，图片放大
.Nei1 img{ width: 122px; height: 89.6px; float: left; padding: 2px 2px; transition: all 0.6s; } .Nei ...
php鼠标移过图片放大代码,鼠标移上去，图片会自动原地放大CSS写法
今天在制作一个zblog模板的时候,用上了这个图片放大特效,想到以前也没写过,就分享出来吧! 在我第一次接触这个特效的时候,以为会很复杂,至少会有几行代码才能去实现,但学习后真的精到了! CSS3的t ...
鼠标悬停 -css如何实现鼠标移至图片上显示遮罩层及文字
搜索这个效果的时候,很多人都是用css结合jQuery实现的,其实直接用css也可以实现哦~ 效果前: 效果后: 代码: <!DOCTYPE html> <html lang=&qu ...
鼠标移到到图片，图片向上滑动预览效果
<!DOCTYPE html> <html> <head><title>鼠标移到到图片,图片向上滑动预览效果</title><scri ...
CSS图片阴影+鼠标移上图片放大、变形
在做图片卡片列表的时候我们经常用到图片的呼吸灯效果,实现图片的阴影效果.放大.动态展示代码: li img { display: block; width: 140px; height: 140px ...
html鼠标悬停填充表格,鼠标移到表格上时，鼠标所在行放大高亮显示【实例】...
本文给大家介绍一个比较有趣的CSS Table表格,当鼠标移到表格上时,鼠标所在行放大高亮显示. 鼠标所在行放大高亮显示 HTML代码html> Table V01 * { margin: 0p ...

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

定义和用法

语法

语法

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

最新文章

热门文章