canvas

canvas描述

    HTML5 <canvas> 标签用于绘制图像（通过脚本，通常是 JavaScript）。 不过，<canvas> 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。 getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。参考

canvas属性

• 颜色、样式和阴影

方法	描述
createLinearGradient()	创建线性渐变（用在画布内容上）。
createPattern()	在指定的方向上重复指定的元素。
createRadialGradient()	创建放射状/环形的渐变（用在画布内容上）。
addColorStop()	规定渐变对象中的颜色和停止位置。

• 线条样式

属性	描述
lineCap	设置或返回线条的结束端点样式。
lineJoin	设置或返回两条线相交时，所创建的拐角类型。
lineWidth	设置或返回当前的线条宽度。
miterLimit	设置或返回最大斜接长度。

• 矩形

方法	描述
rect()	创建矩形。
fillRect()	绘制"被填充"的矩形。
strokeRect()	绘制矩形（无填充）。
clearRect()	在给定的矩形内清除指定的像素。

• 路径

方法	描述
fill()	填充当前绘图（路径）。
stroke()	绘制已定义的路径。
beginPath()	起始一条路径，或重置当前路径。
moveTo()	把路径移动到画布中的指定点，不创建线条。
closePath()	创建从当前点回到起始点的路径。
lineTo()	添加一个新点，然后在画布中创建从该点到最后指定点的线条。
clip()	从原始画布剪切任意形状和尺寸的区域。
quadraticCurveTo()	创建二次贝塞尔曲线。
bezierCurveTo()	创建三次贝塞尔曲线。
arc()	创建弧/曲线（用于创建圆形或部分圆）。
arcTo()	创建两切线之间的弧/曲线。
isPointInPath()	如果指定的点位于当前路径中，则返回 true，否则返回 false。

• 转换

方法	描述
scale()	缩放当前绘图至更大或更小。
rotate()	旋转当前绘图。
translate()	重新映射画布上的 (0,0) 位置。
transform()	替换绘图的当前转换矩阵。
setTransform()	将当前转换重置为单位矩阵。然后运行 transform()。

• 文本

属性	描述
font	设置或返回文本内容的当前字体属性。
textAlign	设置或返回文本内容的当前对齐方式。
textBaseline	设置或返回在绘制文本时使用的当前文本基线。

方法	描述
fillText()	在画布上绘制"被填充的"文本。
strokeText()	在画布上绘制文本（无填充）。
measureText()	返回包含指定文本宽度的对象。

• 像素设置

属性	描述
width	返回 ImageData 对象的宽度。
height	返回 ImageData 对象的高度。
data	返回一个对象，其包含指定的 ImageData 对象的图像数据。

方法	描述
createImageData()	创建新的、空白的 ImageData 对象。
getImageData()	返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据。
putImageData()	把图像数据（从指定的 ImageData 对象）放回画布上。

• 合成

属性	描述
globalAlpha	设置或返回绘图的当前 alpha 或透明值。
globalCompositeOperation	设置或返回新图像如何绘制到已有的图像上。

图像绘制

• HTML canvas drawImage() 方法

实例1

<p>要使用的图片:</p>
<img id="scream" src="https://www.runoob.com/wp-content/uploads/2013/11/img_the_scream.jpg" alt="">
<p>画布:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
         您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
      var c = document.getElementById("myCanvas");
      var ctx = c.getContext("2d");
      var img = document.getElementById("scream");
      img.onload = function () {
           ctx.drawImage(img, 10, 10);
      }
</script>

参数值

参数	描述
img	规定要使用的图像、画布或视频。
sx	可选。开始剪切的 x 坐标位置。
sy	可选。开始剪切的 y 坐标位置。
swidth	可选。被剪切图像的宽度。
sheight	可选。被剪切图像的高度。
x	在画布上放置图像的 x 坐标位置。
y	在画布上放置图像的 y 坐标位置。
width	可选。要使用的图像的宽度（伸展或缩小图像）。
height	可选。要使用的图像的高度（伸展或缩小图像）。

实例2

<p>要使用的视频:</p>
<video id="video1" controls width="270" autoplay>
<source src="https://www.runoob.com/wp-content/uploads/2013/11/mov_bbb.mp4" type='video/mp4'>
<source src="https://www.runoob.com/wp-content/uploads/2013/11/mov_bbb.mp4" type='video/ogg'>
<source src="https://www.runoob.com/wp-content/uploads/2013/11/mov_bbb.mp4" type='video/webm'>
</video>

