H5C3-中

上一篇链接: 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);

}