上一篇链接: H5C3-上.
transition 过渡动画
transition 的参数
参数1:表示过渡的属性 all 代表所有的属性
参数2:表示过渡的时间
参数3:表示动画的延迟时间
参数4:表示动画的运动方式 linear 匀速 staps()分布的 表示这个动画需要 几步完成
案例
实现结果
部分代码
.box{
width: 100px;
height: 100px;
background-color: green;
transition: all 2s 0s linear;
/* 如果过渡动画卸写在 hover 里面 就只是 hover的时候有动画效果 返回原装就没有了 */
}
盒子阴影
盒子阴影的几个参数
参数1 是这个盒子阴影的水平位置
参数2 是这个盒子阴影的垂直位置
参数3 是阴影的模糊度
参数4 是这个阴影的宽度
参数5 阴影的颜色
参数6 是决定阴影是外扩还是内聚 默认外扩
盒子阴影可以写多个 多个阴影之间应 , 隔开 而且先写的优先级更高 可以直接覆盖后面的
案例
部分代码
p {
font-size: 50px;
margin: 100px;
border: 5px solid black;
box-shadow: 0px 0px 10px 20px gold;
}
}
盒子模型
box-sizing这个属性会用来设置盒子的边框以及边距是外扩还是内聚
默认情况下盒子是外扩外扩会使盒子整体呈现出来的效果变大可能会影响的我们的布局
内聚的属性值border-box
默认值 content-box
文字阴影
text-shadow
参数1 文字阴影的水平位置
参数2 文字阴影的垂直位置
参数3 模糊度
参数4 阴影的颜色
案例
部分代码
p:hover{
text-shadow: -5px -5px 5px white, 5px 5px 5px black;
transition: all 2s;
}
background
background参数
参数1 背景图片的路径
参数2 表示的是是否平铺
repeat允许背景图片平铺是默认值
no- -repeat不允许平铺
repeat--x沿轴平铺
repeat-y沿y轴平铺
参数3表示的是图片的位置
参数3 有两个值 第一个值表示水平位置的 第二个值表示垂直位置
参数3的值可以给多种数据
方位值 水平 left cener right
垂直 top left center right
具体的像素值 水平方向 代表距离盒子左边是多少像素
垂直方向 代表距离盒子上面是多少像素
给百分比 给百分比的意思是 图片相对应的百分比盒子对饮的百分比数重合
参数4 注意点 要加参数4 就必须在 参数3 的后面加一个 /
参数4 表示的是图片的大小
给具体的像素值 表示的是背景图片的大小
给百分比 指的是相对盒子的百分比 100% 就是铺满盒子
给特殊的单词
cover 会使得图片有一部分没有显示 表示的是 图片必须覆盖盒子 缩放后 图片一定大于等于 盒子
contain 背景图片同比放大 图片不会变行 表示盒子必须包含这个背景图片 缩放后 图片一定小于等于图片
参数5 背景颜色
如果有多张图片作为背景 那最先写的优先级要高于后写的
background 是一个复合属性 (继承属性)就是说它是由多个子属性组成的
案例
实现结果
部分代码
.box{
width: 623px;
height: 417px;
margin: 50px auto;
background: url(./images/bg1.png) no-repeat left top,
url(./images/bg2.png) no-repeat right top,
url(./images/bg3.png) no-repeat right bottom,
url(./images/bg4.png) no-repeat left bottom,
url(./images/img6.jpg) no-repeat 113px 86px / 367px 257px;
}
线性渐变
线性渐变 linear-gradient
参数1 渐变的方向 指的是最终在哪个方向
后面参数的颜色 至少是两个颜色
向右上角渐变
下面两行代码 是 等同的
background-image: linear-gradient(to right top, red, yellow);
background-image: linear-gradient(45deg, red, yellow);
径向渐变
径向渐变和线性渐变用法一模一样
参数1 指的是径向渐变的圆的半径 和圆心的位置
参数后面的接的颜色 至少有两种 而且作为填充色的都是最后一种颜色
background-image: radial-gradient( 100px at center, Orange 30%, rgb(255, 217, 0), skyblue);
二维转换
旋转
rotate
transform: rotate(45deg);
平移
translate
只给一个参数 就是沿着X轴移动
transform: translate(300px);
给两个参数 一个表示沿着x轴移动 一个沿着y轴移动
如果只要盒子沿着y轴移动 那么就写两个参数
transform: translate(0,300px);
设置沿着y轴移动
transform: translateY(300px);
设置沿着X轴移动
transform: translateX(300px);
缩放
scale
参数中传入需要缩放的倍数
transform: scale(1.5);
扭曲
skew
transform: skew(360deg);
三维旋转
三维旋转
x轴旋转 上下旋转书 横着拿翻书的动作 齿轮
y轴旋转 左右旋转 钢管舞
Z轴旋转 顺时针或者逆时针 大风车
如果直接进行变换 效果并不明显 所以我们要给他加一个视距
我们案例中直接网元素上面加视距的用法并不多
视距的作用: 让三维变换效果更明显
效果
部分代码
li{
transform: perspective(800px);
}
li:nth-child(1):hover {
transform: perspective(800px) rotateX(45deg);
}
li:nth-child(2):hover {
transform: perspective(800px) rotateY(45deg);
}
li:nth-child(3):hover {
/* rotateZ的效果就是直接写rotate的效果 */
/* transform: perspective(800px) rotateZ(45deg); */
transform: perspective(800px) rotate(45deg);
}
三维移动
li:nth-child(1):hover {
/* transform: perspective(800px) translate(400px); */
transform: perspective(800px) translateX(400px);
}
li:nth-child(2):hover {
transform: perspective(800px) translateY(400px);
}
li:nth-child(3):hover {
transform: perspective(800px) translateZ(-400px);
}
3D盒子案例
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
body{
/* 我们加视距的时候通常是给不动的盒子加的 */
perspective: 800px;
}
ul{
width: 300px;
height: 300px;
margin: 400px auto;
position: relative;
list-style: none;
padding: 0;
/* perspective: 800px; */
}
ul:hover{
transform-style: preserve-3d;
transition: all 10s;
transform: rotateX(360deg) rotateY(-360deg) rotateZ(-360deg);
}
li{
width: 100%;
height: 100%;
position: absolute;
background-color: greenyellow;
}
li:nth-child(1){
left: -300px;
background-color: red;
transform: rotateY(90deg);
transform-origin: right;
}
li:nth-child(2){
top: -300px;
background-color: pink;
transform: rotateX(-90deg);
transform-origin: bottom;
}
li:nth-child(3){
right:-300px;
background-color: skyblue;
transform: rotateY(-90deg);
transform-origin: left;
transform-origin: left;
}
li:nth-child(4){
bottom: -300px;
background-color: yellow;
transform: rotateX(90deg);
transform-origin: top;
}
li:nth-child(6){
/* bottom: -300px; */
background-color: orange;
transform: translateZ(300px);
}