笔记基于尚硅谷

目录

1.过渡与动画

1.1过渡

1.2动画

2.变形

2.1平移

2.2 Z轴平移

2.3 旋转

2.4缩放

2.5设置3D效果

3练习

3.1过渡练习

3.2动画练习

3.3浮出效果

3.4时钟

3.5立方体3d

1.过渡与动画

1.1过渡

过渡

transition

通过过渡可以指定一个属性发生变化时的切换方式
通过过渡可以创建一些非常好的效果，提升用户的体验
属性值

transition-property：指定要执行过渡的属性

• 多个属性间使用,隔开；
• 如果所有属性都需要过渡，则使用all关键字；
• 大部分属性都支持过渡效果；
• 注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡；（不能使用auto）

transition-duration：指定过渡效果的持续时间

时间单位：s和ms（1s=1000ms）

transition-delay：过渡效果的延迟，等待一段时间后在执行过渡

transition-timing-function：过渡的时序函数

• linear匀速运动
• ease 默认值，慢速开始，先加速后减速
• ease-in 加速运动
• ease-out 减速运动
• ease-in-out 先加速后减速
• cubic-bezier()来指定时序函数 https://cubic-bezier.com
• steps()分步执行过渡，时间平均分配

可以设置第二个值：

• end，在时间结束时执行过渡（默认值）
• start，在时间开始时执行过渡

transition：可以同时设置过渡相关的所有属性

注意，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟时间
 

1.2动画

动画和过渡类似，都是可以实现一些动态的效果，不同的是

过渡需要在某个属性发生变化时才会触发
动画可以自动触发动态效果
设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行每一个步骤
 

@keyframes test {
    from {
        margin-left: 0;
    }

    to {
        margin-left: 700px;
    }
}

animation-name 指定动画的关键帧名称

animation-duration：指定动画效果的持续时间

animation-delay：动画效果的延迟，等待一段时间后在执行动画

animation-timing-function：动画的时序函数 与过渡一样

animation-iteration-count 动画执行的次数

• 整数
• infinite 无限执行

animation-direction 指定动画运行的方向

• normal 从from向to运行，每次都是这样，默认值
• reverse 从to向from运行，每次都是这样
• alternate 从from向to运行，重复执行动画时反向执行
• alternate-reverse 从to向from运行，重复执行动画时反向执行

animation-play-state 设置动画的执行状态

• running 动画执行，默认值
• paused 动画暂停

animation-fill-mode 动画的填充模式

• none 动画执行完毕，元素回到原来位置，默认值
• forwards 动画执行完毕，元素会停止在动画结束的位置
• backwards 动画延时等待时，在动画开始的等待期间元素就处于from关键帧状态否则不提前进入关键帧
• both 结合了forwards和backwards

animation也可以简写

注意问题与过渡一样

animation: test 2s 2s linear infinite alternate both;

​

2.变形

2.1平移

• translateX() 沿着由方向平移
• translateY() 沿着y轴方向平移
• translateZ() 沿着z轴方向平移平移元素

    百分比是相对于自身计算的

几种水平垂直方向都居中的方式

利用绝对定位

只能对于设置好宽度和高度的元素

position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;

平移的方式

position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);

2.2 Z轴平移

z轴平移，调整元素在z轴的位置，正常情况就是调整元素和人眼之间的距离，距离越大，元素离人越近

z轴平移属于立体效果（近大远小），默认情况下网页是不支持透视，如果需要看见效果必须要设置网页的视距

perspective 设置视距

html {
         /* 设置视距 */
    perspective: 800px;
}

2.3 旋转

通过旋转可以使元素沿着x、y或z旋转指定的角度

• rotateX()
• rotateY()
• rotateZ()
• backface-visibility: hidden; 是否显示元素的背面

xx deg (度数)/turn（圈数）

transform: rotateY(0.5turn); 
transform: rotateY(180deg);

2.4缩放

对元素进行缩放的函数

• scalex() 水平方向缩放
• scaleY() 垂直方向缩放
• scale() 双方向的缩放
• transform-origin 0 0   设置变形的原点

.box {
    height: 200px;
    width: 200px;
    background-color: #bfa;
    margin: 200px auto;
    transition: 2s;
}

.box:hover {
     transform: scaleX(2); 
     transform: scaleY(2); 
    transform: scale(2);
  transform: scale(10%);
   
}

2.5设置3D效果

transform-style: preserve-3d;

3练习

3.1过渡练习

css

