如图所示,由于宽度是不固定的,如果箭杆长度也是不固定的,用css要怎么画呢?
意思200是固定宽度的吗?用flex就能实现
<div style="display:flex; justify-content: center">
<div style="width: 200px">200</div>
</div>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Animation</title>
<style>
.moving-element {
position: absolute;
width: 50px;
height: 50px;
background-color: red;
animation: move 2s linear infinite;
}
@keyframes move {
0% {
left: 0;
top: 0;
}
100% {
left: 200px; /* 终点的横坐标 */
top: 0;
}
}
</style>
</head>
<body>
<div class="moving-element"></div>
</body>
</html>
在这个示例中,.moving-element将从左上角移动到右上角,横向距离为200px。你可以根据需要调整left和top的值来改变移动的路径和距离。
8 回答6k 阅读✓ 已解决
9 回答9.4k 阅读
6 回答5k 阅读✓ 已解决
5 回答8k 阅读✓ 已解决
3 回答10.5k 阅读✓ 已解决
5 回答7.7k 阅读
4 回答7.3k 阅读
主要是字符不好画,其他的可以使用border或background来画,箭头的画,下面我使用字符<>来绘制,也可以试试→←,或者字符,svg等