【二、移动web网页开发】2D&3D转换与动画、移动端布局、响应式布局

最新推荐文章于 2023-05-21 20:35:43 发布

原创

最新推荐文章于 2023-05-21 20:35:43 发布 · 459 阅读

·

0

·

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

文章标签：

#前端 #html #css

本文详细讲解了移动Web开发中的2D和3D转换，包括位移、旋转、缩放、渐变等，并通过案例展示了如何实现双开门、走马灯等动画效果。同时，介绍了移动端的基础知识，如分辨率、视口、二倍图，以及Flex布局和响应式布局，涵盖了媒体查询、Bootstrap等内容。

2D&3D转换与动画

1.字体图标

2022年6月29日21:48:05

简介

在这里插入图片描述

下载

在这里插入图片描述
选择需要的图表添加到购物车=》添加至项目=》下载到本地。

使用字体图标

在这里插入图片描述

svg上传

在这里插入图片描述

2.2D转换-位移

平面转换的概念

在这里插入图片描述

位移transform：translate

在这里插入图片描述

定位盒子居中

【使用translate快速实现绝对定位的元素居中效果】
之前的写法：
在这里插入图片描述
使用平面转换的位移写法：

案例-双开门

在这里插入图片描述

3.2D转换-旋转+缩放

旋转transform：rotate

在这里插入图片描述

转换原点transform-origin

在这里插入图片描述

多重转换

多重转换技巧：transform：translate（） rotate（）；
在这里插入图片描述

缩放transform：scale

在这里插入图片描述

案例-缩放

在这里插入图片描述

【注意点-层叠性】

4.渐变linear-gradient

2022年6月30日15:19:54
在这里插入图片描述

案例-渐变

在这里插入图片描述

综合案例

在这里插入图片描述

.txt也可以相对于a进行定位。

最低0.47元/天解锁文章

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。