background-color:red;背景颜色
background-image:url(图片路径);
background-repeat:no-repeat;不平铺
background-position
background-size:150px 23px;宽 高
百分比
cover等于100%
background-origin:设置背景的位置
值:content-box 从内容开始
border-box 从边框开始
padding-box 从内边距开始
1、线性渐变
background:-webkit-linear-gradient(top/left/right/bottom/45deg,yellow 20px,green 30px red 60px);颜色渐变开始方位/角度;颜色类别,可以加多组 颜色+颜色宽度
注意,颜色宽度一样可能会重叠
background:-webkit-repeating-linear-gradient;线性渐变重复
结合rgba()设置透明
2、径向渐变
background: -webkit-repeating-radial-gradient(yellow 20px,red 40px,rgba(50,230,44,0.6) 60px);/* 径向中心渐变+透明 */
动画n多个transition构成
@keyframes move(自定义名称){
0%时间:10s{/*原位置*/
top:1px;
opacity:1;
}
25%{/*移动后位置*/
top:3px;
opacity:0.3;
}
}
animation:40s move;
在哪里,那个标签动
animation-name:move动画名;
animation-iteration-count:帧运动的次数
infinite无限次
animation-delay:延迟时间
animation-duration:帧运动花费的时间
animation-timing-function:运动变化速度
linear:匀速
animation-direction:运动方向(第二次运动从结束位置开始运动)alternate;回放
animation-fil-mode:backwards;动画结束还原 停留在开始位置
forwards:结束不还原
animation-play-state:paused;播放暂停
动画要动必需要时间
animation:move 5s 1s 2 linear forwords;名字 运动时间 延迟时间 次数 速度 动画结束位置 回放运动
@keyframe box{
to{
}
form{
}
}