2020-12-17_3D动画

---

一、动画

• 1.通过@keyframs定义动画。

• 2.在指定元素中，通过animation属性来调用动画。

• 1.定义动画

• 格式：

@keyframes 动画名 {
                from{
                    /* 初始帧 */
                }
                to{
                    /* 结束帧 */
                }
               }

【注】动画名不要起关键字，最好见名知意。

2.动画的调用：

• 通过animation属性来调用动画。

• animation-name：动画名称

• animation-duration 执行一次动画的完成时间。

• animation-iteration-count: 动画的执行次数 infinite 表示无数次。

• animation-delay: 动画延迟执行的时间。

• animation-fill-mode:
  forwards：在动画结束后，盒子保持结束帧状态。
  backwards 在动画开始时，包含延迟时间，让盒子保持初始帧状态
  both backwards forwards都生效
  none(默认值)

• animation-direction: 动画的执行方式
  alternate：交替执行。
  normal 正常（默认）
  reverse 反向 从结束帧开始到初始帧结束。
  【注】alternate 反向也会算一次执行时间。

• animation-timing-function:linear;
  linear 匀速
  ease-in 加速
  ease-out 减速
  ease-in-out 先加速后减速
  【注】动画属性要有中间状态，一般是数值型。

• 3、复合写法（名字和时间必须有且顺序不能变）：

 animation: name duration timing-function delay iteration-count direction fill-mode; 

也可以两个写一起

/* 复合写法 */
animation: move 1s infinite, changeColor 1s infinite;

.ball1 {
        position: absolute;
        left: 0;
        top: 0;
        background-color: pink;
        /* 在动画结束后，盒子保持结束帧状态 */
        /* animation-fill-mode: forwards; */
        /* 在动画开始时，包含延迟时间，让盒子保持初始帧状态 */
        /* animation-fill-mode: backwards; */
        /* backwards forwards都生效 */
        /* animation-fill-mode: both; */
        /* 默认值 */
        animation-fill-mode: none;
    }

.ball2 {
            position: absolute;
            left: 0;
            top: 0px;
            background-color: cyan;
            /* 交替执行 */
            /* animation-direction: alternate; */
            /* 正常 */
            /* animation-direction: normal; */
            /* 反向 从结束帧开始到初始帧结束 */
            /* animation-direction: reverse; */
            /* 匀速 */
            /* animation-timing-function: liner; */
            /* 加速 */
            /* animation-timing-function: ease-in; */
        }

@keyframes ball {
            from {
                transform: translate(0, 0);
                background-color: royalblue;
            }
            to {
                transform: translate(500px, 0);
            }

二、滤镜

• 透明度

 filter: opacity(25%);

• 灰度

filter: grayscale(50%);

• 反色

 filter: invert(1);

• 亮度 0-1

filter: brightness(1);

• 饱和度 0-1

 filter: saturate(60%);

• 褐色 0-1

filter: sepia(60%);

• 模糊 0-1

 filter: blur(2px);

• 色相翻转 deg

 filter: hue-rotate(90deg);

• 对比度

 filter: contrast(2)

• 阴影 x偏移 y偏移 模糊度

filter: drop-shadow(5px 5px 5px #aaa);

滤镜图

盒子阴影与滤镜阴影对比

 .box1 {
         box-shadow: 10px 10px 5px #aaa;
 }
 .box2 {
        /* 可以理解为投影 */
        filter: drop-shadow(10px 10px 5px #aaa);
 }

三、音乐盒

.box {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 300px;
            height: 300px;
            margin-left: -150px;
            margin-top: -150px;
            background-image: url(img/bc1.jpg);
            background-size: 300px;
            border-radius: 50%;
            animation: spin 3s infinite linear;
        }
 @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }
.box:hover {
            /* 暂停 */
            animation-play-state: paused;
        }

四、弹性小球

.ball {
            animation: jump 0.5s infinite alternate;
        }
        /* 阴影设置*/
.shadow {
            width: 150px;
            height: 75px;
            background-color: rgba(0, 0, 0, .6);
            transform: translateX(-25px);
            border-radius: 50%;
            animation: shadow 0.5s infinite alternate;
            filter: blur(5px);
        }
@keyframes jump {
            to {
                transform: translateY(-200px);
            }
        }
@keyframes shadow {
            to {
                transform: translateX(-25px) scale(0.5);
            }
        }

五、爱心

* {
            margin: 0;
            padding: 0;
        }
        
        body {
            background-color: #ff6972;
        }
        
        .heart {
            margin: 100px auto;
            width: 245px;
            height: 220px;
        }
        
        .text {
            position: absolute;
            left: 0;
            bottom: 300px;
            width: 100%;
            text-align: center;
            color: #ff9d37;
            font-size: 45px;
        }
        
        .heart p {
            width: 25px;
            height: 25px;
            border-radius: 3px;
            margin-right: 2px;
            margin-bottom: 2px;
            background-color: rgb(255, 255, 255);
            float: left;
            transform: translateY(-320px);
            animation-name: love;
            animation-duration: 4s;
            animation-iteration-count: infinite;
        }
        
        .heart .transparent {
            background-color: #ff6972;
        }
        
        @keyframes love {
            70% {
                transform: translateY(0);
                opacity: 1;
            }
            100% {
                transform: translateY(360px);
                opacity: 0;
            }
        }
        
        .delay1 {
            animation-delay: 0.1s;
        }
        
        .delay2 {
            animation-delay: 0.2s;
        }
        
        .delay3 {
            animation-delay: 0.3s;
        }
        
        .delay4 {
            animation-delay: 0.4s;
        }