10、css3渐变、转换（扭曲、平移、旋转）、过渡、分页、动画
渐变
渐变：两个或者多个颜色之间平稳过渡
渐变的属性名：background-image
渐变的分类：
线性渐变:
-
background-image:liner-gradient(颜色，颜色)向下/向上/向左/向右/对角 -
方向的使用方法：1、方位名字2、角度单位是deg
-
角度
<style>
background-image: linear-gradient(
to left,
hsl(0, 100%, 50%),
blue);
background-image: linear-gradient(
to right bottom,
hsl(0, 100%, 50%),
blue
);
style>
径向渐变:从圆心向四周发射
background-image:radial-gradient(颜色，颜色)- 从圆心向四周发射
circle表示圆以ellipse表示椭圆形。默认值是el1ipse
<style>
background-image: radial-gradient(
circle,
red 5%,
yellow 10%,
green 60%
);
style>
CSS3的转换transform
缩放拉伸 transform:scale(x,y)
transform:scale(x,y);宽高倍数，没有单位transform:scaleX();宽度的倍数transform:scaleY();高度的倍数
扭曲
skew(X,y)x水平方向，y垂直方向，正负是正反方向(以盒子的右下角为基准，向右和向下是正方向)skewX()x水平方向skewY()y垂直方向
平移
translate(x,y)x水平方向，y垂直方向，正负是正反方向（水平向右和垂直向下是正方向，水平向左和垂直向上是反方向）translateX()x水平方向translateY()y垂直方向translateZ()Z方向 正负是正反方向（正值是距离面部近，负值距离面部远）
旋转
添加3D透视度 perspective: 2000px;
设置为3D转换transform-style: preserve-3d;
- 设置旋转轴心（默认是盒子右下角 ）
transform-origin:right top;rotate单位是deg正数是顺时针，负数是逆时针rotate()单位是deg止数是顺时针，负数是逆时针rotateX()沿着X轴旋转 角度不加引号rotateY()沿着Y轴旋转
<style>
* {
margin: 0;
padding: 0;
}
.box {
position: relative;
border: 3px solid black;
left: 400px;
/* 添加3D透视度 */
perspective: 2000px;
/* 设置为3D转换 */
transform-style: preserve-3d;
}
.box>div {
position: absolute;
left: 10px;
top: 400px;
width: 400px;
height: 150px;
/* 文字居中 */
text-align: center;
line-height: 150px;
font-size: 30px;
}
.greenBox {
background-color: green;
transform: translateZ(200px);
}
.redBox {
background-color: red;
transform: translateZ(-200px);
}
.blueBox {
background-color: blue;
/* 旋转+平移(面对盒子) */
transform: rotateY(90deg) translateZ(-200px);
}
.yellownBox {
background-color: yellow;
transform: rotateY(90deg) translateZ(200px);
}
style>
<body>
<div class="box">
<div class="greenBox">我是前面盒子div>
<div class="redBox">我是后面盒子div>
<div class="blueBox">我是左面盒子div>
<div class="yellownBox">我是右面盒子div>
div>
body>
过渡transition
元素从一种形态逐渐变成另一种形态的过程
过渡的两大条件 与hover一起用
- 过渡的
css属性 - 过渡的时间周期
过渡的css属性名 transition
<style>
/*过渡的CSS属性*/
transition-property:height;
/*过渡的时间周期 秒s 毫秒ms*/
transition-duration:3s;
/*过渡的时间速度曲线*/
/*默认是ease 先快后慢 linear匀速 */
transition-timing-functoin:linear;
/*过渡的延迟*/
transition-delay:4s;
/*综合设置 css属性 周期 速度曲线 延迟;*/
transition:width 4s lineaar 1s,height 3s;
/*所有的都是5s*/
transition:all 5s;
style>
分页
<style>
ul {
/*去掉默认小点*/
list-style: none;
/* 浮动以后ul没有高度 li不占位置 所以清除浮动带来的影响 */
overflow: hidden;
}
ul>li {
float: left;
background-color: #aaa;
margin: 0 10px;
padding: 10px 15px;
border-radius: 15px;
}
ul a {
color: aqua;
font-size: 20px;
/*去掉下划线*/
text-decoration: none;
}
ul>li:nth-child(3):active {
background-color: orange;
}
style>
<body>
<ul>
<li>
<a href="#"><a>
li>
<li><a href="#">1a>li>
<li><a href="#">2a>li>
<li><a href="#">3a>li>
<li><a href="#">4a>li>
<li><a href="#">5a>li>
<li><a href="#">6a>li>
<li><a href="#">7a>li>
<li><a href="#">8a>li>
<li><a href="#">9a>li>
<li><a href="#">>a>li>
ul>
body>
动画
设置动画属性
设置动画属性：
- 动画的名称
animation-name: firstAnimate; - 动画的时间周期
animation-duration: 8s; - 动画的时间速度曲线
animation-timing-function: linear; - 动画的延迟
animation-delay: 1s; - 动画的次数
animation-iteration-count: 2; - 动画的暂停
animation-play-state: paused;
创建动画
@keyframs 动画名称{ }
<style>