css渐变
-
线性渐变（linear-gradient）：
语法 不加前缀的线性渐变 background：linear-gradien(to 方向 ，颜色1， 颜色2，。。。)
加前缀的线性渐变 注意省略to 方向相反 方向也可以使用角度 -
重复线性渐变
语法 background：repeating-linear-gradient（方向，颜色1 百分比，颜色2 百分比，颜色3，百分比。。） -
径向渐变
语法 background：radial-gradient（方向 默认center，shape 默认 ellipse，颜色1，颜色2 .。。。）
注意 要添加前缀 -
重复径向渐变
background：repeating-radial-gradient（方向，形状，color 百分比，color 百分比。。。）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding: 0; } div{ width: 300px; height: 300px; } /* 线性渐变之不加前缀 */ .box1{ background: linear-gradient(to right top ,pink,#00f,#0f0); } /* 线性渐变之加前缀(省略to 方向相反 使用角度 使用 90deg - 不加前缀时候的角度) */ .box2{ background: -webkit-linear-gradient(60deg,#0f0,#00f,#f00); } /* 径向渐变 前缀 */ .box3{ background:-webkit-radial-gradient(center,circle,#0f0,#00f,#f00) } .box4{ background: -moz-radial-gradient(100px 100px ,#f00,#0f0,#00f); } /* 重复的线性渐变 如果加前缀和线性渐变一样需要去掉to */ .box5{ background: repeating-linear-gradient(to left top ,pink ,#00f 10%,#f00 20%); } /* 重复的径向渐变 */ .box6{ background: -webkit-repeating-radial-gradient(50px 100px ,pink,#f00 10%,#00f 20%); }
</style></head><body> <div class="box1">
</div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> <div class="box5"></div> <div class="box6"></div></body></html>
多列分栏column
-
column-width 分栏的宽度
-
column-count 分栏的数量
两者尽量不要一起使用 -
column-span 分栏合并
-
column-gap 分栏的间隙
-
column-rule 分栏分割线的样式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ width: 500px; height: 300px; background: pink; column-count: 3; column-gap: normal; column-rule: 1px dotted #000; } h2{ column-span: all; } </style></head><body> <div> <h2> “好声音”五强争夺战收视夺冠，本周迎来巅峰之夜 </h2> 今年，《2020中国好声音》陪伴观众从夏天走到冬天，自开播以来的收视和话题热度也一直持续攀升。在广视索福瑞发布的数据中，《2020中国好声音》凭借2.847%的收视率名列周五晚间卫视综艺收视第一名。上周，《2020中国好声音》正式进入半决赛，七名学员一同争夺五强名额，谢霆锋战队傅欣瑶、贾翼腾遗憾离开好声音舞台。李宇春战队学员潘虹;谢霆锋战队曹杨;李荣浩战队斑马森林;李健战队单依纯、宋宇宁成功晋级“全国五强”进入总决赛。 </div></body></html>用户界面属性
resize 属性规定是否可由用户调整元素的尺寸
注释：如果希望此属性生效，需要设置元素的overflow属性，值可以是auto，hidden和scroll
可以选择的值
none 用户无法调整元素的尺寸（areatext）一般重置样式的时候使用
both 用户可以调整元素的宽度和高度
horizontal 用户可以调整元素的宽度
vertical 用户可以调整元素的高度
box-sizing属性
可以选择的值 content-box和border-box
content-box：宽和高分别应用到元素的内容框 ，即在宽度和高度之外绘制元素的内边距和边框
border-box：为元素设定的宽度和高度决定了元素的边框盒。也就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行设置
动画的过渡效果
transition：可以选择的属性 运动时间 延迟时间 运动速度曲线
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ width: 300px; height: 100px; background: pink; opacity: 1; transition: all 1s 0.5s linear; } .box:hover{ width: 100px; height: 300px; background: #f00; opacity: 0.3; }
</style></head><body> <div class="box">
</div></body></html>动画的2D效果
- translate位移
transform：translateX() translateY();
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width: 300px; height: 200px; background: pink; } .box1{ width: 50px; height: 50px; background: #f00; transition: 1s; background: linear-gradient(to top,#f00,#00f ); } .box1:hover{ transform: translateX(250px) translateY(150px);
} </style></head><body> <div class="box"> <div class="box1"></div> </div> </body></html>
- scale缩放
默认情况下为1 >1进行放大 <1缩小
transform：scaleX() scaleY();
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ width: 300px; height: 300px; background: pink; transition: 1s; } div:hover{ transform: scale(2,.5); } </style></head><body> <div>
</div></body></html>- rotate旋转
transform：rotateX(角度deg) rotateY() rotateZ();
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding: 0; } div{ width: 300px; height: 300px; background: pink; transition: 1s; } div:hover{ transform: rotateX(45deg) rotateZ(360deg); } </style></head><body> <div>
</div></body></html>- skew斜切
transform：skewX skewY()
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding: 0;
} div{ width: 300px; height: 300px; background: pink; transition: 1s; } div:hover{ /* transform: skew(30deg,45deg); */ transform: skewY(45deg) ; }
</style></head><body> <div>
</div></body></html>- 定义变形的原点
transform-origin：x y ;
参数为一个值的时候，另一个默认为center；他们可以设置百分比 ，em，px等具体值；也可以设置left top bottom right 等方向关键字。
动画的3D效果
-
transform-style：perserve-3d 指定嵌套子元素如何在三维空间进行呈现 父元素有变形属性子元素也有变形属性，父元素搭建一个3D舞台，子元素就会在三维空间内进行呈现，尤其是旋转属性特别明显。
注：若同时设置了transform-style ：perserve-3d和overflow:hidden.3D效果将会失效，等价于 transform-style：flat； -
景深 perspective 值为600px—1200px
-
translate3d效果
正值向前走，负值往里走。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ width: 220px; height: 165px; border: 6px solid #000; margin-left: 100px; /* margin-top: 100px; */ /* float: left; */ perspective: 600px; } img{ transition: 1s; } div:nth-child(1):hover img{ transform: translate3d(0,0,150px); position: absolute; } div:nth-child(2):hover img{ transform: translateZ(-150px); } </style></head><body> <div> <img src="./images/cts-1-1.jpg" alt=""> </div> <div> <img src="./images/cts-1-1.jpg" alt=""> </div></body></html>- rotate3d效果
rotateX() 正值 向后躺 上进下出 负值 向前趴 下进上出
rotateY() 推门的效果 正值 左出右进 负值 右出左进
rotateZ() 打方向盘的效果 正值 顺时针 负值 逆时针
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding: 0; } div{ width: 220px; height: 165px; border: 2px solid #f00; float: left; } img{ display: block; transition: 1s; } div:nth-child(1):hover img{ transform: rotateX(45deg); } div:nth-child(2):hover img{ transform: rotateX(-45deg); } div:nth-child(3):hover img{ transform: rotateY(90deg); } div:nth-child(4):hover img{ transform: rotateY(-90deg); } div:nth-child(5):hover img{ transform: rotateZ(45deg); } div:nth-child(6):hover img{ transform: rotateZ(-45deg); } div:nth-child(7):hover img{ transform: rotate3d(1,0.2,0,45deg); } </style></head><body> <div> <img src="./images/cts-1-1.jpg" alt=""> </div> <div> <img src="./images/cts-1-1.jpg" alt=""> </div> <div> <img src="./images/cts-1-1.jpg" alt=""> </div> <div> <img src="./images/cts-1-1.jpg" alt=""> </div> <div> <img src="./images/cts-1-1.jpg" alt=""> </div> <div> <img src="./images/cts-1-1.jpg" alt=""> </div> <div> <img src="./images/cts-1-1.jpg" alt=""> </div></body></html>- scale()3d缩放效果
一般配合另外两个一起使用 才有展示效果
3D案例之立方体效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .box{ width: 300px; height: 300px; position: relative; margin: 160px auto; text-align: center; transform-style: preserve-3d; transform: rotateX(45deg) rotateY(60deg) rotateZ(20deg); transition: 1s; } .box:hover{ transform: rotate3d(1,0,0,60deg); } .box>div{ position: absolute; top: 0; left: 0; color: #fff; font-size: 60px; width: 300px; line-height: 300px; } .box div:nth-child(1){ background: rgba(255,0,0,.5); transform: translateZ(150px); } .box div:nth-child(6){ background: rgba(0, 255, 0, .5); transform: translateZ(-150px) rotateY(180deg); } .box div:nth-child(2){ background: rgba(0,0,255,.5); transform:translateX(150px) rotateY(90deg); } .box div:nth-child(5){ background: rgba(255,0,255,.5); transform:translateX(-150px) rotateY(-90deg); } .box div:nth-child(3){ background: rgba(255, 180,0, .5); transform: translateY(150px) rotateX(-90deg); } .box div:nth-child(4){ background: rgba(0, 255, 255, .5); transform: translateY(-150px) rotateX(90deg); } </style></head><body> <div class="box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div></body></html>
1402
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
