入门移动端混合开发实战京东 APP - 网站源码_资源分享

下栽の地止:https://www.itwangzi.cn/2364.html

进阶终端端混和合作开发两栖作战天猫 APP

一.CSS2D切换，3D切换，3D转动

1.CSS2D切换

切换

（transform）是CSS3中的特点众所周知，能同时实现原素的偏转、转动、翻转等效用。

切换（transform）能单纯认知为形变

终端：translate

转动：rotate

翻转：scale

2D切换之终端translate

transform: translate(x, y);

/* 或者分开写 */

transform: translateX(x);

transform: translateY(y);

2D切换中心点transform-origin

中心点：left bottom right cente top

transform-origin: x y;

翻转：

transform: scale(1, 1);

动画 animation

@keyframes move{ 0%{ transform: translateX(0px); } 25%{ transform: translateX(1000px); } 50%{ transform: translate(1000px,500px); } 75%{ transform: translate(0,500px); } 100%{ transform: translate(0); } } div{ width: 50px; height: 50px; background-color: antiquewhite; animation-name: move; animation-duration: 7s; }

动画常见属性

/* animation: name duration timing-function delay iteration-count direction fill-mode; */ animation: move 2s linear 1s 5 alternate;

2.3D切换

3D终端 translate3d

3D终端在2D终端的基础上多加了一个能终端的方向，就是z轴方向

transform: translateX(100px)：仅仅是在X轴上终端

transform: translateY(100px)：仅仅是在Y轴上终端

transform: translateZ(100px)：仅仅是在Z轴上终端（注意：translateZ一般用px单位）

transform: translate3d(x,y,z)：其中x、y、z分别要终端的轴的方向的距离（x、y、z没有不可省略，写0）

透视

透视必须写在被观察父盒子里面

3.3D转动

tansform:rotateX(45deg)

tranform:rotateY(45deg)

tranform:rotateZ(45deg)

tranform:rotate3d(1,0,0,45deg)

tanform-style

同时实现3d翻转效用

1、backface-visibility：visible默认值，背面朝向用户时可见

2、backface-visibility：hidden背面朝向用户时不可见。

私有前缀

2.web终端端合作开发

2.终端端

1.终端端常见不布局方式

单独制作终端端页面 (主流)

流式布局 (百分比布局)

flex 弹性布局 (强烈推荐)

less + rem + 媒体查询布局

混和布局

响应式界面兼容终端端 (其次)

媒体查询

bootstrap

属性解释说明

width 宽度设置的是 viewport 宽度，能设置 device-width 特殊值

initial-scale 初始缩放比，大于0的数字

maximum-scale 最大翻转比，大于0的数字

minimum-scale 最小翻转比，大于0的数字user-scalable 用户是否能翻转，yes 或 no (1 或 0)

2.CSS3渐变

linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片

linear-gradient() 函数没有内在尺寸

div{ width: 500px; height: 500px; background-image: linear-gradient(red ,blue,green); }

2.文字渐变

先设置背景渐变

background: linear-gradient(90deg, #45CAFF,#1471FB);

设置 -webkit-background-clip: text; 意思就是以盒子内的文字作为裁剪区，文字以外的部分就会被剪掉

把文字设置为透明

p { font-size: 50px; background: linear-gradient(yellow, red, #1471FB); -webkit-background-clip: text; color: transparent; } </style></head><body> <div></div> <p>456789</p>