.huabu{
            width: 600px;
            height: 600px;
            background-color: silver;
            margin: 40px auto;
        }
        .box1 {
            width: 100px;
            height: 100px;
          
           background-color: pink;
           margin-bottom: 50px;
           transition: all 1s 2s ;
        }
        .box2{
            width: 100px;
            height: 100px;
       
           background-color: #bfa;
           margin-bottom: 50px;
           transition: all 3s linear;
        }
        .box3{
            width: 100px;
            height: 100px;
          
           background-color:yellow;
           transition: all 3s steps(3) ;
         
        }
        .huabu:hover div{
            margin-left: 500px;
        }

html

 <div class="huabu">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

    </div>

3.2动画练习

 .donghua {

            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;

            width: 67.71px;
            height: 90px;
            background-image: url(img/4.jpeg);
            /* background-repeat: no-repeat; */
            animation: run .8s steps(7) infinite ;
          
           
        }
        @keyframes run{
            0%{
                background-position: 0 0;
            }
            100%{
                background-position: -474px 0;
            }
       
        }
           

  <div class="donghua">

    </div>

3.3浮出效果

css代码

 .warp{
    perspective: 800px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
overflow: hidden;
 height: 340px;
 width: 1000px;
    background-color:#f5f5f5;
}
.warp div{
   height: 253px;
   width: 471px;
    margin-left: 20px;
    float: left;
    
    margin-top: 50px;
   
   transition: all .3s;
}
.img1{
    
    background-image: url(img/xm1.jpg);
    background-size: contain;
    background-repeat: no-repeat;
}
.img2{
   
    background-image: url(img/xm2.png);
    background-size: contain;
    background-repeat: no-repeat;
}
.warp>div:hover{
    box-shadow: 0 0  10px rgba(0, 0, 0, .6);
    transform:     translateY(-6px);
    /* translateZ(15px) */

}
   

<div class="warp">

        <div class="img1">
            
        </div>

        <div class="img2">
           
        </div>

    </div>

3.4时钟

表盘

   .biaopan {
            width: 500px;
            height: 500px;
            margin: 100px auto;
            background-image: url(img/表盘.jpeg);
            background-size: cover;
            border-radius: 50%;
            /* background-color: #bfa; */

            position: relative;

        }

        .biaopan>div {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            margin: auto;
            border-radius: 50%;

        }

        .s {
            width: 80%;
            height: 80%;
            animation: run 60s steps(60) infinite;
        }

        .s>div {
            width: 2px;
            height: 50%;
            background: red;
            margin: 0 auto;
        }

        .min {
            width: 70%;
            height: 70%;
            animation: run 3600s steps(60) infinite;
        }

        .min>div {
            width: 4px;
            height: 50%;
            background: black;
            margin: 0 auto;
        }

        .h {
            width: 50%;
            height: 50%;
            animation: run 216000s infinite;
        }

        .h>div {
            width: 8px;
            height: 50%;
            background: black;
            margin: 0 auto;
        }

        @keyframes run {
            0% {
                transform: rotateZ(0);
            }

            100% {
                transform: rotateZ(360deg);
            }
        }

 <div class="biaopan">
        <div class="s">
            <div>

            </div>
        </div>
        <div class="min">
            <div>

            </div>
        </div>
        <div class="h">
            <div>

            </div>
        </div>
    </div>

3.5立方体3d

html {
            perspective: 800px;
        }

        .warp {

            width: 200px;
            height: 200px;
            margin: 300px auto;

            position: relative;
            transform-style: preserve-3d;
            animation: text 15s infinite linear;

        }

        .warp>div {
            position: absolute;
            width: 200px;
            height: 200px;

            background-size: cover;
            /* 为元素设置透明效果 */
            opacity: .85;

        }

        .box1 {
            background-image: url(3D/1.jpeg);
            transform: rotateY(90deg) translateZ(100px);

        }

        .box2 {
            transform: rotateY(-90deg) translateZ(100px);

            background-image: url(3D/2.jpeg);

        }

        .box3 {
            transform: rotateX(90deg) translateZ(100px);

            background-image: url(3D/3.jpeg);

        }

        .box4 {
            transform: rotateX(-90deg) translateZ(100px);

            background-image: url(3D/4.jpeg);

        }

        .box5 {

            transform: rotateY(180deg) translateZ(100px);
            background-image: url(3D/7.jpeg);

        }

        .box6 {

            transform: rotateY(0deg) translateZ(100px);
            background-image: url(3D/6.jpeg);

        }

        @keyframes text {
            from {
                transform: rotateX(0) rotateY(0) rotateZ(0);
            }

            to {
                transform: rotateX(1turn) rotateY(2turn) rotateZ(3turn);
            }

        }

 <div class="warp">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
        <div class="box5"></div>
        <div class="box6"></div>
    </div>