CSS3自己做的demo的一些重要的代码

转换： transform： 后面接要改变的参数

1. rotate（360deg） 旋转的角度 也允许角度为负数

2.scale（0.5）缩放的比例

3.skew（45deg）倾斜的角度

4.translate（300px）移动的距离

可以将这几个参数一起使用 就是transform： 后面接参数 不加逗号

3D旋转：3D旋转就是将rotate后面再加上一个大写的XYZ 然后就会让这个物体沿着一个轴旋转

示范： transform : rotateX ( 360 deg ) ; transition : all 3 s ;

transform-origin : left bottom ; 这个用来改变旋转的原点

案例

动态进度条： background-position : 0 0 这个是图片的位置 然后图片的位置变成0 40px 动画为 animation : move 0.5 s infinite linear ;

跳动的心： 主要运用到了图形旋转 动画 定位方面的知识 animation : move 0.7 s infinite ;这个是他的动画 scale是比例 成比例就可以制作出

钟表：第一步设计好他的钟和表 钟用边框来做 时间用横线然后中心加上一个透明的○，逻辑问题就是动画了 还有一些布局问题我们也要掌握 margin的理解 怎么居中 animation : rotate 43200 s steps ( 60 ) infinite ; 这个steps 是跳动多少下

transform-origin : top center 这里是定义这个摆动的源点 的中心

web字体：

自己学习怎么下载怎么使用web字体

媒体查询： @media screen and ( max-width : 600 px ) { 这个是代码