文字阴影text-shadow
text-shadow
后面的值有4个：
第一个：X轴，水平阴影位置 允许负值。
第二个：y轴，垂直阴影位置，允许负值。
第三个：blur， 模糊的距离
第四个：阴影的颜色
文字阴影代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 文字阴影 text-shadow:x y 距离(模糊) 颜色*/.p1{text-shadow:-5px -5px 1px red;}.p2{text-shadow:-5px -5px 15px red,10px -10px 15px rgb(245, 106, 7),20px -20px 15px rgba(245, 178, 7, 0.867);}</style></head><body><p class="p1">这是段落文字</p><p class="p2">这是段落文字</p><p class="p3">这是段落文字</p><p class="p4">这是段落文字</p></body></html>
盒子阴影box-shadow
属性值
第一个：X轴，水平阴影位置
第二个：y轴，垂直阴影位置
第三个：blur， 模糊的距离
第四个：spread 阴影的大小
第五个：color 阴影的颜色
第六个：inset 从外层的阴影转换为内部的阴影
注意：盒子阴影不影响盒子里面的内容
代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 700px;height: 500px;background-color: blue;margin: auto;}.box div{width: 200px;height: 400px;margin-top: 50px;margin-left: 25px;background-color: brown;float: left;}.box div:hover{box-shadow: 0px 5px 20px 10px black;transition: .5s;}</style></head><body><div class="box"><div></div><div></div><div></div></div></body></html>
过渡transition
transition-property：设置对象中的参与过渡的属性， 默认值为all
transition-duration：设置对象过渡的持续时间
transition-timing-function：设置对象中过渡的动画类型， linear 线性过渡 ， ease平滑过渡 ， steps() 步长
transition-delay：设置对象延迟过渡的时间
案例：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1,.box2,.box3,.box4{width: 100px;height: 100px;background-color: blue;margin-top: 20px;}.box1:hover{width: 1000px;transition-property: all;transition-duration: 2s;transition-timing-function: steps(5);}</style></head><body><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div></body></html>
2D转换transform
移动translate
transform-translate
translate(x,y)；沿着 X 和 Y 轴移动元素
translateX(n) ；沿着 X 轴移动元素。
translateY(n) ；沿着 Y 轴移动元素。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 800px;height: 500px;border: 1px solid red;margin: auto;overflow: hidden;}.box img{width: 800px;height: 500px;}.box span{display: block;width: 800px;height: 100px;background-color: rgba(255, 235, 205, 0.478);}.box:hover span{transition: all 2s linear;transform: translateY(-100px);}</style></head><body><div class="box"><img src="../img/1.webp" alt=""><span>简介:自然雪山风景图片大图，分享一组雪山雪景图片给大家,图中的桌面壁纸壁纸会点缀你的电脑桌面，美化自己的心灵！</span></div></body></html>
缩放scale
transform-scale(x,y)
scale()；对于元素进行缩放
scale(X,Y)； 默认x,y为1 缩放元素的宽和高。从中间向两边放大
scaleX(n) ； 改变元素的宽度。
scaleY(n) ；改变元素的高度。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 200px;height: 200px;background-color: bisque;margin:200px auto;transition: all 2s linear;}div:hover{transition: all 2s linear;transform: scale(2,2);transform: rotate(800deg);transform: skew(100deg,50deg);}</style></head><body><div></div></body></html>
中心点origin
transform-origin: x y； x y 默认旋转的中心点是元素的中心 (50% 50%)，
还可以给 x y 设置像素或者百分比或者方位名词(top、bottom、left、right、center)；
旋转rotate
transform: rotate(90deg);
rotate(angle) 用于设置元素旋转的角度；
单位是deg(度°) 默认是顺时针旋转；
倾斜skew
skew(x-angle,y-angle)； 定义 2D倾斜转换，沿着 X 和 Y 轴
skewX(angle)； 定义 2D 倾斜转换，沿着 X 轴
skewY(angle)； 定义 2D 倾斜转换，沿着 Y 轴
3D转换
3D转换相当于2D转换最大的区别就是多了一条Z轴。
Z轴起点位于X轴和Y轴屏幕的垂直线上
使用的函数：
位移
transform: translate3d();
translateX()；translateY()；translateZ()；旋转rotate3D();rotateX();rotateY();rotateZ();缩放scale3D(x,y,z);scaleX();scaleY();scaleZ();使用3D转换一定要设置透视距离。perspective:视距perspective-origin：视距起点 left right top bottom
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{/* perspective: 1500px; *//* perspective-origin: left top; */}div{width: 200px;height: 200px;background-color: antiquewhite;margin: 100px 100px;transition: all 2s linear;/* transform: translate3d(200px,200px,300px); */}div:hover{transition: all 2s linear;/* transform: translate3d(200px,200px,300px); */transform: rotate3d(100,100,100,200deg);}</style></head><body><div></div></body></html>
