html - 为线条设置动画并使其变成 css3
问题描述
我有一条线。我把它从左向右移动。这很好。但现在我想以 au turn 方式或像蛇一样转动它。我怎样才能做到这一点?
.top {
position: absolute;
width: 100px;
height: 5px;
left: 0;
background-color: red;
animation: move 5s;
}
@-webkit-keyframes move {
from {}
to {
left: 50px;
}
}
<div class="top"></div>
解决方案
不确定这是否是您所追求的,但希望它有所帮助。
.top {
position: absolute;
width: 100px;
height: 5px;
left: 0;
top: 0;
background-color: red;
animation: move 5s 1s forwards;
}
@-webkit-keyframes move {
0% {
left: 0px;
top: 0px;
}
25% {
left: 50px;
}
50% {
top: 20px;
transform: rotate(180deg);
}
100% {
left: 0;
top: 20px;
transform: rotate(180deg);
}
}
<div class="top"></div>
推荐阅读
- python - 如何替换列表/字典中的键?
- javascript - 如何将 JSON 对象分配给属性
- javascript - 打印时如何在html页脚上显示页码?
- c# - 创建具有共享吞吐量的 CosmosDB 集合,而不是使用已弃用的 SharedOfferThroughput
- node.js - 如何测试依赖注入 Jest
- java - 将包含 ISO 8859-1 十六进制字符代码的字符串转换为 UTF-8 java
- html - 如何将div分配给文本
- matlab - 如何准确传递 MATLAB 回调的函数句柄?
- c# - 不应存在的索引异常
- javascript - 当提供箭头函数时,如何在 Array.prototype.forEach 中解决“this”?