CSS怎么给数字中间加一横线

2种方法:

1、给这个数字添加css属性:text-decoration: line-through;

2、给这个数字添加标签:del。如:<del>9999</del>。

text-decoration详解:

text-decoration : none || underline || blink || overline || line-through 

none :  无装饰。text-decoration:none 无装饰,通常对html下划线标签去掉下划线样式。

blink :  闪烁

underline :  下划线。text-decoration:underline 下划线样式。

line-through :  贯穿线。text-decoration:line-through 删除线样式-贯穿线样式。

overline :  上划线。text-decoration:overline 上划线样式。

### 使用 CSS 创建横线波浪动画效果 为了创建个具有视觉吸引力的横线波浪动画,可以利用 `@keyframes` 动画以及伪类来构建动态变化的效果。下面是个详细的实例说明。 #### HTML 结构 定义简单的 HTML 结构用于承载动画元素: ```html <div class="wave-container"> <span></span> </div> ``` #### 基础样式设置 为容器和内部 span 设置基础样式,确保布局合理并准备应用背景渐变作为初始状态: ```css .wave-container { width: 100%; height: 50px; overflow: hidden; } .wave-container span { display: block; position: relative; bottom: 0; left: 0; width: 500%; /* 扩展宽度以便于平移 */ height: 100%; } ``` #### 应用线性渐变与动画 通过多层 `linear-gradient()` 函数组合形成重复图案,并赋予其移动特性以模拟波动感。这里采用两个不同方向的角度梯度叠,使得线条看起来像是在流动[^3]。 ```css .wave-container span::before, .wave-container span::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient( to right, rgba(255, 255, 255, .7), rgba(255, 255, 255, .7) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .7) 50% ), linear-gradient( to right, #92baac, #e1ebbd ); background-size: 4rem 100%; animation-name: wave-flow; animation-duration: 2s; animation-timing-function: linear; animation-iteration-count: infinite; } /* 不同延迟时间让两层错开运动 */ .wave-container span::before { animation-delay: -.5s; } .wave-container span::after { transform-origin: center bottom; transform: scaleY(.5); } ``` #### 定义关键帧动画 指定每帧的变化情况,使整个过程更流畅自然: ```css @keyframes wave-flow { from { background-position: 0 0; } to { background-position: -20rem 0; } } ``` 此方法不仅能够创造出美观大方的波浪形装饰线,而且易于调整参数来自定义颜色、速度等方面的内容,满足多样化的设计需求[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值