嵌套组件hover视差动效landingpage制作

教程内容:

通过制作嵌套组件的hover状态呈现交互效果

跟着下面的步骤一步一步制作吧!


1.整体预览


这个案例只需要制作一个画板即可

877CA0BE-8A1D-4EEE-B5B1-C24EC53224B7.png


2.制作素材


给画板整体填充黑色

D1A88E91-E09D-41CB-97FC-B66D1B506C99.png

绘制5个等距的矩形

D56B7641-1B49-44E0-AF63-65755F0A7D05.png

将素材图片直接拖入矩形

E66446C7-9823-4A1E-9625-0A18C9633822.png

得到下图的效果,选中5个图片组制作组件,添加为默认状态

551C5EC0-2087-4265-808F-96CCF39ABA78.png

添加一个状态1

910B2C66-57E2-4061-BC74-381208346DC4.png

修改第1个图片的宽度,缩短后四个宽度

80C3EF89-1D93-4185-AF11-669641A54837.png

并修改后四个图片的透明度为30%左右

B267DBC5-D3D9-46B2-8C9F-CAD04B692B11.png

以同样的方法制作剩余的4个状态


3.制作交互


切换到组件的默认状态给每个图片组添加交互

D18F437A-92FF-4269-9DCA-2C5EDBBDC57B.png

添加悬停对齐自动动画,目标分别填写为组件的5个状态

A1EEDD69-36BE-4AD1-920B-E33FAEC9459D.png

制作完成

点击前往查看→查看视频教程获取源文件

标记狮私有云部署
一键部署标记狮至私有服务器,构建快速,安全,高效,私密的UI设计团队云协作