canvas点状文字变形表白动画效果代码 Shape Shifter-html代码-BFW代码库

代码语言：html

所属分类：表白

代码描述：canvas点状文字变形表白动画效果代码 Shape Shifter

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">
    <style>


    body, .overlay {
        -webkit-perspective: 1000;
        -webkit-perspective-origin-y: 25%
    }
    .body--ready {
        background-image: -webkit-linear-gradient(top, #416ffa, #063fb3);
      background-image: -moz-linear-gradient(top, #416ffa, #063fb3);
      background-image: -ms-linear-gradient(top, #416ffa, #063fb3);
      background-image: -o-linear-gradient(top, #416ffa, #063fb3);
        background: linear-gradient(top, #416ffa 0, #063fb3 120%)
    }
    .body--ready .overlay {
        -webkit-transition: -webkit-transform .7s cubic-bezier(0.694, .0482, .335, 1), opacity .7s cubic-bezier(0.694, .0482, .335, 1);
        -moz-transition: -moz-transform .7s cubic-bezier(0.694, .0482, .335, 1), opacity .7s cubic-bezier(0.694, .0482, .335, 1);
        -ms-transition: -ms-transform .7s cubic-bezier(0.694, .0482, .335, 1), opacity .7s cubic-bezier(0.694, .0482, .335, 1);
        -o-transition: -o-transform .7s cubic-bezier(0.694, .0482, .335, 1), opacity .7s cubic-bezier(0.694, .0482, .335, 1);
        transition: transform .7s cubic-bezier(0.694, .0482, .335, 1), opacity .7s cubic-bezier(0.694, .0482, .335, 1)
    }
    .body--ready .ui, .body--ready .help {
        display: block
    }
    .ui {
        display: none;
        position: absolute;
        left: 50%;
        bottom: 5%;
        width: 300px;
        margin-left: -150px
    }
    .ui-input {
        width: 100%;
        height: 50px;
        background: 0;
        font-size: 24px;
        font-weight: 700;
        color: #fff;
        text-align: center;
        border: 0;
        border-bottom: 2px solid #fff
    }
    .ui-input:focus {
        outline: 0;
        border: 0;
        border-bottom: 2px solid #fff
    }
    .ui-return {
        display: none;
        position: absolute;
        top: 20px;
        right: 0;
        padding: 3px 2px 0;
        font-size: 10px;
        line-height: 10px;
        color: #fff;
        border: 1px solid #fff
    }
    .ui--enter .ui-return {
        display: block
    }
    .ui--wide {
        width: 76%;
        margin-left: 12%;
        left: 0
    }
    .ui--wide .ui-return {
        right: -20px
    }
    .help {
        display: none;
        position: absolute;
        top: 40px;
        right: 40px;
        width: 25px;
        height: 25px;
        text-align: center;
        font-size: 13px;
        line-height: 27px;
        font-weight: 700;
        cursor: pointer;
        background: #fff;
        color: #79a8ae;
        opacity: .9;
        -webkit-transition: opacity .1s cubic-bezier(0.694, .0482, .335, 1);
        -moz-transition: opacity .1s cubic-bezier(0.694, .0482, .335, 1);
        -ms-transition: opacity .1s cubic-bezier(0.694, .0482, .335, 1);
        -o-transition: opacity .1s cubic-bezier(0.694, .0482, .335, 1);
        transition: opacity .1s cubic-bezier(0.694, .0482, .335, 1)
    }
    .help:hover {
        opacity: 1
    }
    .overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 550px;
        height: 490px;
        margin: -260px 0 0 -275px;
        opacity: 0;
        -webkit-transform: rotateY(90deg);
        -moz-transform: rotateY(90deg);
        -ms-transform: rotateY(90deg);
        -o-transform: rotateY(90deg);
        transform: rotateY(90deg)
    }
    .overlay--visible {
        opacity: 1;
        -webkit-transform: rotateY(0);
        -moz-transform: rotateY(0);
        -ms-transform: rotateY(0);
        -o-transform: rotateY(0);
        transform: rotateY(0)
    }
    .ui-share, .ui-details {
        opacity: .9;
        background: #fff;
        z-index: 2
    }
    .ui-details-content, .ui-share-content {
        padding: 100px 50px
    }
    .commands {
        margin: 0;
        padding: 0;
        list-style: none;
        cursor: pointer
    }
    .commands-item {
        font-size: 12px;
        line-height: 22px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        padding: 20px;
        background: #fff;
        margin-top: 1px;
        color: #333;
        opacity: .9;
        -webkit-transition: -webkit-transform .7s cubic-bezier(0.694, .0482, .335, 1), opacity .1s cubic-bezier(0.694, .0482, .335, 1);
        -moz-transition: -moz-transform .1s cubic-bezier(0.694, .0482, .335, 1), opacity .1s cubic-bezier(0.694, .0482, .335, 1);
        -ms-transition: -ms-transform .1s cubic-bezier(0.694, .0482, .335, 1), opacity .1s cubic-bezier(0.694, .0482, .335, 1);
        -o-transition: -o-transform .1s cubic-bezier(0.694, .0482, .335, 1), opacity .1s cubic-bezier(0.694, .0482, .335, 1);
  .........完整代码请登录后点击上方下载按钮下载查看