css进阶(背景颜⾊渐变、过渡)
css进阶
背景颜⾊径向渐变
径向渐变:中间部分椭圆形,四周填充(由中间到四周渐变)
水浒传英文
background:radial-gradient(red,yellow);红椭圆填充黄⾊
私房蛋糕培训
考研英语作文background:radial-gradient(circle,red,yellow);红正圆填充黄⾊
background:radial-gradient(red 60%,yellow 60%);红60%,之后黄⾊
jannabackground:radial-gradient(50px 50px,red 50px,black 100px);圆的垂直半径,⽔平半径设置
background:radial-gradient(at left top,red 50%,black 50%); at设置圆⼼位置,来达到控制⽅向
background:repeating-radial-gradient(red 20px,green 50px);圈圈套圈圈,循环
背景颜⾊线性渐变
默认由上到下渐变(可设置渐变⽅向)
background:linear-gradient(red,yellow);颜⾊由红变黄
background:linear-gradient(red 60%,yellow 60%);红⾊占60%,然后开始渐变红到黄。online dictionary
thunder
然后黄⾊从60%开始,就会形成分割线
background:linear-gradient(to right,red,yellow);到右,从左到右
background:linear-gradient(to left,red,yellow);到左,从右到左motherwort
background:linear-gradient(to right bottom,red,yellow);到右下
background:linear-gradient(60deg,red,yellow);旋转60度
background:repeating-linear-gradient(black 0 , black 10px , transparent 10px ,
transparent 20px) repeating-linear-gradient规定颜⾊范围,⽅便循环
386是什么意思过渡
project c1. transition-duration 过渡持续时间(duration:持续时间)
2. transition-property 需要执⾏过渡的样式(默认all:都改变。width:只改变宽,height:只改变⾼)
上海师范大学天华3. transition-delay 过渡延迟时间(delay:延迟)
4. transition-timing-function 过渡速度快慢曲线(默认:慢快慢,linear:匀速)
更多曲线查看贝塞尔曲线
5. transition 复合样式。过渡时间/延迟时间,其他顺序任意写