HTML5 Canvas 梦幻的文字飞扬动画教程

之前为大家介绍了一款HTML5/CSS3 3D文字特效 文字外翻效果。今天为大家带来的是html5 canvas实现的文字漂动动画效果。画面非常梦幻。

在线预览源码下载

实现代码如下：

html代码：

 <div class="dg ac">        <div class="dg main a taller-than-window" style="width: 245px;">            <div style="width: 6px; margin-left: -3px; height: 42px; cursor: ew-resize; position: absolute;">            </div>            <ul style="height: 42px;">                <li class="cr string">                    <div>                        <span class="PRoperty-name">text</span><div class="c">                            <input type="text"></div>                    </div>                </li>                <li class="cr number has-slider">                    <div>                        <span class="property-name">speed</span><div class="c">                            <div>                                <input type="text"></div>                            <div class="slider">                                <div class="slider-fg" style="width: 14.089754445385266%;">                                </div>                            </div>                        </div>                    </div>                </li>                <li class="cr number has-slider">                    <div>                        <span class="property-name">spacing</span><div class="c">                            <div>                                <input type="text"></div>                            <div class="slider">                                <div class="slider-fg" style="width: 86.70618120237087%;">                                </div>                            </div>                        </div>                    </div>                </li>                <li class="cr number has-slider">                    <div>                        <span class="property-name">waviness</span><div class="c">                            <div>                                <input type="text"></div>                            <div class="slider">                                <div class="slider-fg" style="width: 56.35901778154106%;">                                </div>                            </div>                        </div>                    </div>                </li>                <li class="cr number has-slider">                    <div>                        <span class="property-name">trail</span><div class="c">                            <div>                                <input type="text"></div>                            <div class="slider">                                <div class="slider-fg" style="width: 9.67741935483871%;">                                </div>                            </div>                        </div>                    </div>                </li>                <li class="cr boolean">                    <div>                        <span class="property-name">multiply_trail</span><div class="c">                            <input type="checkbox"></div>                    </div>                </li>            </ul>            <div class="close-button" style="width: 245px;">                Close Controls</div>        </div>    </div>

css代码：

.dg ul        {            list-style: none;            margin: 0;            padding: 0;            width: 100%;            clear: both;        }        .dg.ac        {            position: fixed;            top: 0;            left: 0;            right: 0;            height: 0;            z-index: 0;        }        .dg:not(.ac) .main        {            overflow: hidden;        }        .dg.main        {            -webkit-transition: opacity 0.1s linear;            -o-transition: opacity 0.1s linear;            -moz-transition: opacity 0.1s linear;            transition: opacity 0.1s linear;        }        .dg.main.taller-than-window        {            overflow-y: auto;        }        .dg.main.taller-than-window .close-button        {            opacity: 1;            margin-top: -1px;            border-top: 1px solid #2c2c2c;        }        .dg.main ul.closed .close-button        {            opacity: 1 !important;        }        .dg.main:hover .close-button, .dg.main .close-button.drag        {            opacity: 1;        }        .dg.main .close-button        {            -webkit-transition: opacity 0.1s linear;            -o-transition: opacity 0.1s linear;            -moz-transition: opacity 0.1s linear;            transition: opacity 0.1s linear;            border: 0;            position: absolute;            line-height: 19px;            height: 20px;            cursor: pointer;            text-align: center;            background-color: #000;        }        .dg.main .close-button:hover        {            background-color: #111;        }        .dg.a        {            float: right;            margin-right: 15px;            overflow-x: hidden;        }        .dg.a.has-save ul        {            margin-top: 27px;        }        .dg.a.has-save ul.closed        {            margin-top: 0;        }        .dg.a .save-row        {            position: fixed;            top: 0;            z-index: 1002;        }        .dg li        {            -webkit-transition: height 0.1s ease-out;            -o-transition: height 0.1s ease-out;            -moz-transition: height 0.1s ease-out;            transition: height 0.1s ease-out;        }        .dg li:not(.folder)        {            cursor: auto;            height: 27px;            line-height: 27px;            overflow: hidden;            padding: 0 4px 0 5px;        }        .dg li.folder        {            padding: 0;            border-left: 4px solid rgba(0,0,0,0);        }        .dg li.title        {            cursor: pointer;            margin-left: -4px;        }        .dg .closed li:not(.title), .dg .closed ul li, .dg .closed ul li > *        {            height: 0;            overflow: hidden;            border: 0;        }        .dg .cr        {            clear: both;            padding-left: 3px;            height: 27px;        }        .dg .property-name        {            cursor: default;            float: left;            clear: left;            width: 40%;            overflow: hidden;            text-overflow: ellipsis;        }        .dg .c        {            float: left;            width: 60%;        }        .dg .c input[type=text]        {            border: 0;            margin-top: 4px;            padding: 3px;            width: 100%;            float: right;        }        .dg .has-slider input[type=text]        {            width: 30%;            margin-left: 0;        }        .dg .slider        {            float: left;            width: 66%;            margin-left: -5px;            margin