TweenMax实现鼠标横向位置控制伞打开飞走效果代码
代码语言:html
所属分类:动画
代码描述:TweenMax实现鼠标横向位置控制伞打开飞走效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { background-color: #578BAA; overflow: hidden; } body, html { height: 100%; width: 100%; margin: 0; padding: 0; } .container { width: 100vw; height: 100vh; display: flex; align-content: center; justify-content: center; } svg { position: absolute; left: 0%; visibility: hidden; } h1 { font-size: 20px; } h2 { font-size: 15px; width: 96%; font-weight: normal; } span { font-style: italic; } a { color: #FFF; font-weight: 700; } ul { margin-top: 0; padding-left: 15px; width: 80%; } .update { color: #FFDC7B; } </style> </head> <body> <div class="container"> <!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In --> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="600px" height="600px" viewBox="0 0 600 600" enable-background="new 0 0 600 600" xml:space="preserve"> <defs> </defs> <g class="wholeUmbrella"> <g class="tipGroup"> <line class="thinTip" fill="none" stroke="#44434F" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="300" y1="211.7" x2="300" y2="193.2" /> <line class="fatTip" fill="none" stroke="#F3E5C8" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="300" y1="211.7" x2="300" y2="205.2" /> </g> <path class="handle" fill="none" stroke="#944F1D" stroke-width="9" stroke-linecap="round" stroke-miterlimit="10" d="M276.2,380 c0,6.6,5.4,11.9,11.9,11.9h0c6.6,0,11.9-5.4,11.9-11.9v-82.7" /> <line class="shaft" fill="none" stroke="#F3E5C8" stroke-width="6" stroke-linecap="round" stroke-miterlimit="10" x1="300" y1="373" x2="300" y2="280" /> <g class="topGroup"> <path class="topMid" fill="#41404C" d="M300,208.7c-5.6,2.2-29.5,18-33,97.4c4.7-8.8,40.6-31.5,65.7,0 C331,250.5,314,215.6,300,208.7z" /> <path class="topRight" fill="#111017" d="M300,208.7c23.5,1.6,89.8,16.1,97.5,97.4c-4.7-8.8-40.3-32.4-65.7,0 C331.8,306,332.8,231.8,300,208.7z" /> <path class="topLeft" fill="#717081" d="M299.5,208.7c-23.5,1.6-89.8,16.1-97.5,97.4c4.7-8.8,40.3-32.4,65.7,0 C267.7,306,266.8,231.8,299.5,208.7z" /> </g> </g>.........完整代码请登录后点击上方下载按钮下载查看
网友评论0