TweenMax+svg实现相机拍照生成照片动画效果代码
代码语言:html
所属分类:动画
代码描述:TweenMax+svg实现相机拍照生成照片动画效果代码
代码标签: TweenMax svg 相机 拍照 生成 照片 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { background-color:#C2EB87; overflow: hidden; } body, html { height: 100%; width: 100%; margin: 0; padding: 0; } svg{ width:100%; height:100%; visibility:hidden; overflow:hidden; } </style> </head> <body > <svg class="mainSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600"> <title>3D polaroid</title> <defs> <clipPath id="topMask"> <rect class="topMask"x="313.2" y="214.6" fill="#D2FF15" width="172" height="114.6"/> </clipPath> <clipPath id="botMask"> <rect class="botMask" x="313.2" y="339" fill="#D2FF15" width="172" height="57"/> </clipPath> <clipPath id="photoMask"> <rect x="313.2" y="354" fill="#D2FF15" width="172" height="57"/> </clipPath> <rect id="slot" x="333" y="349" width="133" height="21" rx="10.38" ry="10.38" fill="#333"/> </defs> <g id="wholeCamera"> <g clip-path="url(#topMask)"> <rect id="baseTop" x="313.32" y="224.58" width="172" height="172" rx="24.03" ry="24.03" fill="#eae4d5" opacity="1"/> </g> <g clip-path="url(#botMask)"> <rect id="baseBot" x="313.32" y="224.58" width="172" height="172" rx="24.03" ry="24.03" fill="#3d3d3d"/> <rect id="baseBot" data-name="baseBot" x="313.32" y="214.58" width="172" height="172" rx="24.03" ry="24.03" fill="#4d4c4c"/> </g> <use xlink:href="#slot"/> <rect x="313.32" y="329.18" width="172" height="9.82" fill="#3d3d3d"/> <circle id="mainButton" cx="336.31" cy="299" r="12" fill="#ff7878" stroke="#f5f3ed" stroke-miterlimit="10" stroke-width="4"/> <circle id="flashSdjuster" cx="459.64" cy="308.93" r="9.5" fill="#676766" stroke="#4d4c4c" stroke-miterlimit="10" stroke-width="3"/> <rect id="flash" x="446" y="260.13" width="28.62" height="28.63" rx="3.63" ry="3.63" fill="#676766" stroke="#4d4c4c" stroke-miterlimit="10" stroke-width="3"/> <g id="spectrumGroup"> <rect x="362" y="290.18" width="12" height="39" fill="#db4f3a"/> <rect x="374" y="290.18" width="12" height="39" fill="#df5b40"/> <rect x="386" y="290.18" width="12" height="39" fill="#f79341"/> <rect x="422" y="290.18" width="12" height="39" fill="#58c1dd"/> <rect x="410" y="290.18" width="12" height="39" fill="#9cba43"/> <rect x="398" y="290.18" width="12" height="39" fill="#f7c65d"/> </g> <circle id="lensOuter" cx="397.15" cy="279.14" r="38.5" fill="#676766" stroke="#4d4c4c" stroke-miterlimit="10" stroke-width="6"/> <circle id="lensMIddle" cx="397.15" cy="279.14" r="34" fill="#676766" stroke="#f5f3ed" stroke-miterlimit="10" stroke-width="3"/> <circle id="lensInner" cx="397.15" cy="279.14" r="17" fill="#9adaf2" stroke="#4d4c4c" stroke-miterlimit="10" stroke-width="4"/> <ellipse id="flashAdjusterShine" t.........完整代码请登录后点击上方下载按钮下载查看
网友评论0