正文
css圆弧移动的动画，css3画圆弧
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
CSS3动画怎么让一个小圆点绕着一个圆运动
原理就是，先定义一个元素 ，然后定义动画XYZ轴偏移。
body div div:after {
content: "";
position: absolute;
top: -5px;
box-shadow: 0 0 12px #fff;
left: 50%;
margin-left: -5px;
width: 5px;
height: 5px;
border-radius: 50%;
background-color: #fff;
-webkit-animation: particle_ 2s infinite linear;
animation: particle_ 2s infinite linear;
}
body div:nth-of-type(4) div, body div:nth-of-type(4) div:after {
-webkit-animation-delay: -1.5s;
animation-delay: -1.5s;
}
body div div {
width: 200px;
height: 200px;
position: relative;
-webkit-transform-style: preserve-3d;
-webkit-animation: trail_ 2s infinite linear;
transform-style: preserve-3d;
animation: trail_ 2s infinite linear;
}
实施步骤：
建立一个BOX
在BOX中制作一个元素。
CSS动画定义BOX旋转按照你的轨迹。
通过。
-webkit-transform:rotateY( 0deg ) rotateZ( 0deg ) rotateX( 0deg );
-moz-transform:rotateY( 0deg ) rotateZ( 0deg ) rotateX( 0deg );
-o-transform:rotateY( 0deg ) rotateZ( 0deg ) rotateX( 0deg );
transform:rotateY( 0deg ) rotateZ( 0deg ) rotateX( 0deg );
来定义旋转方向，0是不旋转。0-360度是一圈。
-webkit-transition:transform 1s;
transition:transform 1s;
这是设置动画时间。
一个BOX完成后，复制box，摆在统一中心点后，设置Z轴的数字。
相关问答
Q1: 怎么完全用CSS3使一个的元素做流畅的弧线运动？
可以做一个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。由于时间仓促我没有具体实验过，而且表达可能不太清楚，请原谅。
Q2: css3 动画 如何让元素走一条曲线（例如：4分之一圆）
可以x和y分开写动画，速度不一样，就形成曲率了
@keyframes anix {
0% {top: 0;}
100% {top: 200px;}
}
@keyframes aniy {
0% {left: 0;}
100% {left: 100px;}
}
css圆弧移动的动画的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于css3画圆弧、css圆弧移动的动画的信息别忘了在本站进行查找喔。