<p>画布 (代码在每20毫秒绘制当前的视频帧):</p>
<canvas id="myCanvas" width="270" height="135" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
      var v = document.getElementById("video1");
      var c = document.getElementById("myCanvas");
      ctx = c.getContext('2d');
      v.addEventListener('play', function () {
             var i = window.setInterval(function () {
              ctx.drawImage(v, 5, 5, 260, 125)
                  }, 20);
               }, false);
              v.addEventListener('pause', function () {
                   window.clearInterval(i);
               }, false);
               v.addEventListener('ended', function () {
                    clearInterval(i);
                }, false);
</script>

CSS3的动画属性

属性	描述
@keyframes	规定动画。
animation	所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function	规定动画的速度曲线。默认是 "ease"。
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-delay	规定动画何时开始。默认是 0。
animation-iteration-count	规定动画被播放的次数。默认是 1。
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。

实例3:绘制太阳系各大行星运行轨迹：

<div class="solarsys">

                    <div class='sun'></div>


                    <div class='mercuryOrbit'></div>


                    <div class='mercury'></div>


                    <div class='venusOrbit'></div>


                    <div class='venus'></div>


                    <div class='earthOrbit'></div>


                    <div class='earth'></div>


                    <div class='marsOrbit'></div>


                    <div class='mars'></div>


                    <div class='jupiterOrbit'></div>


                    <div class='jupiter'></div>


                    <div class='saturnOrbit'></div>


                    <div class='saturn'></div>


                    <div class='uranusOrbit'></div>


                    <div class='uranus'></div>


                    <div class='neptuneOrbit'></div>


                    <div class='neptune'></div>
                </div>

