css进阶(背景颜色渐变、过渡)

更新时间:2023-07-20 08:58:59 阅读: 评论:0

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 复合样式。过渡时间/延迟时间,其他顺序任意写

本文发布于:2023-07-20 08:58:59,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/fan/90/183049.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:渐变   过渡   默认   曲线   背景   循环   半径
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图