web前端开发第一阶段——background/关键帧

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{/*原位置*/
	
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

资本理念

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值