//css代码
                <style>
                    .solarsys {
                        width: 800px;
                        height: 800px;;
                        position: relative;
                        margin: 0 auto;
                        background-color: #000000;
                        padding: 0;
                        transform: scale(1);
                    }

                    /*太阳*/
                    .sun {
                        left: 357px;
                        top: 357px;
                        height: 90px;
                        width: 90px;
                        background-color: rgb(248, 107, 35);
                        border-radius: 50%;
                        box-shadow: 5px 5px 10px rgb(248, 107, 35), -5px -5px 10px rgb(248, 107, 35), 5px -5px 10px rgb(248, 107, 35), -5px 5px 10px rgb(248, 107, 35);
                        position: absolute;
                        margin: 0;
                    }

                    /*水星*/
                    .mercury {
                        left: 337.5px;
                        top: 395px;
                        height: 10px;
                        width: 10px;
                        background-color: rgb(166, 138, 56);
                        border-radius: 50%;
                        position: absolute;
                        transform-origin: 62.5px 5px;
                        animation: rotate 1.5s infinite linear;
                    }

                    /*水星轨道*/
                    .mercuryOrbit {
                        left: 342.5px;
                        top: 342.5px;
                        height: 115px;
                        width: 115px;
                        background-color: transparent;
                        border-radius: 50%;
                        border-style: dashed;
                        border-color: gray;
                        position: absolute;
                        border-width: 1px;
                        margin: 0;
                        padding: 0;
                    }

                    /*金星*/
                    .venus {
                        left: 309px;
                        top: 389px;
                        height: 22px;
                        width: 22px;
                        background-color: rgb(246, 157, 97);
                        border-radius: 50%;
                        position: absolute;
                        transform-origin: 91px 11px;
                        animation: rotate 3.84s infinite linear;
                    }

                    /*金星轨道*/
                    .venusOrbit {
                        left: 320px;
                        top: 320px;
                        height: 160px;
                        width: 160px;
                        background-color: transparent;
                        border-radius: 50%;
                        border-style: dashed;
                        border-color: gray;
                        position: absolute;
                        border-width: 1px;
                        /*margin: 100px;*/
                        /*transform-origin: -75px -75px;*/
                        /*animation: rotate 4s infinite linear;*/
                        margin: 0;
                        padding: 0;
                    }

                    /*地球*/
                    .earth {
                        left: 266.5px;
                        top: 391px;
                        height: 18px;
                        width: 18px;
                        background-color: rgb(115, 114, 174);
                        border-radius: 50%;
                        position: absolute;
                        transform-origin: 134px 9px;
                        animation: rotate 6.25s infinite linear;
                    }

                    /*地球轨道*/
                    .earthOrbit {
                        left: 275px;
                        top: 275px;
                        height: 250px;
                        width: 250px;
                        background-color: transparent;
                        border-radius: 50%;
                        border-style: dashed;
                        border-color: gray;
                        position: absolute;
                        border-width: 1px;
                        /*margin: 100px;*/
                        /*transform-origin: -75px -75px;*/
                        /*animation: rotate 4s infinite linear;*/
                        margin: 0;
                        padding: 0;
                    }

                    /*火星*/
                    .mars {
                        left: 222.5px;
                        top: 392.5px;
                        height: 15px;
                        width: 15px;
                        background-color: rgb(140, 119, 63);
                        border-radius: 50%;
                        position: absolute;
                        transform-origin: 177.5px 7.5px;
                        animation: rotate 11.75s infinite linear;
                    }

                    /*火星轨道*/
                    .marsOrbit {
                        left: 230px;
                        top: 230px;
                        height: 340px;
                        width: 340px;
                        background-color: transparent;
                        border-radius: 50%;
                        border-style: dashed;
                        border-color: gray;
                        position: absolute;
                        border-width: 1px;
                        /*margin: 100px;*/
                        /*transform-origin: -75px -75px;*/
                        /*animation: rotate 4s infinite linear;*/
                        margin: 0;
                        padding: 0;
                    }

                    /*木星*/
                    .jupiter {
                        left: 134px;
                        top: 379px;
                        height: 42px;
                        width: 42px;
                        background-color: rgb(156, 164, 143);
                        border-radius: 50%;
                        position: absolute;
                        transform-origin: 266px 21px;
                        animation: rotate 74.04s infinite linear;
                    }

                    /*木星轨道*/
                    .jupiterOrbit {
                        left: 155px;
                        top: 155px;
                        height: 490px;
                        width: 490px;
                        background-color: transparent;
                        border-radius: 50%;
                        border-style: dashed;
                        border-color: gray;
                        position: absolute;
                        border-width: 1px;
                        /*margin: 100px;*/
                        /*transform-origin: -75px -75px;*/
                        /*animation: rotate 4s infinite linear;*/
                        margin: 0;
                        padding: 0;
                    }

                    /*土星*/
                    .saturn {
                        left: 92px;
                        top: 387px;
                        height: 26px;
                        width: 26px;
                        background-color: rgb(215, 171, 68);
                        border-radius: 50%;
                        position: absolute;
                        transform-origin: 308px 13px;
                        animation: rotate 183.92s infinite linear;
                    }

                    /*土星轨道*/
                    .saturnOrbit {
                        left: 105px;
                        top: 105px;
                        height: 590px;
                        width: 590px;
                        background-color: transparent;
                        border-radius: 50%;
                        border-style: dashed;
                        border-color: gray;
                        position: absolute;
                        border-width: 1px;
                        /*margin: 100px;*/
                        /*transform-origin: -75px -75px;*/
                        /*animation: rotate 4s infinite linear;*/
                        margin: 0;
                        padding: 0;
                    }

                    /*天王星*/
                    .uranus {
                        left: 41.5px;
                        top: 386.5px;
                        height: 27px;
                        width: 27px;
                        background-color: rgb(164, 192, 206);
                        border-radius: 50%;
                        position: absolute;
                        transform-origin: 358.5px 13.5px;
                        animation: rotate 524.46s infinite linear;
                    }

                    /*天王星轨道*/
                    .uranusOrbit {
                        left: 55px;
                        top: 55px;
                        height: 690px;
                        width: 690px;
                        background-color: transparent;
                        border-radius: 50%;
                        border-style: dashed;
                        border-color: gray;
                        position: absolute;
                        border-width: 1px;
                        /*margin: 100px;*/
                        /*transform-origin: -75px -75px;*/
                        /*animation: rotate 4s infinite linear;*/
                        margin: 0;
                        padding: 0;
                    }

                    /*海王星*/
                    .neptune {
                        left: 10px;
                        top: 390px;
                        height: 20px;
                        width: 20px;
                        background-color: rgb(133, 136, 180);
                        border-radius: 50%;
                        position: absolute;
                        transform-origin: 390px 10px;
                        animation: rotate 1028.76s infinite linear;
                    }

                    /*海王星轨道*/
                    .neptuneOrbit {
                        left: 20px;
                        top: 20px;
                        height: 760px;
                        width: 760px;
                        background-color: transparent;
                        border-radius: 50%;
                        border-style: dashed;
                        border-color: gray;
                        position: absolute;
                        border-width: 1px;
                        /*margin: 100px;*/
                        /*transform-origin: -75px -75px;*/
                        /*animation: rotate 4s infinite linear;*/
                        margin: 0;
                        padding: 0;
                    }

                    @keyframes rotate {
                        100% {
                            transform: rotate(-360deg);
                        }
                    }
                </style>

