2020.11.17-前端第十二天学习日记-css

今天主要学习了css的一些动态特效。

精灵图

首先，我们学习了什么是精灵图，以及精灵图的应用。
精灵图是很多张图片或是logo放在同一张图片上，我们可以根据图片的像素值选择位置找到我们需要的图片。
代码如下：

  .div2{
            width: 120px;
            background-image: url(img/timg.jpg);
            background-position: -140px -450px;
        }
        .div3{
            width: 120px;
            background-image: url(img/timg.jpg);
            background-position: -250px -650px;
        }

过渡

transition ： 实现元素不同状态之间的平滑过渡。
格式为： transition：过渡的属性 完成时间（s） 运动曲线 延迟时间

transition-property 过渡属性：发生变化时，想要有过渡效果的属性。all，全属性。 数值型的属性才可以设置过渡，比如： width,height,color,font-size
transition-duration 完成时间：单位是s/ms。
transition-timing-function 运动曲线：
linear 匀速
ease 减速
ease-in 加速
ease-in-out 先加速后减速
transition-delay 延迟时间：单位是s 默认为0 过渡多久后生效。 从结束状态返回到开始状态时，也会生效。
一般设置缩放，位移，转换等效果时，都要设置过渡。

缩放、位移

缩放格式：
transform:scale(水平方向的缩放倍数,垂直方向的缩放倍数)
取值：大于1表示放大，小于1缩小，不会小于0
位移格式：
transform:translate(水平偏移量，垂直偏移量)
参数：
正值：向右和向下 负值：反方向。
百分比。盒子本身的宽高*百分比

倾斜、2D旋转

倾斜格式：
transform:skew(水平倾斜角度，垂直倾斜角度)
单位：deg 角度
正值：顺时针，负值：逆时针。
2D旋转：
设置旋转的中心点：border-radius: 50%;
transform-origin: 10%;
属性值：px 英文（left center right top bottom） 百分比
百分比是按照自身宽高*百分比计算的。
英文里只写一个值，第二值默认为center。
让盒子进行旋转格式：
transform: rotate(角度);
单位：deg 正值为顺时针，负值为逆时针。
transform 可以书写多个2D转换，中间用空格隔开。
当rotate和translate在一起的时候，注意书写顺序。
rotate在前，先旋转自身，再按照旋转的角度，进行位移。
translate在前，先进行位移，再旋转自身。
扑克牌部分代码如下：

.box{
            width: 800px;
            height: 400px;
            margin: 150px auto;
            position: relative;
        }
        .box img{
            width: 250px;
            position: absolute;
            left: 50%;
            top: 0;
            margin-left: -125px;
            transition: all 2s;
            transform-origin: center bottom;
        }
        .box:hover img:nth-child(7){
            transform: rotate(0);
        }
        .box:hover img:nth-child(1){
            transform: rotate(-60deg);
        }
        .box:hover img:nth-child(13){
            transform: rotate(60deg);
        }

效果如下：

3D旋转

透视：perspective: 110px;
加给变换盒子的父盒子
设置的用户的眼睛与平面的距离。
透视只是视觉上的呈现，不是真正的3D。
3D旋转格式：
transform: rotate3d(0.5,0,0,130deg);
transform: rotateX(45deg);
transform: rotateY(45deg);
transform: rotateZ(45deg);
利用3D旋转做百度钱包的图片翻转，代码如下：

 .div1,.div2{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0; 
            transition: all 1s;
            backface-visibility: hidden;
        }
        .div1{
            background: url("img/bdqb.png") left 0 no-repeat;
        }
        .div2{
            background: url("img/bdqb.png") right 0 no-repeat;
            transform: rotateY(-180deg);
        }
        .box:hover .div1{
            transform: rotateY(180deg);
        }
        .box:hover .div2{
            transform: rotateY(0deg);
        }