CSS3的属性下

蓝搜香菇

于 2023-10-05 15:24:35 发布

阅读量53

点赞数

文章标签： css3 前端 css

本文链接：https://blog.csdn.net/daiism/article/details/133579171

版权

2d转换

可对元素移动、缩放、转动、拉长

<style>
      .box{
          width:"100px";
          height:"100px";
          transform: translate(10px,20px);
       }
</style>
<body>
   <div class="box"></div>
</body>

常用值

translate(x,y)
也可单独设置，如translateX() ， translateY()。也可以设置负数，负数为方法向。移动
rotate()
顺时针旋转，可设负值，负值逆向转
可单独设置，rotateX() ， rotateY()
scale(宽度,高度)
该元素增加或减少的大小，取决于宽，高的参数。缩放
scaleX()放大宽，scaleY()放大高。设负数为镜像方式
skew(Xdeg,Ydeg)
分别为xX和Y轴的倾斜角度，可以为负数
skew(水平倾斜，垂直倾斜)，skewX() , skewY()

不常用值

matrix()复合属性
有六个属性，包含旋转，缩放，平移和倾斜等功能
transform:matrix(X缩放,Y倾斜,X倾斜,Y缩放,X平移,Y平移);
transform-origin(x,y)
设置旋转中心点
transform-originX() ，transform-originY()

3d转换

特点：进大远小。 和2d的值是一样的
transform: translate3d(x, y, z)

rotate3d(x, y, z, deg)
x,y,z三个值旋转的角度
transform: rotate3d(x, y, z, deg)

透视perspective

transform-style:preserve-3d;给父级设置

过渡

简写属性，用于在一个属性中设置四个过渡属性。
transition: css名称|all （第一个若没设置就为all）过渡时间(必须设置) 运动曲线开始时间（延时器）

运动曲线
linear	匀速
ease	慢速开始，中间快，慢速结尾
ease-in	以慢速开始
ease-out	以慢速结束
ease-in-out	以慢速开始，慢速结束

全称

css名称|all：transition-property
过渡时间: transition-duration
运动曲线 : transition-timing-function
开始时间: transition-delay

动画

创建规则

<style>
	@keyframes move{
				0% {
					width: 200px;
					background-color: pink;
				}
				25% {
					background-color: aqua;
					height: 500px;
					width: 500px;
				}
				50% {
					background-color: orange;
					height: 500px;
					width: 500px;
				}
				100% {
					background-color: green;
					height: 500px;
					width: 500px;
				}
			}
</style>

animation

animation-name 名称定义动画
animation-duration 过渡时间定义运动
animation-timing-function 运动曲线

值
linear	匀速
ease	慢速开始，中间快，慢速结尾
ease-in	以慢速开始
ease-out	以慢速结束
ease-in-out	以慢速开始，慢速结束

animation-delay 开始时间
animation-iteration-count：infinite； 播放次数：无限次播放；
animation-direction 是否反向播放

值
normal	默认值，动画正常播放
reverse	动画反向播放
alternate	动画在奇数（1、3、5…）正向播放，在偶数（2、4、6…）反向播放
alternate-reverse	动画在奇数（1、3、5…）反向播放，在偶数（2、4、6…）正向播放

animation-fill-mode 是否运用结束样式

值
none	默认值。动画在执行前后不会应用任何样式到目标元素
forwards	在动画结束后（由播放次数决定），动画将应用该属性值
backwards	动画应用在 animation-delay 定义期间启动第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 “normal” 或 “alternate” 时）或 to 关键帧中的值（当 animation-direction 为 “reverse” 或 “alternate-reverse” 时）
both	动画遵循 forwards 和 backwards 的规则。动画会在两个方向上扩展动画属性