实例4：纯CSS3模拟谷歌Loading加载动画DEMO演示

<h1>谷歌CSS3加载动画</h1>

<div class="content">
    <div class="column">
        <div class="container animation-1">
            <div class="shape shape1"></div>
            <div class="shape shape2"></div>
            <div class="shape shape3"></div>
            <div class="shape shape4"></div>
        </div>
    </div>
    <div class="column">
        <div class="container animation-2">
            <div class="shape shape1"></div>
            <div class="shape shape2"></div>
            <div class="shape shape3"></div>
            <div class="shape shape4"></div>
        </div>
    </div>
    <div class="column">
        <div class="container animation-3">
            <div class="shape shape1"></div>
            <div class="shape shape2"></div>
            <div class="shape shape3"></div>
            <div class="shape shape4"></div>
        </div>
    </div>
    <div class="column">
        <div class="container animation-4">
            <div class="shape shape1"></div>
            <div class="shape shape2"></div>
            <div class="shape shape3"></div>
            <div class="shape shape4"></div>
        </div>
    </div>
    <div class="column">
        <div class="container animation-5">
            <div class="shape shape1"></div>
            <div class="shape shape2"></div>
            <div class="shape shape3"></div>
            <div class="shape shape4"></div>
        </div>
    </div>
    <div class="column">
        <div class="container animation-6">
            <div class="shape shape1"></div>
            <div class="shape shape2"></div>
            <div class="shape shape3"></div>
            <div class="shape shape4"></div>
        </div>
    </div>
</div>

<div style="text-align:center;clear:both;">
    <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
    <script src="/follow.js" type="text/javascript"></script>
</div>
<img id="code_img_closed_4dd716cd-aeb9-40a7-8220-e24deb38f7ec" class="code_img_closed"
     src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""/><img
        id="code_img_opened_4dd716cd-aeb9-40a7-8220-e24deb38f7ec" class="code_img_opened" style="display: none;"
        onclick="cnblogs_code_hide('4dd716cd-aeb9-40a7-8220-e24deb38f7ec',event)"
        src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt=""/>
<div id="cnblogs_code_open_4dd716cd-aeb9-40a7-8220-e24deb38f7ec" class="cnblogs_code_hide">
</div>

