过渡转化以及动画的运用

这是第八天和九天的学习了！

这两天主要学习是过渡以及动画效果。

来学习一下吧！

一、过渡：

1.什么是过滤？
概念：就是指元素从一个状态变为另一个状态的过程。
2. 如何实现过渡？
通过transition 属性来指定，它的语法格式为：
transition: 过渡属性 持续时间 运动曲线 延迟时间;

3. 对于过渡而言，我们可以使用 transition 来简写，也可以把这个属性分开。
- transition-property：指定要用于过渡的属性名称，如：width、height、background、......
- transition-duration：过渡持续时间，单位是秒。
- transition-timing-function：过渡的的运行曲线，默认是 ease
- transition-delay：延迟执行时间，单位为秒

4. 使用
需求：当鼠标移到div上时，div变为圆形

5. 注意：添加过渡效果的代码需要放在你想要进行过渡的元素上。简单的说，就是希望那个元素有过渡效果就把代码加到那个元素上。

6. 如果希望元素的多个属性都具有过渡的效果，那么我们就可以把过渡属性的值设置为 all 即可。

7. 运动曲线有哪些？
- ease：默认值，逐渐慢下来
- linear：匀速运动
- ease-in：加速
- ease-out：减速
- ease-in-out：先加速后减速

<style>
        #container {
            width: 1000px;
            height: 300px;
            border: 1px solid #cccccc;
        }
        .box {
            position: absolute;
            top: 20px;
            left: 20px;
            width: 100px;
            height: 100px;
            background: blueviolet;

            /*过渡*/
            /*transition-property: left;
            transition-duration: 2s;
            transition-timing-function: ease;
            transition-delay: 0s;*/
            transition: all 2s linear;
        }
        #container:hover .box {
            left: 300px;
            border-radius: 50%;
            background: deeppink;
        }
    </style>

二、实现进度条效果：

<style>
        .box {
            width: 150px;
            height: 15px;
            border: 1px solid #f00;
            border-radius: 5px;
        }
        .bar {
            width: 0%;
            height: 100%;
            background-color: red;
            border-radius: 5px;
            transition: width 1s ease-out;
        }
        .box:hover .bar {
            width: 90%;
        }
    </style>

三、转换之转移

<style>
        div {
            width: 100px;
            height: 75px;
            border: 1px solid black;
            background-color: #cccccc;
        }
        div#div2 {
            /*transform: translate(50px, 100px);*/
            transform: translateY(50px);
            transform: translateX(50px);
            background-color: green;
        }
    </style>

四、转换之旋转

<style>
        .box {
            position: absolute;
            left: 200px;
            top:200px;
            width: 200px;
            height: 200px;
            background-color: blueviolet;

            transform-origin: 10px 10px;
            transform: rotate(45deg);
        }
    </style>

五、转换之缩放

缩放使用 transform: scale() 来实现，
语法格式为：
transform: scale(x, y)

它有以下几种书写方式：
- transform:scale(1,1) ：宽和高都放大一倍，相对于没有放大
- transform:scale(2,2) ：宽和高都放大了2倍
- transform:scale(2) ：只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)
- transform:scale(0.5, 0.5)：缩小

x和y的取值说明：
如果值为 1 表示不放大也不缩小
如果值大于 1 表示放大
如果值小于 1 表示缩小

x和y的值是原大小的位数。

 <style>
        div {
            position: absolute;
            top: 50px;
            left: 50px;
            width: 100px;
            height: 100px;
            background-color: deeppink;
        }
        div:hover {
            transform: scale(.2,.2);
        }
    </style>

六、动画

动画，也是CSS3中提供一个功能。它和过度最大的区别是：动画可以实现更多变化，更多控制，连续自动播放等效果。
要想使用动画，那么首先浏览器必须是高版本的。

首先使用动画之前，需要通过 @keyframe 来定义动画，定义好动画后，通过 animation 属性来指定动画名称即可。

定义动画时，需要告诉它这个动画将如何安完成。
1. 开始状态 from ，也可以使用 % 百分比来指定
2. 结束状态 to

注意：要想元素具有动画效果，除了定义好动画并运用外，还需要给这个元素进行绝对定义。

animation是动画的简写方式，它里面有很多的属性。它的语法格式为：
animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;

动画的名称 -- animation-name:
持续时间 -- animation-duration:
动画曲线 -- animation-timing-function:
延迟时间 -- animation-delay:
是否可以逆向播放 -- animation-direction:
        默认是“normal“,动画执行到最后会直接加到开始处
        alternate逆播放，动画执行到最后会反着播放。

