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

最新推荐文章于 2021-11-18 14:30:28 发布

弹指一挥间_

最新推荐文章于 2021-11-18 14:30:28 发布

阅读量457

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS3 文章标签： CSS CSS3

本文链接：https://blog.youkuaiyun.com/tanziyihuijian_/article/details/80217507

4 篇文章

订阅专栏

本文介绍了CSS中的transform属性，包括旋转、缩放、倾斜和移动等操作，并详细讲解了3D旋转的应用。此外，还提供了动态进度条和跳动心形图标的具体实现案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

2.scale（0.5）缩放的比例

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

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

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

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

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

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

                                                           案例

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

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

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

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

web字体：

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

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