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);
        transition: transform .1s cubic-bezier(0.694, .0482, .335, 1), opacity .1s cubic-bezier(0.694, .0482, .335, 1)
    }
    .commands-item--gap {
        margin-top: 9px
    }
    .commands-item:hover {
        opacity: 1
    }
    .commands-item:hover .commands-item-action {
        background: #333
    }
    .commands-item a {
        display: inline-block
    }
    .commands-item-mode {
        display: inline-block;
        margin-left: 3px;
        font-style: italic;
        color: #ccc
    }
    .commands-item-title {
        display: inline-block;
        width: 150px
    }
    .commands-item-info {
        display: inline-block;
        width: 300px;
        font-size: 14px;
        text-transform: none;
        letter-spacing: 0;
        font-weight: 400;
        color: #aaa
    }
    .commands-item-action {
        display: inline-block;
        float: right;
        margin-top: 3px;
        text-transform: uppercase;
        font-size: 10px;
        line-height: 10px;
        color: #fff;
        background: #90c9d1;
        padding: 5px 10px 4px;
        border-radius: 3px
    }
    .commands-item:first-child {
        margin-top: 0
    }
    .twitter-share {
        position: absolute;
        top: 4px;
        right: 20px
    }
    .tabs-labels {
        margin-bottom: 9px
    }
    .tabs-label {
        display: inline-block;
        background: #fff;
        padding: 10px 20px;
        font-size: 12px;
        line-height: 22px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #333;
        opacity: .5;
        cursor: pointer;
        margin-right: 2px;
        -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)
    }
    .tabs-label:hover {
        opacity: .9
    }
    .tabs-label--active {
        opacity: .9
    }
    .tabs-panel {
        display: none
    }
    .tabs-panel--active {
        display: block
    }
    .tab-panel {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%
    }
    .touch .ui-input {
        display: none
    }
    
    @media screen and (max-height:600px) {
    .ui-input {
        color: #111;
        border-color: #111
    }
    .ui-input:focus {
        border-color: #111
    }
    }
    </style>
</head>

<body>

    <canvas class="canvas"></canvas>

    <div class="help">?</div>

    <div class="ui">
        <input class="ui-input" type="text" />
        <span class="ui-return">↵</span>
    </div>

    <div class="overlay">


        <div class="tabs">
            <div class="tabs-labels"><span class="tabs-label">Commands</span><span class="tabs-label">Info</span><span class="tabs-label">Share</span></div>

            <div class="tabs-panels">
                <ul class="tabs-panel commands">
                    <li class="commands-item"><span class="commands-item-title">Text</span><span class="commands-item-info" data-demo="Hello :)">Type anything</span><span class="commands-item-action">Demo</span></li>
                    <li class="commands-item"><span class="commands-item-title">Countdown</span><span class="commands-item-info" data-demo="#countdown 10">#countdown<span class="commands-item-mode">number</span></span><span class="commands-item-action">Demo</span></li>
                    <li class="commands-item"><span class="commands-item-title">Icon</span><span class="commands-item-info" data-demo="#icon thumbs-up">#icon<span class="commands-item-mode">name</span>&nbsp;(using <a href="https://fortawesome.github.io/Font-Awesome/#icons-new"
                            target="_blank">Font Awesome</a>)</span><span class="commands-item-action">Demo</span></li>
                    <li class="commands-item"><span class="commands-item-title">Time</span><span class="commands-item-info" data-demo="#time">#time</span><span class="commands-item-action">Demo</span></li>
                    <li class="commands-ite.........完整代码请登录后点击上方下载按钮下载查看