黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程（十）

Others 2021-11-24 19:04:35 views: null

一、基础班学习路线

在这里插入图片描述

Web服务器

什么是服务器

在这里插入图片描述

申请免费空间以及网站上传

在这里插入图片描述

四、HTML5和CSS3提高

1.CSS3 2D转换

2D转换之移动 translate

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

让一个盒子水平垂直居中

在这里插入图片描述

2D转换之旋转 rotate

在这里插入图片描述

案例-三角形

在这里插入图片描述

设置转换中心点transform-origin

在这里插入图片描述

在这里插入图片描述

旋转案例

在这里插入图片描述

2D转换之缩放 scale

在这里插入图片描述

图片放大案例

在这里插入图片描述

案例-分页按钮

在这里插入图片描述

在这里插入图片描述

2D转换综合写法及顺序问题

在这里插入图片描述

2D转换小结

在这里插入图片描述

2.CSS3 动画

CSS3动画基本使用

在这里插入图片描述

动画比过渡更强大，不需要鼠标经过，自动播放

在这里插入图片描述

动画序列

在这里插入图片描述

CSS3 动画常见属性

在这里插入图片描述

在这里插入图片描述

CSS3 动画简写

在这里插入图片描述

大数据热点图案例

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

注意权重的问题

在这里插入图片描述

在这里插入图片描述

这里之所以用宽和高而不用scale，因为后者会把阴影一起放大，不好看
前面的.city用top和right，这里要覆盖他不能用bottom或则left

速度曲线之steps步长

在这里插入图片描述

打字机效果（一步打一个字）：注意字体大小和宽度关系（10个20px的字和200px宽的盒子）；分10步，每一步打一个字，steps(10)

案例-奔跑的熊大

在这里插入图片描述

在这里插入图片描述

跑过来的效果：

在这里插入图片描述

3.CSS3 3D转换

认识3D转换

在这里插入图片描述

3D移动 translate3d

在这里插入图片描述

透视perspective

在这里插入图片描述

3D旋转 rotateX

在这里插入图片描述

在这里插入图片描述

3D呈现 transform-style

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

案例-两面翻转盒子

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

案例-3D导航栏

在这里插入图片描述

案例-旋转木马

在这里插入图片描述

浏览器私有前缀

在这里插入图片描述

Guess you like

Origin blog.csdn.net/m0_51448653/article/details/121467832

Recommended

Ranking

go in memory leaks

django learning - Database Configuration - create a model

uni-app uses sqlite database

American technology tycoon exchanged his son's plasma to achieve "eternal youth"?

Development knowledge-mysql master-slave replication

app Login - remain logged && Login

20180413

数学建模学习笔记（三）拟合算法

Linux remote connection ssh prompts IT IS POSSIBLE THAT SOMEONE IS DOING SOMETHING NASTY to solve

Java Collections Framework source code analysis (5.2 - TreeMap, red-black tree insert)

Daily

More

2024-04-21(0)

2024-04-20(6)

2024-04-19(5)

2024-04-18(0)

2024-04-17(31)

2024-04-16(23)

2024-04-15(5)

2024-04-14(0)

2024-04-13(18)

2024-04-12(5)