web前端开发第一阶段——background/关键帧_background webm文件-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43151638/article/details/102779872

本文详细探讨了web前端开发中的背景属性，包括背景颜色、渐变、重复和位置设置。此外，还讲解了如何使用关键帧实现动画效果，并介绍了背景属性的复合写法，帮助开发者更高效地控制页面视觉呈现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

background背景

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{
	}
}