css生疏知识1

最新推荐文章于 2023-04-15 22:52:22 发布

Mannero

最新推荐文章于 2023-04-15 22:52:22 发布

阅读量123

点赞数 1

文章标签：生疏知识

本文链接：https://blog.csdn.net/weixin_45100039/article/details/94121169

版权

背景颜色渐变

background:linear-gradient(red,blue); 从上到下的线性渐变(可以有多个颜色);

background: linear-gradient(to right,red,blue); to right 从左向右的线性渐变;

background:linear-gradient(to bottom right,red,blue); 从左上到右下的线性渐变;

background:linear-gradient(45deg ,red ,blue); 45度的线性渐变;

background: radial-gradient(red,yellow,green); 径向渐变(可以有多个颜色);

table表格的边框

border-collapse:collapse; 相邻边被合并

字距

letter-spacing:14px; 字距

文本域的拖拽

resize:none; 文本域禁止拖动

溢出容器的文字打点展示

white-space：nowrap; 文本强制不换行

overflow：hidden; 超出部分隐藏

text-overflow：ellipsis; 溢出部分文本打点展示

transition过渡属性

transition : 参与过渡的属性过渡的持续时间过渡的动画类型延迟过渡的时间;

transition: all 3s linear 3s; 所有属性匀速过渡3s ,延迟3秒执行

transition-property: all; 指定的属性（默认值为all 为所有属性）

transition-duration: 3s; 指定完成过渡的时间

transition-timing-function:linear ; 指定完成过渡的曲线（是匀速[linear]还是非匀速）

transition-delay: 3s; 指定延迟时间（延迟多久后开始执行）

transform转换属性

移动 translate

用法：transform: translate(45px) 或者 transform: translate(45px, 150px);

一个参数时：表示水平方向的移动距离；

两个参数时：第一个参数表示x轴方向的移动距离，第二个参数表示y轴方向的移动距离。

缩放 scale

用法：transform: scale(0.5) 或者 transform: scale(0.5, 2);

一个参数时：表示水平和垂直同时缩放该倍率;

两个参数时：第一个参数指定x轴方向的缩放倍率，第二个参数指定y轴方向的缩放倍率。

旋转 rotate

用法：transform: rotate(45deg);

一个参数:顺时针旋转45度。

倾斜 skew

用法：transform: skew(30deg) 或者 transform: skew(30deg, 30deg);

一个参数时：表示水平方向的倾斜角度；

两个参数时：第一个参数表示x轴方向的倾斜角度，第二个参数表示y轴方向的倾斜角度。

设置元素基准点

transform-origin: 50% 50% ; 设置元素基准点;

transform-origin: center center;

left=0%; center=50%; right=100%

top=0%; center=50%; bottom=100%;

动画 Animation

定义简单动画

@keyframes   name {
			from { opacity: 1; }
         to { opacity: 0; } 
}

定义复杂动画

@keyframes name{
	0% { transform: translate(0, 0); }
	20% { transform: translate(20px, 20px); }
	40% { transform: translate(40px, 0); }
	60% { transform: translate(60px, 20px); }
	80% { transform: translate(80px, 0); }
	100% { transform: translate(100px, 20px); }
}

animation：动画名称持续时间过渡类型延迟时间循环次数是否反向运动结束后的状态动画的状态 ;

动画名称 animation-name : name 名称

持续时间 animation-duration : 2s 时间

过渡类型 animation-timing-function : linear 线性匀速过渡

ease-in ; 由慢到快;

ease-out ; 由快到慢

延迟时间 animation-delay : 1s 时间

循环次数 animation-iteration-count : 1 次数

infinite 无限循环

是否反向运动 animation-direction : normal ; 正常方向

reverse ; 反方向运行

reverse：反方向运行;