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

html-css010

怎么完全用CSS3使一个的元素做流畅的弧线运动？,第1张

可以做一个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。由于时间仓促我没有具体实验过，而且表达可能不太清楚，请原谅。

完全可以，不过效果和ps出来的还是会有差距的。

<style>

.gaguang{width:300pxtext-align:center}

.box{width: 300px

height: 100px

background: #3B4C2C

border: 4px solid white

box-shadow: 0 0 10px #333

border-radius: 10px

opacity: 0.8}

.gg{width: 400px

height: 200px

border-radius: 45%

margin-top: -265px

z-index: 1

background: white

opacity: 0.1

margin-left: -45px}

.wz{z-index:0position:absolutetop:40pxcolor:#fffwidth:300px}

</style>

<div class="gaguang">

<div class="box"></div>

<div class="wz">这里是内容,这里是内容,</div>

<div class="gg"></div>

</div>