TweenMax实现短消息发送动画效果代码-html代码-BFW代码库

TweenMax实现短消息发送动画效果代码

代码语言：html

所属分类：动画

代码描述：TweenMax实现短消息发送动画效果代码

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

<html>
<head>
    <meta charset="UTF-8">
    <style>
        body {
            background-color: #EE336F;
            overflow: hidden;
        }
        body,
        html {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }
        .container {
            position: absolute;
            max-width: 100%;
            height: 600px;
        }
        svg {
            max-width: 100%;
            visibility: hidden;
            overflow: visible;
        }
        .messageOutline,
        #messageFlap,
        .smallHand,
        #ringGroup,
        #speedCurlGroup,
        #emailLinesGroup {
            stroke: #fdfdfd;
        }
    </style>
 
</head>
<body>

 <script src="https://wow.techbrood.com/libs/jquery/jquery-1.11.1.min.js"></script>
<div class="container">
    <svg xmlns="https://www.w3.org/2000/svg" width="600px" height="600px" viewBox="0 0 600 600">
        <defs>
            <mask id="ringMask">
                <rect width="1200" height="600" fill="#FFF" />
                <path class="smallHand" stroke="none" fill="#000" stroke-width="8" stroke-linejoin="round" stroke-miterlimit="10" d="
		M339,458c0,0-24,0-28.5,0c-8.6,0-14.4-4.8-20.1-13c-9.2-13.1-32-49.7-32-49.7s-11.8-16.2,0-23.8c9.2-5.9,14.8-3.6,20,5
		c3.5,5.8,8.5,12.3,8.5,12.3s0-50.2,0-54.8c0-4.5-0.9-15.9,17.5-15.9c14.6,0,14.5,13.4,14.5,15.1s0,1.4,0,6.5c3-3.6,21.8-5.8,24,5.8
		c3.7-5,20-4.3,20.7,10.1c6.7-5,13.3,0,13.3,6.5c0,6.5,0,39.3,0,44c0,4.7,0.5,16.8-5.2,32.3C367.9,446.9,359.3,458,339,458" />

            </mask>

            <mask id="messageMask">

                <path class="messageOutline" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="8" str.........完整代码请登录后点击上方下载按钮下载查看