Day 8 (CSS)

1.transition-timing-function 使用 曲线设置

通常:

     #d2{        transition-timing-function: linear;        }

可利用两个控制点，决定一个曲线：
https://cubic-bezier.com/
(左边的图案可以拉,GO看变化)

     #d2{        transition-timing-function:cubic-bezier(.09,1.13,1,-0.14);        }

2.属性

      nav a {        font-size: 1.2rem;        display: block;      }

3.强迫在同一排

display: flex;
使用这个才会换行
flex-wrap: wrap;

4.小图示的缩放

先往左推-1.1rem,图片消失(0倍)

        }        nav a .fa {            transform: scale(0);            transition: 0.3s all linear;            margin-right: -1.1rem;        }

滑鼠碰到之后归0,并让图片出现(1倍)

        nav a:hover .fa {            margin-right: 0rem;            transform: scale(1);            }

5.transform v.s animation

摸与不摸图形改变

transform(摸)
2D =>
transform: translateX(100px)
3D =>
transform: rotateX(40deg);
transform: rotateY(50deg);
transform: rotateZ(60deg);

animation(不摸)

      div {        animation-name: apple;        animation-duration: 2s;        animation-iteration-count: infinite;      }

6.transform: translate(位移)

置中对齐

     .wavy {        position: absolute;        top: 50%;        left: 50%;        transform: translate(-50%, -50%);      }

原理

7.### animation 动画製作

      .box {        /* 使用jump(可自定义) */        animation-name: jump;        animation-duration: 1s;        animation-iteration-count: infinite;      }

@定义

      @keyframes jump {        0% {          top: 0px;        }        50% {          /* 外推80px */          top: 80px;          border-radius: 0 0 30px 0;        }        100% {          top: 0px;        }      }

8.改变位置

position: static;"以外"的都可以
因为static是预设,位置(top)就不可以被移动

 .box {        position: relative;      }

      @keyframes jump {        0% {          top: 0px;        }        50% {          /* 外推80px */          top: 80px;          border-radius: 0 0 30px 0;        }        100% {          top: 0px;        }      }

9.引用animate.css製作animate

先抓取档案,放到档案下引用animate.css
https://github.com/animate-css/animate.css

找喜欢的效果套入(右侧)
https://animate.style/

使用方法
1.一定要有
animate__animated
animate__bounce

2.delay

/* All delay classes will take 2x longer to start */:root {  --animate-delay: 2s;}

3.重複次数 infinite无限次

.my-element {  --animate-repeat: 2;}