盒子阴影和文字阴影
- 如何给盒子添加阴影
box-shadow: 水平位移 垂直位移 模糊度 阴影扩展 阴影颜色 内外阴影;
注意点：
- 盒子的阴影分为内外阴影，默认情况下就是外阴影
- 快速添加阴影只需要填写三个参数即可
box-shadow:水平偏移 垂直偏移 模糊度;
默认情况下阴影的颜色和盒子内容的颜色一致 - 给文字添加阴影
text-shadow:水平偏移 垂直偏移 模糊度 阴影颜色；
.box2{
width: 200px;
height: 200px;
margin: 0 auto;
background-color: pink;
text-align: center;
line-height: 200px;
font-size: 40px;
/*text-shadow: 10px 10px 10px black;*/
text-shadow: 10px 10px 10px;
color: purple;
}
动画模块
- 过渡和动画之间的异同
- 不同点
过渡不人为的触发才会执行动画效果，动画不需要人为的触发就可以执行动画 - 相同点
过渡和动画都是用来给元素添加动画的
过渡和动画都是系统新增的一些属性
过渡和动画都需要满足三要素才会有动画效果
/*告诉系统需要执行哪个动画*/
animation-name:lnj;
/*告诉系统我们需要自己创建一个名称叫做 lnj 的动画*/
@keyframes lnj{
from{
margin-left:0;
}
to{
margin-left:500px;
}
}
/*告诉系统动画持续的时长*/
animation-duration:3s;
动画模块的其他属性上
- 播放延迟
/*告诉系统多少秒之后开始执行动画*/
animation-delay:2s;
- 执行速度
/*告诉系统动画执行的速度*/
animation-timing-function:linear;
/* 取值 linear ease-in ease-out ease-in-out */
- 执行次数
/*告诉系统动画需要执行几次*/
animation-iteration-count:3;
- 执行往返
/*告诉系统是否需要执行往返动画*/
animation-direction:alternate;
/*默认取值 normal 执行完一次之后回到起点袭击执行下一次*/
/*alternate,往返动画，执行完一次之后往回执行下一次*/
动画模块的其他属性下
通过我们的观察动画是有一定的状态的
等待状态
执行状态
结束状态
animation-fill-mode 作用:
指定动画等待状态和结束状态的样式取值
none:不做任何改变
forwards:让元素结束状态保持动画最后一帧的样式
backwards:让动画等待状态的时候显示动画第一帧的样式
both:让元素等待状态显示动画第一帧的样式，让袁术借宿状态保持动画最后一帧的样式
动画的另一种格式
@keyframes sport {
0%{
left: 0;
top: 0;
}
25%{
left: 300px;
top: 0;
}
50%{
left: 300px;
top: 300px;
}
75%{
left: 0;
top: 300px;
}
100%{
left: 0;
top: 0;
}
}
动画模块的连写
- 动画模块连写格式
animation: 动画名称 动画时长 动画运动速度 延迟时间 执行次数 往返动画; - 动画模块连写格式的简写
animation:动画名称 动画时长;
3D转换模块
- 什么是 2D 和 3D
2D 就是一个平面，只有宽度和高度，没有厚度
3D 就是一个立体，有宽度和高度，还有厚度
默认情况下所有的元素都是呈 2D 展现的 - 如何让某个元素呈 3D 展现
和透视一样，向看到某个元素的3D效果，只要给它的父元素添加一个 transform-style 属性，然后设置为 preserver-3d 即可 - 想看到整个立方的近大远小效果，就给 ul 的父元素添加透视效果
perspective:500px;
transform:translateX(200px) rotateY(90deg)
/*translate 拉伸也可以设置 X 方向 Y 方向 Z 方向 结尾加X/Y/Z
只要父元素被拉伸了，子元素也会被拉伸
*/
注意点
- 动画中如果有和默认样式中同名的属性，会覆盖默认样式中同名的属性
- 在编写动画的时候固定不变的值写在后面，需要变化的值写在后面
