多背景、圆角、过渡、渐变、2D、旋转
一．多背景实现
注意:1.中间用【,】分割 2.设置3.no-repeat 分别设置位置
二．圆角
Border:xpx solid gray;
Outline:none;
Border-radius:左上 右上 右下 左下
如果值不够执行对角的值,如果对角也没有 则执行初始值
Border-radius:水平方向/垂直方向
三．让元素变为圆形:宽高必须相等
Border-radius:50%/宽度高度的一半
四．CSS3过渡
Transition:参与过渡的属性/all【可以不写】 过度持续的时间 延迟过渡时间【可以不写】默认为ease逐渐慢下来/linear匀速/ease-in加速/ease-out减速/ease-in-out先加速后减速/steps(动画执行的步数)
贝塞尔曲线：
属性值：cubic-bezier() 贝塞尔曲线网址：http://cubic-bezier.com/ 逐帧动画： steps(动画执行的步数);
多重过渡:transition:width 2s,bgc 3s 2s;
宽度在2s时间内变成600 背景颜色延迟2秒在3s内变成红色
总结:
1,过渡:由一种状态变化到另一状态时有一个逐渐变化的过程
实现:transition:变化属性【默认为all】 变化时间【必填项】 延迟时间【默认为0】 过度曲线【ease】
注意:1.配合:hover使用
2.Transition-property[参与过渡的属性]/ duration[参与过渡的时间]/-timing-function[动画类型]/delay[延迟过渡的时间]
五．渐变
线性渐变:Liner-gradient(两个及以上的颜色,颜色之间用逗号分割)
To left是从右往左发生渐变 to top从下往上 to bottom从上往下
Bgc:linear-gradient(to left/top/bottom/right,color)
Bgc:-webkit-line-gradient(top去掉to)
兼容的写法:在属性前面加浏览器内核的前缀,加完之后需要注意,方向不能再写to方位,而是应该直接写方位【但是兼容的f方位跟to后面的方位相反】
径向渐变:radial-gradient(形状,颜色,颜色)
基本结构:radial-gradient(两种及以上颜色)
- 1. 调节渐变的中心点-webkit-radial-gradient(方位/百分比,颜色)
- 2. 调节渐变的大小:
Radial-gradient(百分比,颜色)
- 3. 渐变结束的位置
最远边,最近边,最近角,最远角
2D
Transform:translate(值)默认为水平方向
Transform:translateX()水平方向
Transform:translateY()垂直方向
Transform:trabslate(xx,xx)两个值一个水平一个垂直
Scale():根据中心原点对象进行缩放。Transform:scale()默认为1B表示双向的变化 增强与观众的互动
transform:scaleX（）水平方向 transform:scaleY()垂直方向
transform:scale(1,2)第一个表示X第2个表示Y
总结:
transform:2d转化
位移:translate(1/2)[跟一个值的时候表示x轴上的移动
跟两个值时，第一个是X值，第二个是Y值]
translateX() translateY()
缩放【放大缩小】scale(1/2)[跟一个值的时候为x和y双向的变化，第一个代表水平，第二个代表垂直]
scaleX() scaleY()
五．旋转
Transform:rotate(30deg)
Trsnsform:rotateX()/rotateY（）
改变中心的位置
Transform-origin:left top
倾斜:transform:skew(0deg)
