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

html-css017

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

1、单击插入---->形状---->圆角矩形。

2、在页面上单击并拖动鼠标，画出所需要的圆角矩形。

3、拖动如图所示的黄色标记，可以调整圆角的弧度。

4、在圆角矩形上单击鼠标右键，弹出快捷菜单，选择添加文字命令，就可以在圆角矩形中输入文字。

我说两种方法哈：

1、上层DIV和img标签都设置border-radius圆角

列：

css如下:

.div1{width:100pxheight:100pxborder:1px solid lightgrayborder-radius:5px}

.div1 img{width:100pxheight:100pxborder-radius:5px}

html如下：

<div class="div1">

<img src="img1.jpg">

</div>

2、img不设置，div设置border-radius圆角并且设置超出部分影藏

css如下：

.div1{width:100pxheight:100pxborder:1px solid lightgrayborder-radius:5pxoverflow:hidden}

html如下：

<div class="div1">

<img src="img1.jpg">

</div>

注意：img标签要设置大小哈，不然图像显示会超出DIV的边界的