这篇文章主要为大家展示了微信小程序中CSS如何实现动画云层漂浮,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带大家一起来研究并学习一下“微信小程序中CSS如何实现动画云层漂浮”这篇文章吧。
CSS是一种用来表现HTML或XML等文件样式的计算机语言,主要是用来设计网页的样式,使网页更加美化。它也是一种定义样式结构如字体,颜色,位置等的语言,并且CSS样式可以直接存储于HTML网页或者单独的样式单文件中,而样式规则的优先级由CSS根据这个层次结构决定,从而实现级联效果,发展至今,CSS不仅能装饰网页,也可以配合各种脚本对于网页进行格式化。
上效果图(GI动态图)
微信小程序动画
当我看到这张背景图的时候,强迫症立马来了,这云朵为什么不动,于是开始了一波折腾。
知识点
认识动画
动画属性是一个简写属性,用于设置六个动画属性:
值,,描述
animation-name,,规定需要绑定到选择器的关键帧名称。
动画,,规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function,,规定动画的速度曲线。
animation-delay,,规定在动画开始之前的延迟。
animation-iteration-count,,规定动画应该播放的次数。
动画方向,,规定是否应该轮流反向播放动画。
认识翻译
方法特别多,本文主要用2个。
translate3d (x, y, z)定义3 d缩放转换。
<李>rotate3d (x, y, z,角),,定义3 d旋转。
translate3d (1 1 0)
你可以理解为(左右,上,下大小)变化。
rotate3d(1 1 0、45度)
rotate3d
实现
1。两朵云除了大小和初始位置不通,其他都相同。
其中rpx是微信特有的属性,不受屏幕大小的影响,类似于安卓里的dp单位.keyframes是匀速移动,从css里可以看到只改变了左右方向。
2。头像本来想加个吊篮,像荡秋千一样的荡漾,但是没有成功,只是随便搞了个飘来飘去的动画。
@keyframes pic {
0%的才能,{
,,,变换:,translate3d (20 rpx 0,,,, 0),旋转(-15度);
,,}
15%的才能,{
,,,变换:,translate3d (rpx 0, 0, 0),旋转(25度);
,,}
36%的才能,{
,,,变换:,translate3d (0, -20 rpx, 0),旋转(-20度);
,,}
50%的才能,{
,,,变换:,translate3d (0, -10 rpx, 0),旋转(15度);
,,}
68%的才能,{
,,,变换:,translate3d (0, 10 rpx, 0),旋转(-25度);
,,}
85%的才能,{
,,,变换:,translate3d (0,, 15 rpx, 0),旋转(15度);
,,}
100%的才能,{
,,,变换:,translate3d (20 rpx 0,,,, 0),旋转(-15度);
,,}
}
没想到关键帧不仅有支持从还支持百分比,不错。这里,只要控制好层级关系,动画时长,透明度即可实现云层漂浮。
以上就是关于“微信小程序中CSS如何实现动画云层漂浮”的内容,如果改文章对你有所帮助并觉得写得不错,劳请分享给你的好友一起学习新知识,若想了解更多相关知识内容,请多多关注行业资讯频道。
