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" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d=" M364.9,307.6H240.5v-77.7h124.4V307.6z" />
</mask>
<mask id="circleMask">
<rect width="600" height="600" fill="#FFFFFF" />
<circle id="hideRing" fill="#000" stroke="#000" stroke-width="8" stroke-linejoin="round" stroke-miterlimit="10" cx="303" cy="300" r="0" />
<circle id="showRing" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="8" stroke-linejoin="round" stroke-miterlimit="10" cx="303" cy="300" r="0" />
</mask>
</defs>
<g id="emailLinesGroup" stroke-linecap="round" stroke-linejoin="round" stroke-width="6">
<line x1="260" x2="260" y1="10" y2="150" />
<line x1="310" x2="310" y1="90" y2="180" />
<line x1="360" x2="360" y1="70" y2="120" />
</g>
<g id="messageGroup" mask="url(#ringMask)">
<g id="emailGroup" mask="url(#circleMask)">
<path class="messageOutline" id="messageOutline" fill="none" stroke="#FFFFFF" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d=" M364.9,307.6H240.5v-77.7h124.4V307.6z" />
<g id="maskedMessageFlap" mask="url(#messageMask)">
<path id="messageFlap" fill="none" stroke="#FFFFFF" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d=" M242.1,234.1l61.4,61.4l59.8-61.4" />
</g>
</g>
<g id="planeGroup">
<path id="planeBot" fill="none" d="M269,252.4v42.7l33.4-25.6" />
<path id="planeBody" fill="none" d="M329.6,287.4L287.2,257l-57.1-15.5L354.8,212L329.6,287.4z M354.8,212l-67.6,44.7" />
</g>
</g>
<g id="handGroup">
<path id="bigHand" fill="none" stroke="none" stroke-width="8" stroke-linejoin="round" stroke-miterlimit="10" d="M339,458
c0,0-24,0-28.5,0c-8.6,0-14.4-4.8-20.1-13c-9.2-13.1-32-52.6-32-52.6s-11.8-16.2,0-23.8c9.2-5.9,14.8-3.6,20,5
c3.5,5.8,8.5,15.1,8.5,15.1s0-79.1,0-83.6c0-4.5-0.9-15.9,17.5-15.9c14.6,0,14.5,13.4,14.5,15.1c0,1.7,0,30.3,0,35.3
c3-3.6,21.8-5.8,24,5.8c3.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.3
C367.9,446.9,359.3,458,339,458" />
<path class="smallHand" fill="none" stroke="#FFFFFF" 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" />
</g>
<g mask="url(#ringMask)">
<g id="ringGroup" fill="none" stroke="#FFFFFF" stroke-width="8" stroke-linejoin="round&quo.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0