背景颜色渐变
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: 反方向运行;
alternate: 动画先正常运行再反方向运行,并持续交替运行;
alternate-reverse: 动画先反运行再正方向运行,并持续交替运行;
结束后的状态 animation-fill-mode : forwards ; 设置对象状态为动画结束时的状态
backwards ; 设置对象状态为动画开始时的状态
动画的状态 animation-play-state : running ; 运动
paused ; 暂停