admin 管理员组文章数量: 1184232
CSS 2D与动画
1.2D转换
1.translate
2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位
1.语法
transform：translate（x,y）;
transform:translateX(n)
transform:translateY(n)
3.重点
- 定义2D转换中的移动，沿着X和Y轴移动元素
- translate最大的优点：不会影响其他元素的位置
- translate中的百分比单位是相对于自身元素的translate:(50%,50%);
- 对行内标签没有效果
2.rotate
2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。
1.语法
transform：rotate（度树）
2.重点
- rotate里面跟度树，单位是deg 比如 rotate（45deg）
- 角度为正时，顺时针，负数，为逆时针
- 默认旋转的中心点是元素的中心点
3.转换中心带你transform-origin
1.语法
transform-origin：x y;
2.重点
- 注意后面的参数x和y用空格隔开
- x y默认转换的中心点是元素的中心点（50% 50%）
- 还可以给x y设置像素 或者 方位名词（top…）
伪元素属于行内元素
4. 缩放scale
1.语法
transform:scale(x,y);
2.注意：
- 注意其中的x和y用逗号分隔
- transform：scale(1,1):宽和高都放大一倍，相对于没有放大
- transform：scale（2.2）：宽和高都放大了2倍
- transform：scale（2）：只写一个参数，第二个参数则和第一个参数一样，相当于scale（2，2）
- transform：scale(0.5,0.5):缩小
- scale缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子
5. 2D转换综合写法
注意：
- 同时使用多个转换，其格式为：transform:translate()rotate()scale()…等
- 其顺序会影响转换的效果。（先旋转会改变坐标轴方向）
- 当我们同时有位移和其他属性的时候，记得要将位移放到最前
6.转换总结
转换transform我们简单理解就是变形有2D和3D之分
我们暂且学了三个分别是位移旋转和缩放
2D移动translate(x, y)最大的优势是不影响其他盒子，里面参数用%，是相对于自身宽度和高度来计算的
可以分开写比如translateX(x)和translateY(y)
2D旋转rotate(度数)可以实现旋转元素度数的单位是deg
2D缩放sacle(xy)里面参数是数字不跟单位可以是小数最大的优势不影响其他盒子设置转换中心点transform-origin : x y;参数可以百分比、像素或者是方位名词
当我们进行综合写法，同时有位移和其他属性的时候，记得要将位移放到最前
2.动画
制作动画分为两步：
- 先定义动画
- 再使用（调用）动画
1.用keyframes定义动画（类似定义类选择器）
@keyframes动画名称 {
0%{
width：100px;
}
100%{
width:200px
}
}
动画序列
- 0%是动画的开始，100%是动画的完成。这样的规则就是动画序列
- 在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐为新样式的动画效果
- 动画是使元素从一种样式逐渐变化为另一种样式的效果，您可以改变任意多的样式任意多的次数。
- 请用百分比来规定变化发生的时间，或用关键词"form"和"to"，等同于0%和100%
2.元素使用动画
div{
调用动画
animation-name: 动画名称；
持续时间
animation-duration:持续时间；
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Yx7VOsHE-1636437194520)(C:\Users\86166\AppData\Roaming\Typora\typora-user-images\image-20211007173214716.png)]
3.动画简写属性
animation：动画名称 持续时间 运动时间 何时开始 播放次数 是否反方向 动画起始或者结束的状态；
animation:myfirst 5s linear 2s infinite alternate;
- 简写属性里面不包含animation-play-state
- 暂停动画：animation-play-state:puased;经常和鼠标经过等其他配合使用
- 想要动画走回来，而不是直接跳回来：animation-direction :alternate
- 盒子动画结束后，停在结束位置：animation-fill-mode：forwards
3.速度曲线细节
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BCcbtsF7-1636437194522)(C:\Users\86166\AppData\Roaming\Typora\typora-user-images\image-20211007213959382.png)]
3D 转换
透视 perspective
在2D平面产生近大远小视觉立体，但是只是效果二维的
- 如果想要在网页产生3D效果需要透视（理解成3D物体投影在2D平面内）
- 模拟人类的视觉位置，可认为安排一只眼睛去看
- 透视我们也成为视距：视距就是人的眼睛到屏幕的距离
- 距离视觉点越近的在电脑平面成像越大，越远成像越小
- 透视的像素是像素
透视写在被观察元素的父盒子上面的
d：就是视距，视距就是一个距离人的眼睛到屏幕的距离
z：就是z轴，物体距离屏幕的距离，z轴越大（正值）我们看到的物体就越大
本文标签： CSS 2D与动画
版权声明：本文标题：CSS 2D与动画 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.roclinux.cn/p/1698027664a283402.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论