名称teration-count次数
认识translate
方法特别多，本文主要用2个。
translate3d(x,y,z)定义 3D 缩放转换。rotate3d(x,z,angle) 定义 3D 旋转。
translate3d(1,1,0)
你可以理解为（左右，上下，大小）变化。
rotate3d(1,45deg)
实现
1.两朵云除了大小和初始位置不通，其他都相同。
rush:css;">
.cloud {
position: absolute;
z-index: 3;
width:99px;height:64px; top: 0;
right: 0;
b
ottom: 0;
animation: cloud 5s linear infinite;
}
@keyframes cloud {
from {
transform: translate3d(-125rpx,0);
}
to {
transform: translate3d(180rpx,0);
}
}
其中rpx是微信特有的属性，不受屏幕大小的影响，类似于安卓里的dp单位。keyframes是匀速移动，从css里可以看到只改变了左右方向。
2.头像本来想加个吊篮，像荡秋千一样的荡漾，但是没有成功，只是随便搞了个飘来飘去的动画。
代码如下
rush:css;">
@keyframes pic {
0% {
transform: translate3d(0,20rpx,0) rotate(-15deg);
}
15% {
transform: translate3d(0,0rpx,0) rotate(25deg);
}
36% {
transform: translate3d(0,-20rpx,0) rotate(-20deg);
}
50% {
transform: translate3d(0,-10rpx,0) rotate(15deg);
}
68% {
transform: translate3d(0,10rpx,0) rotate(-25deg);
}
85% {
transform: translate3d(0,15rpx,0) rotate(15deg);
}
100% {
transform: translate3d(0,0) rotate(-15deg);
}
}
没想到keyframes不仅有支持from to还支持百分比，不错。这里，只要控制好层级关系、动画时长、透明度即可实现云层漂浮。
总结
不得不说css还是有很多动画的，也有很多特效，微信小程序里加一点动画，能使页面稍微美观点。当然，复杂点的动画，只能有机会再更新。
好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对编程之家的支持。
原文地址：https://www.jb51.cc/weapp/39500.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