<style>
        html, body {
            margin: 0;
            background-color: #03002E;
        }

        body {
            font-family: "Open Sans";
        }

        * {
            box-sizing: border-box;
        }

        h1 {
            text-align: center;
            color: white;
            font-size: 60px;
            font-weight: 300;
            margin-bottom: 30px;
        }

        .content {
            max-width: 600px;
            margin: auto;
            padding: 5px;
            height: 100%;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            align-content: flex-start;
        }

        .content .column {
            width: calc(33.33% - 10px);
            height: 170px;
            background-color: #040038;
            margin: 5px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .container {
            width: 30px;
            height: 30px;
            position: relative;
        }

        .container.animation-1 {
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
        }

        .container.animation-2, .container.animation-4 {
            -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
        }

        .container.animation-2 .shape, .container.animation-4 .shape {
            border-radius: 5px;
        }

        .container.animation-2, .container.animation-3, .container.animation-4 {
            -webkit-animation: rotation 1s infinite;
            animation: rotation 1s infinite;
        }

        .container.animation-3 .shape1 {
            border-top-left-radius: 10px;
        }

        .container.animation-3 .shape2 {
            border-top-right-radius: 10px;
        }

        .container.animation-3 .shape3 {
            border-bottom-left-radius: 10px;
        }

        .container.animation-3 .shape4 {
            border-bottom-right-radius: 10px;
        }

        .container.animation-4, .container.animation-5 {
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
        }

        .container.animation-5 .shape {
            width: 15px;
            height: 15px;
        }

        .container.animation-6 {
            -webkit-animation: rotation 1s infinite;
            animation: rotation 1s infinite;
        }

        .container.animation-6 .shape {
            width: 12px;
            height: 12px;
            border-radius: 2px;
        }

        .container .shape {
            position: absolute;
            width: 10px;
            height: 10px;
            border-radius: 1px;
        }

        .container .shape.shape1 {
            left: 0;
            background-color: #5C6BC0;
        }

        .container .shape.shape2 {
            right: 0;
            background-color: #8BC34A;
        }

        .container .shape.shape3 {
            bottom: 0;
            background-color: #FFB74D;
        }

        .container .shape.shape4 {
            bottom: 0;
            right: 0;
            background-color: #F44336;
        }

        @-webkit-keyframes rotation {
            from {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            to {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @keyframes rotation {
            from {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            to {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        .animation-1 .shape1 {
            -webkit-animation: animation1shape1 0.5s ease 0s infinite alternate;
            animation: animation1shape1 0.5s ease 0s infinite alternate;
        }

        @-webkit-keyframes animation1shape1 {
            from {
                -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
            }
            to {
                -webkit-transform: translate(16px, 16px);
                transform: translate(16px, 16px);
            }
        }

        @keyframes animation1shape1 {
            from {
                -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
            }
            to {
                -webkit-transform: translate(16px, 16px);
                transform: translate(16px, 16px);
            }
        }

        .animation-1 .shape2 {
            -webkit-animation: animation1shape2 0.5s ease 0s infinite alternate;
            animation: animation1shape2 0.5s ease 0s infinite alternate;
        }

        @-webkit-keyframes animation1shape2 {
            from {
                -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
            }
            to {
                -webkit-transform: translate(-16px, 16px);
                transform: translate(-16px, 16px);
            }
        }

        @keyframes animation1shape2 {
            from {
                -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
            }
            to {
                -webkit-transform: translate(-16px, 16px);
                transform: translate(-16px, 16px);
            }
        }

        .animation-1 .shape3 {
            -webkit-animation: animation1shape3 0.5s ease 0s infinite alternate;
            animation: animation1shape3 0.5s ease 0s infinite alternate;
        }

        @-webkit-keyframes animation1shape3 {
            from {
                -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
            }
            to {
                -webkit-transform: translate(16px, -16px);
                transform: translate(16px, -16px);
            }
        }

        @keyframes animation1shape3 {
            from {
                -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
            }
            to {
                -webkit-transform: translate(16px, -16px);
                transform: translate(16px, -16px);
            }
        }

        .animation-1 .shape4 {
            -webkit-animation: animation1shape4 0.5s ease 0s infinite alternate;
            animation: animation1shape4 0.5s ease 0s infinite alternate;
        }

        @-webkit-keyframes animation1shape4 {
            from {
                -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
            }
            to {
                -webkit-transform: translate(-16px, -16px);
                transform: translate(-16px, -16px);
            }
        }

        @keyframes animation1shape4 {
            from {
                -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
            }
            to {
                -webkit-transform: translate(-16px, -16px);
                transform: translate(-16px, -16px);
            }
        }

        .animation-2 .shape1 {
            -webkit-animation: animation2shape1 0.5s ease 0s infinite alternate;
            animation: animation2shape1 0.5s ease 0s infinite alternate;
        }

        @-webkit-keyframes animation2shape1 {
            from {
                -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
            }
            to {
                -webkit-transform: translate(20px, 20px);
                transform: translate(20px, 20px);
            }
        }

        @keyframes animation2shape1 {
            from {
                -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
            }
            to {
                -webkit-transform: translate(20px, 20px);
                transform: translate(20px, 20px);
            }
        }

        .animation-2 .shape2 {
            -webkit-animation: animation2shape2 0.5s ease 0s infinite alternate;
            animation: animation2shape2 0.5s ease 0s infinite alternate;
        }

        @-webkit-keyframes animation2shape2 {
            from {
                -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
            }
            to {
                -webkit-transform: translate(-20px, 20px);
                transform: translate(-20px, 20px);
            }
        }

        @keyframes animation2shape2 {
            from {
                -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
            }
            to {
                -webkit-transform: translate(-20px, 20px);
                transform: translate(-20px, 20px);
            }
        }

        .animation-2 .shape3 {
            -webkit-animation: animation2shape3 0.5s ease 0s infinite alternate;
            animation: animation2shape3 0.5s ease 0s infinite alternate;
        }

        @-webkit-keyframes animation2shape3 {
            from {
                -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
            }
            to {
                -webkit-transform: translate(20px, -20px);
                transform: translate(20px, -20px);
            }
        }

        @keyframes animation2shape3 {
            from {
                -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
            }
            to {
                -webkit-transform: translate(20px, -20px);
                transform: translate(20px, -20px);
            }
        }

        .animation-2 .shape4 {
            -webkit-animation: animation2shape4 0.5s ease 0s infinite alternate;
            animation: animation2shape4 0.5s ease 0s infinite alternate;
        }

        @-webkit-keyframes animation2shape4 {
            from {
                -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
            }
            to {
                -webkit-transform: translate(-20px, -20px);
                transform: translate(-20px, -20px);
            }
        }

        @keyframes animation2shape4 {
            from {
                -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
            }
            to {
                -webkit-transform: translate(-20px, -20px);
                transform: translate(-20px, -20px);
            }
        }

        .animation-3 .shape1 {
            -webkit-animation: animation3shape1 0.5s ease 0s infinite alternate;
            animation: animation3shape1 0.5s ease 0s infinite alternate;
        }

        @-webkit-keyframes animation3shape1 {
            from {
                -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
            }
            to {
                -webkit-transform: translate(5px, 5px);
                transform: translate(5px, 5px);
            }
        }

        @keyframes animation3shape1 {
            from {
                -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
            }
            to {
                -webkit-transform: translate(5px, 5px);
                transform: translate(5px, 5px);
            }
        }

        .animation-3 .shape2 {
            -webkit-animation: animation3shape2 0.5s ease 0s infinite alternate;
            animation: animation3shape2 0.5s ease 0s infinite alternate;
        }

        @-webkit-keyframes animation3shape2 {
            from {
                -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
            }
            to {
                -webkit-transform: translate(-5px, 5px);
                transform: translate(-5px, 5px);
            }
        }

        @keyframes animation3shape2 {
            from {
                -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
            }
            to {
                -webkit-transform: translate(-5px, 5px);
                transform: translate(-5px, 5px);
            }
        }

        .animation-3 .shape3 {
            -webkit-animation: animation3shape3 0.5s ease 0s infinite alternate;
            animation: animation3shape3 0.5s ease 0s infinite alternate;
        }

        @-webkit-keyframes animation3shape3 {
            from {
                -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
            }
            to {
                -webkit-transform: translate(5px, -5px);
                transform: translate(5px, -5px);
            }
        }

        @keyframes animation3shape3 {
            from {
                -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
            }
            to {
                -webkit-transform: translate(5px, -5px);
                transform: translate(5px, -5px);
            }
        }

        .animation-3 .shape4 {
            -webkit-animation: animation3shape4 0.5s ease 0s infinite alternate;
            animation: animation3shape4 0.5s ease 0s infinite alternate;
        }

        @-webkit-keyframes animation3shape4 {
            from {
                -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
            }
            to {
                -webkit-transform: translate(-5px, -5px);
                transform: translate(-5px, -5px);
            }
        }

        @keyframes animation3shape4 {
            from {
                -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
            }
            to {
                -webkit-transform: translate(-5px, -5px);
                transform: translate(-5px, -5px);
            }
        }

        .animation-4 .shape1 {
            -webkit-animation: animation4shape1 0.3s ease 0s infinite alternate;
            animation: animation4shape1 0.3s ease 0s infinite alternate;
        }

        @-webkit-keyframes animation4shape1 {
            from {
                -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
            }
            to {
                -webkit-transform: translate(5px, 5px);
                transform: translate(5px, 5px);
            }
        }

        @keyframes animation4shape1 {
            from {
                -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
            }
            to {
                -webkit-transform: translate(5px, 5px);
                transform: translate(5px, 5px);
            }
        }

        .animation-4 .shape2 {
            -webkit-animation: animation4shape2 0.3s ease 0.3s infinite alternate;
            animation: animation4shape2 0.3s ease 0.3s infinite alternate;
        }

        @-webkit-keyframes animation4shape2 {
            from {
                -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
            }
            to {
                -webkit-transform: translate(-5px, 5px);
                transform: translate(-5px, 5px);
            }
        }

        @keyframes animation4shape2 {
            from {
                -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
            }
            to {
                -webkit-transform: translate(-5px, 5px);
                transform: translate(-5px, 5px);
            }
        }

        .animation-4 .shape3 {
            -webkit-animation: animation4shape3 0.3s ease 0.3s infinite alternate;
            animation: animation4shape3 0.3s ease 0.3s infinite alternate;
        }

        @-webkit-keyframes animation4shape3 {
            from {
                -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
            }
            to {
                -webkit-transform: translate(5px, -5px);
                transform: translate(5px, -5px);
            }
        }

        @keyframes animation4shape3 {
            from {
                -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
            }
            to {
                -webkit-transform: translate(5px, -5px);
                transform: translate(5px, -5px);
            }
        }

        .animation-4 .shape4 {
            -webkit-animation: animation4shape4 0.3s ease 0s infinite alternate;
            animation: animation4shape4 0.3s ease 0s infinite alternate;
        }

        @-webkit-keyframes animation4shape4 {
            from {
                -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
            }
            to {
                -webkit-transform: translate(-5px, -5px);
                transform: translate(-5px, -5px);
            }
        }

        @keyframes animation4shape4 {
            from {
                -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
            }
            to {
                -webkit-transform: translate(-5px, -5px);
                transform: translate(-5px, -5px);
            }
        }

        .animation-5 .shape1 {
            animation: animation5shape1 2s ease 0s infinite reverse;
        }

        @-webkit-keyframes animation5shape1 {
            0% {
                -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
            }
            25% {
                -webkit-transform: translate(0, 15px);
                transform: translate(0, 15px);
            }
            50% {
                -webkit-transform: translate(15px, 15px);
                transform: translate(15px, 15px);
            }
            75% {
                -webkit-transform: translate(15px, 0);
                transform: translate(15px, 0);
            }
        }

        @keyframes animation5shape1 {
            0% {
                -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
            }
            25% {
                -webkit-transform: translate(0, 15px);
                transform: translate(0, 15px);
            }
            50% {
                -webkit-transform: translate(15px, 15px);
                transform: translate(15px, 15px);
            }
            75% {
                -webkit-transform: translate(15px, 0);
                transform: translate(15px, 0);
            }
        }

        .animation-5 .shape2 {
            animation: animation5shape2 2s ease 0s infinite reverse;
        }

        @-webkit-keyframes animation5shape2 {
            0% {
                -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
            }
            25% {
                -webkit-transform: translate(-15px, 0);
                transform: translate(-15px, 0);
            }
            50% {
                -webkit-transform: translate(-15px, 15px);
                transform: translate(-15px, 15px);
            }
            75% {
                -webkit-transform: translate(0, 15px);
                transform: translate(0, 15px);
            }
        }

        @keyframes animation5shape2 {
            0% {
                -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
            }
            25% {
                -webkit-transform: translate(-15px, 0);
                transform: translate(-15px, 0);
            }
            50% {
                -webkit-transform: translate(-15px, 15px);
                transform: translate(-15px, 15px);
            }
            75% {
                -webkit-transform: translate(0, 15px);
                transform: translate(0, 15px);
            }
        }

        .animation-5 .shape3 {
            animation: animation5shape3 2s ease 0s infinite reverse;
        }

        @-webkit-keyframes animation5shape3 {
            0% {
                -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
            }
            25% {
                -webkit-transform: translate(15px, 0);
                transform: translate(15px, 0);
            }
            50% {
                -webkit-transform: translate(15px, -15px);
                transform: translate(15px, -15px);
            }
            75% {
                -webkit-transform: translate(0, -15px);
                transform: translate(0, -15px);
            }
        }

        @keyframes animation5shape3 {
            0% {
                -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
            }
            25% {
                -webkit-transform: translate(15px, 0);
                transform: translate(15px, 0);
            }
            50% {
                -webkit-transform: translate(15px, -15px);
                transform: translate(15px, -15px);
            }
            75% {
                -webkit-transform: translate(0, -15px);
                transform: translate(0, -15px);
            }
        }

        .animation-5 .shape4 {
            animation: animation5shape4 2s ease 0s infinite reverse;
        }

        @-webkit-keyframes animation5shape4 {
            0% {
                -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
            }
            25% {
                -webkit-transform: translate(0, -15px);
                transform: translate(0, -15px);
            }
            50% {
                -webkit-transform: translate(-15px, -15px);
                transform: translate(-15px, -15px);
            }
            75% {
                -webkit-transform: translate(-15px, 0);
                transform: translate(-15px, 0);
            }
        }

        @keyframes animation5shape4 {
            0% {
                -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
            }
            25% {
                -webkit-transform: translate(0, -15px);
                transform: translate(0, -15px);
            }
            50% {
                -webkit-transform: translate(-15px, -15px);
                transform: translate(-15px, -15px);
            }
            75% {
                -webkit-transform: translate(-15px, 0);
                transform: translate(-15px, 0);
            }
        }

        .animation-6 .shape1 {
            -webkit-animation: animation6shape1 2s linear 0s infinite normal;
            animation: animation6shape1 2s linear 0s infinite normal;
        }

        @-webkit-keyframes animation6shape1 {
            0% {
                -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
            }
            25% {
                -webkit-transform: translate(0, 18px);
                transform: translate(0, 18px);
            }
            50% {
                -webkit-transform: translate(18px, 18px);
                transform: translate(18px, 18px);
            }
            75% {
                -webkit-transform: translate(18px, 0);
                transform: translate(18px, 0);
            }
        }

        @keyframes animation6shape1 {
            0% {
                -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
            }
            25% {
                -webkit-transform: translate(0, 18px);
                transform: translate(0, 18px);
            }
            50% {
                -webkit-transform: translate(18px, 18px);
                transform: translate(18px, 18px);
            }
            75% {
                -webkit-transform: translate(18px, 0);
                transform: translate(18px, 0);
            }
        }

        .animation-6 .shape2 {
            -webkit-animation: animation6shape2 2s linear 0s infinite normal;
            animation: animation6shape2 2s linear 0s infinite normal;
        }

        @-webkit-keyframes animation6shape2 {
            0% {
                -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
            }
            25% {
                -webkit-transform: translate(-18px, 0);
                transform: translate(-18px, 0);
            }
            50% {
                -webkit-transform: translate(-18px, 18px);
                transform: translate(-18px, 18px);
            }
            75% {
                -webkit-transform: translate(0, 18px);
                transform: translate(0, 18px);
            }
        }

        @keyframes animation6shape2 {
            0% {
                -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
            }
            25% {
                -webkit-transform: translate(-18px, 0);
                transform: translate(-18px, 0);
            }
            50% {
                -webkit-transform: translate(-18px, 18px);
                transform: translate(-18px, 18px);
            }
            75% {
                -webkit-transform: translate(0, 18px);
                transform: translate(0, 18px);
            }
        }

        .animation-6 .shape3 {
            -webkit-animation: animation6shape3 2s linear 0s infinite normal;
            animation: animation6shape3 2s linear 0s infinite normal;
        }

        @-webkit-keyframes animation6shape3 {
            0% {
                -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
            }
            25% {
                -webkit-transform: translate(18px, 0);
                transform: translate(18px, 0);
            }
            50% {
                -webkit-transform: translate(18px, -18px);
                transform: translate(18px, -18px);
            }
            75% {
                -webkit-transform: translate(0, -18px);
                transform: translate(0, -18px);
            }
        }

        @keyframes animation6shape3 {
            0% {
                -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
            }
            25% {
                -webkit-transform: translate(18px, 0);
                transform: translate(18px, 0);
            }
            50% {
                -webkit-transform: translate(18px, -18px);
                transform: translate(18px, -18px);
            }
            75% {
                -webkit-transform: translate(0, -18px);
                transform: translate(0, -18px);
            }
        }

        .animation-6 .shape4 {
            -webkit-animation: animation6shape4 2s linear 0s infinite normal;
            animation: animation6shape4 2s linear 0s infinite normal;
        }

        @-webkit-keyframes animation6shape4 {
            0% {
                -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
            }
            25% {
                -webkit-transform: translate(0, -18px);
                transform: translate(0, -18px);
            }
            50% {
                -webkit-transform: translate(-18px, -18px);
                transform: translate(-18px, -18px);
            }
            75% {
                -webkit-transform: translate(-18px, 0);
                transform: translate(-18px, 0);
            }
        }

        @keyframes animation6shape4 {
            0% {
                -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
            }
            25% {
                -webkit-transform: translate(0, -18px);
                transform: translate(0, -18px);
            }
            50% {
                -webkit-transform: translate(-18px, -18px);
                transform: translate(-18px, -18px);
            }
            75% {
                -webkit-transform: translate(-18px, 0);
                transform: translate(-18px, 0);
            }
        }

        @media screen and (max- 600px) {
            .content {
                align-content: flex-start;
            }

            .content .column {
                width: calc(50% - 30px);
            }
        }

        @media screen and (max- 400px) {
            .content {
                align-content: flex-start;
            }

            .content .column {
                width: calc(100% - 30px);
            }
        }

        footer {
            margin-top: 50px;
            padding-bottom: 50px;
        }

        footer p {
            text-align: center;
            margin: 0;
            line-height: 20px;
            font-size: 13px;
            color: white;
            font-weight: 400;
        }

        footer p a {
            color: #FFB74D;
        }
    </style>

快捷键大全