html - 单击复选框时,是否可以从左到右文本装饰为 CSS 行设置动画?
问题描述
我正在尝试使用 CSS 为文本上的一条线设置动画,但是当我单击复选框时,它就像一个待办事项列表,当您选中该框时,它将通过一条线,但我希望这条线从左侧开始对了,谁能告诉我我正在尝试的是否真的可行?如果没有,还有其他方法可以实现这一目标吗?HTML:
<% DoList.forEach(function(elem) { %>
<div class = "item">
<input type="checkbox">
<p class = items> <%=elem %></p>
</div>
<% }); %>
<form class = "item" action="/" method="post">
<input type="text" name ="toDo" placeholder="I want to..." autofocus required="required" autocomplete="off" >
<button type="submit" class="rotateimg180">+</button>
</form>
解决方案
假设您要删除的文本是一行,您可以向 p 元素添加一个伪元素,该元素在检查输入时会增长。它可以具有使用线性渐变创建的水平直线的背景图像。
p {
position: relative;
display: inline-block;
}
input+p::before {
content: '';
position: absolute;
background-image: linear-gradient(transparent 0 48%, black 50% calc(50% + 2px), transparent calc(50% + 2px) 100%);
width: 0;
height: 100%;
transition: width 2s linear;
display: inline-block;
}
input:checked+p::before {
width: 100%;
}
<input type="checkbox">
<p>text here</p>
推荐阅读
- java - Why does Retrofit use Interface instead of a normal java class?
- go - Go 如何在没有内置 Comparable 接口的情况下处理比较?
- php - 如何仅在 woocommerce 的商店页面上显示有货的变体?
- php - php 正在验证一个无效的 url URL
- vue.js - Vue-CLI的逐步调试
- php - Android应用程序解码来自PHP MySql数据库的JSON响应,没有特殊字符
- r - 如何使用 R 对 NeuralNet 模型使用分类/因子输入
- javascript - PropTypes 给我一个字符串类型错误
- agda - 为什么将 Size 定义为参数与索引时的处理方式不同?
- spring - 使用 @ResponseBody 返回 BigDecimal 精度丢失