动画执行总人数 -- animation-iteration-count:
        次数可以是整数，也可以是 infinite 表示一直循环

动画的状态 -- animation-fill-mode:
    有两个值可以指定：保持forwards，回到起始backwards

规定动画是否正在运行或暂停 -- animation-play-state:
这个需要单独使用，有两个值：
- running: 运行状态，默认值
- paused: 暂停状态
 

<style>
        .box {
            position: absolute;
            left: 10px;
            top: 10px;
            width: 100px;
            height: 100px;
            background-color: red;

            animation-name: move;
            animation-duration: 2s;
            animation-timing-function: linear;
            animation-delay: 0s;
            animation-iteration-count: 3;
            animation-direction: normal;
            animation-fill-mode: backwards;
        }
        .box:hover {
            /*animation: move 2s;*/
            animation-play-state: paused;
        }
        /*定义动画*/
        @keyframes move {
            /*from {
                left: 10px;
            }
            to {
                left: 100px;
            }*/
            0% {
                left: 10px;
            }
            100% {
                left: 400px;
            }
        }
    </style>

七、透视效果

<style>
        body {
            perspective: 200px;
        }
        .box {
            position: absolute;
            left: 300px;
            top: 50px;
            width: 100px;
            height: 100px;
            background-color: #009dfd;
            transform: translateZ(100px);
            transform: rotate3d(0, 1, 1, 60deg);
        }
    </style>

八、显示效果

<style>
        body {
            perspective: 400px;
        }
        .box {
            position: relative;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            transition: all .4s;
            /* 让背面的紫色盒子保留立体空间 给父级添加的 */
            transform-style: preserve-3d;
        }
        .box:hover {
            transform: rotateY(180deg);
        }
        .front,.back {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            font-size: 30px;
            color: #fff;
            text-align: center;
            line-height: 300px;
        }
        .front {
            background-color: blue;
            z-index: 1;
        }
        .back {
            background-color: purple;
            transform: rotateY(180deg);
        }
    </style>

九、3d导航

 <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            margin: 100px;
        }
        ul li {
            float: left;
            margin: 0 5px;
            width: 120px;
            height: 35px;
            list-style: none;
            /*透视效果*/
            perspective: 500px;
        }
        .box {
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: all .4s;
        }
        .box:hover {
            transform: rotateX(90deg);
        }
        .front,
        .bottom {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }
        .front {
            background-color: green;
            z-index: 1;
            transform: translateZ(17.5px);
        }
        .bottom {
            background-color: purple;
            /* 这个x轴一定是负值 */
            /* 如果有移动或者其他样式，必须先写移动 */
            transform: translateY(17.5px) rotateX(-90deg);
        }
    </style>
</head>
<body>
<ul>
    <li>
        <div class="box">
            <div class="front">HTML</div>
            <div class="bottom">页面骨架</div>
        </div>
    </li>
    <li>
        <div class="box">
            <div class="front">CSS</div>
            <div class="bottom">页面修饰</div>
        </div>
    </li>
</ul>

 十、旋转木马

  <style>
        body {
            perspective: 1000px;
        }
        section {
            position: relative;
            width: 300px;
            height: 200px;
            margin: 150px auto;
            transform-style: preserve-3d;
            /* 添加动画效果 */
            animation: rotate 10s linear infinite;
            background: url(images/pig.jpg) no-repeat;
        }
        section:hover {
            /* 鼠标放入section 停止动画 */
            animation-play-state: paused;
        }
        @keyframes rotate {
            0% {
                transform: rotateY(0);
            }
            100% {
                transform: rotateY(360deg);
            }
        }
        section div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url(images/dog.jpg) no-repeat;
        }
        section div:nth-child(1) {
            transform: rotateY(0) translateZ(300px);
        }
        section div:nth-child(2) {
            /* 先旋转好了再移动距离 */
            transform: rotateY(60deg) translateZ(300px);
        }
        section div:nth-child(3) {
            transform: rotateY(120deg) translateZ(300px);
        }
        section div:nth-child(4) {
            transform: rotateY(180deg) translateZ(300px);
        }
        section div:nth-child(5) {
            transform: rotateY(240deg) translateZ(300px);
        }
        section div:nth-child(6) {
            transform: rotateY(300deg) translateZ(300px);
        }
    </style>
</head>
<body>
<section>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</section>
</body>

以上就是这两天的学习内容了!加油！加油！