怎么完全用CSS3使一个的元素做流畅的弧线运动?

发布网友 发布时间：2022-04-28 11:30

我来回答

共9个回答

懂视网 时间：2022-04-28 15:51

本篇文章给大家带来的内容是关于如何使用纯CSS实现一个转动的自行车车轮的动画效果 ，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

效果预览

源代码下载

https://github.com/comehope/front-end-daily-challenges

代码解读

定义 dom，容器中包含 6 个元素：

<div class="wheel">
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
</div>

居中显示：

body {
 margin: 0;
 height: 100vh;
 display: flex;
 align-items: center;
 justify-content: center;
 background-image: linear-gradient(#555, #222);
}

画出轮圈：

.wheel {
 width: 9em;
 height: 9em;
 font-size: 25px;
 border: 0.4em solid #777;
 border-radius: 50%;
 box-shadow: 0 0 0 0.5em #111;
}

定义辐条的样式：

.wheel {
 display: flex;
 align-items: center;
 justify-content: center;
}

.wheel span {
 position: absolute;
 width: 8em;
 height: 1em;
 border: 0.1em solid;
 border-color: #ccc transparent;
}

定义变量，画出多根幅条：

.wheel span {
 transform: rotate(calc((var(--n) - 1) * 30deg));
}

.wheel span:nth-child(1) {
 --n: 1;
}

.wheel span:nth-child(2) {
 --n: 2;
}

.wheel span:nth-child(3) {
 --n: 3;
}

.wheel span:nth-child(4) {
 --n: 4;
}

.wheel span:nth-child(5) {
 --n: 5;
}

.wheel span:nth-child(6) {
 --n: 6;
}

让车轮转动起来：

.wheel span {
 animation: run 4s linear infinite;
}

@keyframes run {
 to {
 transform: rotate(calc((var(--n) - 1) * 30deg + 360deg));
 }
}

用伪元素画出地面上的线条：

.wheel {
 position: relative;
}

.wheel::before {
 content: '';
 position: absolute;
 width: 15em;
 height: 0.2em;
 top: 11em;
 background-image: linear-gradient(
  to right,
  silver 0, silver 4em,
  transparent 4em, transparent 5em,
  silver 5em, silver 10em,
  transparent 10em, transparent 12em,
  silver 12em, silver 14em,
  transparent 14em, transparent 15em
 );
}

最后，让地面上的线条动起来，形成车轮向前走的效果：

.wheel::before {
 background-position: 15em;
 animation: run2 6s linear infinite;
}
@keyframes run2 {
 to {
 background-position: -15em;
 }
}

大功告成！

热心网友 时间：2022-04-28 12:59

可以做一个animation，举一个例子，让一个元素在某一个范围之内，左距离和上距离同时改变。但是，弧线要让两个距离改变速度变化不一致，所以最好一个元素改变上方距离（可以是top也可是margin-top），里面嵌入一个元素改变左边距离。例如，假如你要让横轴均匀变化，纵轴不均匀变化，轨迹为⌒形，可以左变化为{from{margin-left:0px}to{margin-left:200px}}，运动方式设为linear，然后上下变化可以{from{margin-top:100px}50%{margin-top:0px}to{margin-top:100px}}，运动方式设为ease-in-out。由于时间仓促我没有具体实验过，而且表达可能不太清楚，请原谅。

热心网友 时间：2022-04-28 14:17

首先运动要用到transform：translate。

单单translate不够，它是直线运动。这时候要加上旋转。因为直线运动的方向是相对于元素本身的指向的。

所以在平移的时候改变元素本身的志向就会改变移动方向。这时候做一个平缓的旋转，那么它移动的轨迹就是弧线了。transform：rotate

同时设置transform：translate()  rotate()。

再使用动画，让这个属性平均的变换就可以了

热心网友 时间：2022-04-28 15:52

在html5+css3中做到动态效果有4种方式：
1.transition(过渡)-通过属性值的变化来平滑过渡产生动画；

2.animate(动画)-这是css3中的自带的动画，可以动过各种变形（比如形变、缩放、位移），这里的位移其实就可以实现弧线运动，但是这儿需要的代码会非常多，个人是不建议用这个方法的。

3.canvas（画布）-可以想象着拿着一支笔在画笔上画东西，映射到电脑上，就是在每个坐标上面画东西。

4.svg-抱歉 这个我还没研究。

推荐方式：
canvas，步骤：

1.要达到弧线运动，那么就必须知道弧线的公式
2.通过setinterval来设置每一帧的坐标，比如：
(function({
y=公式与x的联系
} ,30)//这儿的30，代表30毫秒为一帧。
补充：如果要有个重复动作，那么久必须设置一个临界值，然后点返回原点重复动作；

热心网友 时间：2022-04-28 17:43

这种需求除了自己要做研究或者show一下做个demo外，还是js比较好。
css3的话，给该元素套个外层dom，外层transform:rotate，控制好半径（由外层dom大小控制）、角度、时间就行。

热心网友 时间：2022-04-28 19:51

这个要用到animation这个属性，

可以参考这个

热心网友 时间：2022-04-29 00:57

首先你要知道抛物线运动的规律,这事物理知识.
水平方向是匀速运动,竖直方向是匀加速运动.

这样你就可以先关键帧动画来控制元素的top.和left的变化量:
具体来说就是left随着时间等量增加.top随着时间匀变速增加.
translation的效果值再写成ease.应该可以出效果了

热心网友 时间：2022-04-29 03:55

这种需求除了自己要做研究或者show一下做个demo外，还是用js比较好。css3的话，在该元素套个外层dom，外层transform:rotate，控制好半径（由外层dom大小控制）、角度、时间就行。
这个方法也可以用：http://blog.csdn.net/mr_li13/article/details/50750431

热心网友 时间：2022-04-29 07:10

纯css的话给元素套个外层dom，由外层transform:rotate控制大小、时间不过外层dom恐怕会很大，还要设置父元素的overflow:hidden