CSS3之线条特效（鼠标悬停线条从中间变长）

梦里梦外; 2022-07-11 07:47 247阅读 0赞

![这里写图片描述][SouthEast]

**当鼠标悬停在红色圆上时，福字下面出现一条白色的线条从中间不断向两边延伸**

![这里写图片描述][SouthEast 1]

<!doctype html>
    <html>
         <head>
                <meta charset="UTF-8">
                <meta name="Generator" content="EditPlus®">
                <meta name="Author" content="">
                <meta name="Keywords" content="">
                <meta name="Description" content="">
                <title>Document</title>
                <style> #wrap{ width:500px; height:500px; border-radius:50%; background-color:#E4393C; margin:100px auto; position:relative; } #wrap:befor{ content:""; display:table; } p.good{ float:left; font-size:168px; font-family:"楷体"; color:#fff; margin:148px 0 0 166px; } #line{ width:0px; height:5px; border-radius:5px; background-color:#fff; margin:0 auto; position:absolute; top:338px; left:0px; right:0px; transition:width 1s linear; } #wrap:hover #line{ width:200px; } </style>
         </head>
         <body>
            <div id="wrap">
                <p class="good">福</p>
                <div id="line"></div>
            </div>
         </body>
    </html>

[SouthEast]: /images/20220711/a5086f7ec01940aca19e1f2eef84efca.png
[SouthEast 1]: /images/20220711/58a9d6744dcf4dcc9d297f1e28d97cfe.png

发表评论取消回复

表情：

评论列表（有 0 条评论，247人围观）

还没有评论，来说两句吧...

相关阅读

相关科技线条空间3D特效

![在这里插入图片描述][20200720143741485.gif] css代码 body { margin: 0; overflow: h

怼烎@/ 2023年02月28日 05:29/ 0 赞/ 228 阅读

相关 canvas旋转跟随鼠标线条 html+css+js

先看效果（完整代码在底部）：实现过程（可一步一步实现）： 1.定义标签与基本css样式： <canvas id="canvas"></canvas>

阳光穿透心脏的1/2处/ 2022年11月15日 14:12/ 0 赞/ 203 阅读

相关一、 CSS3鼠标悬停相册预览特效

文章目录一、9款CSS3鼠标悬停相册预览特效 1.1 图片预览 1.2 html代码 1.3 main.css代码

我不是女神ヾ/ 2022年11月11日 13:25/ 0 赞/ 202 阅读

相关 css3 svg线条花纹动画js特效

[下载地址][Link 1] css3 svg线条花纹动画特效是一款彩色的线条花纹旋转变形动画特效。 ![bac879400a164e60a24d5810919c9f663

ゝ一纸荒年。/ 2022年09月16日 06:13/ 0 赞/ 183 阅读

相关 CSS3按钮鼠标悬停动画js特效

[下载地址][Link 1] CSS3按钮鼠标悬停动画特效是一款包含6种不同效果的简单按钮悬停动画特效。 ![17ead0125e7ac57e4b0c36d38ce7d86

Love The Way You Lie/ 2022年09月16日 06:13/ 0 赞/ 241 阅读

相关鼠标悬停卡片css3动画js特效

[下载地址][Link 1]基于Bootstrap网格布局的图片画廊，css3鼠标hover卡片动画特效。该特效在鼠标悬停或hover到卡片上时，通过CSS3制作一系列的文字和

Love The Way You Lie/ 2022年09月11日 00:29/ 0 赞/ 293 阅读

相关 CSS3之线条特效（鼠标悬停线条从中间变长）

![这里写图片描述][SouthEast] 当鼠标悬停在红色圆上时，福字下面出现一条白色的线条从中间不断向两边延伸 ![这里写图片描述][SouthEast 1]

梦里梦外;/ 2022年07月11日 07:47/ 0 赞/ 248 阅读

相关动态背景线条，鼠标移动线条汇聚---背景特效

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI3

快来打我*/ 2022年04月13日 14:18/ 0 赞/ 291 阅读

相关网页特效背景——随鼠标变换的动态线条

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X

落日映苍穹つ/ 2022年04月13日 14:18/ 0 赞/ 430 阅读

相关 OpenLayers3绘制线条

OpenLayers3绘制线条本文适合能够使用openlayers3创建layer图层的开发者，并且本文使用的是vue.js进行开发，如果使用其他前端语言请自行更改。

素颜马尾好姑娘i/ 2021年11月26日 14:54/ 0 赞/ 542 阅读