微信小程序登录页的漂浮效果是怎么做的

微信小程序登录页面的浮动效果如何？你的朋友有没有见过一些微信小程序的登陆页面显示浮动效果？怎么会这样？下面小系列给大家讲解一下。

会议翻译

方法有很多，本文主要使用其中两种。

平移3d(x，y，z)定义3d缩放变换。

旋转3d(x，y，z，角度)定义3d旋转。

平移3d(1，1，0)

你可以理解为(左右，上下，大小)变化。

旋转3d(1，1，0，45度)

实现

除了大小和初始位置不同，这两种云是一样的。

云{

位置：

z-index : 3；

宽度：99 px；height:64pxtop : 0；

right : 0；

bottom : 0；

animation: cloud 5s线性无限；

}

@关键帧云{

来自{

transform : translate 3d(-125 rpx，0，0)；

}

to {

transform : translate 3d(180 rpx，0，0)；

}

}

rpx是微信独有的属性，不受屏幕大小影响，类似于android中的dp单元。关键帧以恒定的速度移动，从css可以看出它只改变左右方向。

2.头像本来想加个吊篮，像秋千一样荡漾，没成功。这只是一个漂浮的动画。

代码如下

@关键帧pic {

0% {

transform: translate3d(0，20rpx，0)rotate(-15度)；

}

15% {

transform: translate3d(0，0rpx，0)rotate(25度)；

}

36% {

transform: translate3d(0，-20rpx，0)rotate(-20 deg)；

}

50% {

transform: translate3d(0，-10rpx，0)rotate(15度)；

}

68% {

transform: translate3d(0，10rpx，0)rotate(-25度)；

}

85% {

transform: translate3d(0，15rpx，0)rotate(15 deg)；

}

{

transform: translate3d(0，20rpx，0)rotate(-15度)；

}

}

没想到，关键帧不仅支持从到，还支持百分比，不错。这里只要控制好层次关系、动画时长、透明度，就可以实现云飘。

以上是小编编的微信小程序登录页面如何做浮动效果的内容。更多精彩内容，请关注源社网小节目频道。

这里是标题开头对微信小程序图标组件的描述，这里小程序图标的使用方法是标题结尾

很多人不知道微信小程序导航的图标是什么，其实是一种图标格式，用于系统图标，软件图标等等。下面小系列介绍微信小程序图标组件的描述和具体用法。

图标图标组件描述：

图标是一种图标格式，用于系统图标、软件图标等。这个图标的扩展名是。图标和。ico。常见软件或windows桌面上的图标一般都是图标格式。应用程序上方很多地方使用图标图标，方便程序表达程序返回的操作状态，用户一眼就能看到应用程序返回的含义，提高了用户体验。常见的图标图标是在小程序的组件中提供的。具体使用见下面介绍！

图标图标组件使用说明：

使用图标时，使用图标标签，然后有类型属性和大小属性。

具体属性参见比较后的属性总结，标签的使用参考下面的小程序代码。

示例代码运行如下：

以下是wxml代码：

[xml]纯文本视图复制代码

？

核标准情报中心

图标

成功

用于指示操作的成功完成

提示

用于指示信息提示；它还经常被用来无条件地拦截操作，提示用户输入所需信息

普通警告

用于表示手术后会造成一定后果的情况

强烈警告

用于表示手术后会造成严重不可挽回后果的情况

等待

用来表示等待

以下是wxss代码：

[css]以纯文本方式查看复制的代码

？

图标{

margin-right : 13px；

}。第__bd页{

padding-left : 40px；

padding-right : 40px；

text-align:左侧；

}。图标框{

margin-bottom : 25px；

display: flex

align-items : center；

}。icon-box__ctn{

flex-shrink : 100；

}。icon-box__title{

font-size : 20px；

}。图标盒__desc{

margin-top : 6px；

font-size : 12px；

color: # 888888

}。图标_sp_area {

margin-top : 10px；

text-align:左侧；

}

图标图标组件的主要属性：

属性类型默认值的描述

类型字符串图标，有效值：成功、成功_否_循环、信息、警告、等待、取消、、搜索、清除

尺寸以像素为单位的图标尺寸

颜色图标颜色，与css颜色相同

以上是关于微信小程序的图标图标的全部信息，文中也提到了图标组件的描述，有助于大家进一步了解微信小程序的图标图标。如果想获得更多相关信息，请关注源社网的小节目频道。