html5svg实现情人节盒子弹出爱心动画特效源码.zip_用html5做的爱心盒子资源-CSDN文库

共4个文件

js：2个

css：1个

html：1个

版权申诉

html5

155 浏览量 2022-11-03 23:38:21 上传评论收藏 42KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

html5 svg实现情人节盒子弹出爱心动画特效源码.zip （4个子文件）

132689863456083948

css

style.css 326B

index.html 18KB

index.js 3KB

TweenMax.min.js 109KB

<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Love Box</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <svg class="heartsSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" preserveAspectRatio="xMidYMid meet"> <defs> <path id="star" d="M444,300.63a.72.72,0,0,0-.82.35l-1.54,2.62a.73.73,0,0,1-.7.37l-3-.23c-.72-.06-1.09.84-.61,1.52l1.93,2.79a1.11,1.11,0,0,1,.18.91l-.75,3.1a1.12,1.12,0,0,0,.76,1.33.76.76,0,0,0,.41,0l2.74-.89a.78.78,0,0,1,.42,0,.93.93,0,0,1,.39.21l2.5,2.15a1,1,0,0,0,.4.21.79.79,0,0,0,.94-.92l-.24-3.34a.92.92,0,0,1,.32-.79l2.3-1.77a1.08,1.08,0,0,0-.35-1.75l-2.89-1.18a1.1,1.1,0,0,1-.61-.68l-1.08-3.25a1.06,1.06,0,0,0-.73-.72" /> <path id="qMark" d="M443.21,311.53a1.57,1.57,0,0,1-1.13-.42,1.45,1.45,0,0,1-.44-1.1,1.92,1.92,0,0,1,.42-1.24,3.94,3.94,0,0,1,1.38-1l.19-.09q1.05-.5,1.05-1.12a1,1,0,0,0-.33-.79,1.32,1.32,0,0,0-.91-.3,1.44,1.44,0,0,0-.62.13,1.19,1.19,0,0,0-.45.37l-.05.07a2.82,2.82,0,0,1-2.12,1.41,1.58,1.58,0,0,1-1.13-.41,1.4,1.4,0,0,1-.44-1.07,2.75,2.75,0,0,1,1.39-2.31,6.05,6.05,0,0,1,3.49-.95,5.79,5.79,0,0,1,3.58,1,3.22,3.22,0,0,1,1.36,2.7,3,3,0,0,1-.27,1.32,3.19,3.19,0,0,1-.91,1.06,4.92,4.92,0,0,1-1,.61,6.92,6.92,0,0,0-.84.43,2.69,2.69,0,0,0-.69.78l-.17.23a1.65,1.65,0,0,1-.59.49A1.77,1.77,0,0,1,443.21,311.53Zm-2,2.64a2.06,2.06,0,1,1,.6,1.47A2,2,0,0,1,441.22,314.17Z" /> <g id="heart"> <path d="M460.92,305.84a20.22,20.22,0,0,1-2.61,9,31,31,0,0,1-5.37,7,45,45,0,0,1-5.73,4.77,44.17,44.17,0,0,1-3.8,2.4l-.12,0-.13,0H443l-.13,0-.14,0-.13-.07-.12-.08a.65.65,0,0,1-.12-.11c-.72-.76-2.12-2.28-3.83-4.33s-3.71-4.61-5.65-7.48a59,59,0,0,1-5.2-9.27,28.6,28.6,0,0,1-2.58-9.78,11.7,11.7,0,0,1,.51-4.28,8.14,8.14,0,0,1,1.91-3.2,6.77,6.77,0,0,1,3-1.81,8.17,8.17,0,0,1,3.89-.09l.11,0,.11,0,.11,0,.11,0a9.87,9.87,0,0,1,2.26.87,12.91,12.91,0,0,1,3.89,3.2,5.77,5.77,0,0,1,.78,1,16.45,16.45,0,0,0-.73,3.53,14.76,14.76,0,0,1,1.45-2.38,7.58,7.58,0,0,1,3.26-2.57,8.08,8.08,0,0,1,2.1-.52,9.18,9.18,0,0,1,2.33.08l.12,0,.11,0,.12,0,.11,0a11.42,11.42,0,0,1,4.11,1.79,13.66,13.66,0,0,1,3.3,3.23,15.12,15.12,0,0,1,2.14,4.22A14.05,14.05,0,0,1,460.92,305.84Z" /> <path d="M443.21,311.53a1.57,1.57,0,0,1-1.13-.42,1.45,1.45,0,0,1-.44-1.1,1.92,1.92,0,0,1,.42-1.24,3.94,3.94,0,0,1,1.38-1l.19-.09q1.05-.5,1.05-1.12a1,1,0,0,0-.33-.79,1.32,1.32,0,0,0-.91-.3,1.44,1.44,0,0,0-.62.13,1.19,1.19,0,0,0-.45.37l-.05.07a2.82,2.82,0,0,1-2.12,1.41,1.58,1.58,0,0,1-1.13-.41,1.4,1.4,0,0,1-.44-1.07,2.75,2.75,0,0,1,1.39-2.31,6.05,6.05,0,0,1,3.49-.95,5.79,5.79,0,0,1,3.58,1,3.22,3.22,0,0,1,1.36,2.7,3,3,0,0,1-.27,1.32,3.19,3.19,0,0,1-.91,1.06,4.92,4.92,0,0,1-1,.61,6.92,6.92,0,0,0-.84.43,2.69,2.69,0,0,0-.69.78l-.17.23a1.65,1.65,0,0,1-.59.49A1.77,1.77,0,0,1,443.21,311.53Zm-2,2.64a2.06,2.06,0,1,1,.6,1.47A2,2,0,0,1,441.22,314.17Z" fill="#F9DBBD"/> </g> <g id="mainHeart"> <path d="M460.92,305.84a20.22,20.22,0,0,1-2.61,9,31,31,0,0,1-5.37,7,45,45,0,0,1-5.73,4.77,44.17,44.17,0,0,1-3.8,2.4l-.12,0-.13,0H443l-.13,0-.14,0-.13-.07-.12-.08a.65.65,0,0,1-.12-.11c-.72-.76-2.12-2.28-3.83-4.33s-3.71-4.61-5.65-7.48a59,59,0,0,1-5.2-9.27,28.6,28.6,0,0,1-2.58-9.78,11.7,11.7,0,0,1,.51-4.28,8.14,8.14,0,0,1,1.91-3.2,6.77,6.77,0,0,1,3-1.81,8.17,8.17,0,0,1,3.89-.09l.11,0,.11,0,.11,0,.11,0a9.87,9.87,0,0,1,2.26.87,12.91,12.91,0,0,1,3.89,3.2,5.77,5.77,0,0,1,.78,1,16.45,16.45,0,0,0-.73,3.53,14.76,14.76,0,0,1,1.45-2.38,7.58,7.58,0,0,1,3.26-2.57,8.08,8.08,0,0,1,2.1-.52,9.18,9.18,0,0,1,2.33.08l.12,0,.11,0,.12,0,.11,0a11.42,11.42,0,0,1,4.11,1.79,13.66,13.66,0,0,1,3.3,3.23,15.12,15.12,0,0,1,2.14,4.22A14.05,14.05,0,0,1,460.92,305.84Z" /> <use class="qMark" xlink:href="#qMark" fill="#F9DBBD" /> </g> </defs> <g class="allBoxes"> <g class="wholeBox1"> <polygon points="412.27 394.46 451.4 369.96 491.4 394.46 452.27 419.96 412.27 394.46" fill="none" stroke="#450920" stroke-linejoin="round" stroke-width="3"/> <polygon points="412.39 394.47 451.52 369.97 491.52 394.47 452.39 419.97 412.39 394.47" fill="#450920"/> <polygon points="412.27 444.46 412.27 394.46 452.27 419.96 452.4 469.46 412.27 444.46" fill="#FFA5AB" stroke="#450920" stroke-linejoin="round" stroke-width="3"/> <polygon points="491.4 442.86 452.4 469.46 452.27 419.96 491.4 394.46 491.4 442.86" fill="#FFA5AB" stroke="#450920" stroke-linejoin="round" stroke-width="3"/> <polygon points="508.32 431.81 491.4 442.86 491.4 420.46 508.32 431.81" fill="#450920" stroke="#450920" stroke-linejoin="round" stroke-width="3"/> <polygon class="lidR" points="431.27 406.46 470.4 381.96 491.4 394.46 452.27 419.96 431.27 406.46" fill="#FFA5AB" stroke="#450920" stroke-linejoin="round" stroke-width="3"/> <polygon class="lidREnd" points="455.9 399.64 496.66 372.63 491.4 394.46 452.27 419.96 455.9 399.64" fill="none" stroke="none" stroke-linejoin="round" stroke-width="3"/> <polygon class="lidL" points="412.63 394.24 451.4 369.96 470.4 381.96 431.27 406.46 412.63 394.24" fill="#FFA5AB" stroke="#450920" stroke-linejoin="round" stroke-width="3"/> <polygon class="lidLEnd" points="412.27 394.46 451.4 369.96 443.49 351.5 401.5 375.65 412.27 394.46" fill="none" stroke="none" stroke-linejoin="round" stroke-width="3"/> </g> <g class="openBoxes"> <g class="wholeBox"> <polygon points="312.27 464.46 351.4 439.96 391.4 464.46 352.27 489.96 312.27 464.46" fill="none" stroke="#450920" stroke-linejoin="round" stroke-width="3"/> <polygon points="312.39 464.47 351.52 439.97 391.52 464.47 352.39 489.97 312.39 464.47" fill="#450920"/> <polygon points="312.27 514.46 312.27 464.46 352.27 489.96 352.4 539.46 312.27 514.46" fill="#FFA5AB" stroke="#450920" stroke-linejoin="round" stroke-width="3"/> <polygon points="391.4 512.86 352.4 539.46 352.27 489.96 391.4 464.46 391.4 512.86" fill="#FFA5AB" stroke="#450920" stroke-linejoin="round" stroke-width="3"/> <polygon points="408.32 501.81 391.4 512.86 391.4 490.46 408.32 501.81" fill="#450920" stroke="#450920" stroke-linejoin="round" stroke-width="3"/> <polygon class="lidREnd-2" data-name="lidREnd" points="355.9 469.64 396.66 442.63 391.4 464.46 352.27 489.96 355.9 469.64" fill="#FFA5AB" stroke="#450920" stroke-linejoin="round" stroke-width="3"/> <polygon class="lidLEnd-2" points="312.27 464.46 351.4 439.96 343.49 421.5 301.5 445.65 312.27 464.46" fill="#FFA5AB" stroke="#450920" stroke-linejoin="round" stroke-width="3"/> </g> <g class="wholeBox-2" data-name="wholeBox"> <polygon points="212.27 534.46 251.4 509.96 291.4 534.46 252.27 559.96 212.27 534.46" fill="none" stroke="#450920" stroke-linejoin="round" stroke-width="3"/> <polygon points="212.4 534.47 251.52 509.97 291.52 534.47 252.4 559.97 212.4 534.47" fill="#450920"/> <polygon points="212.27 584.46 212.27 534.46 252.27 559.96 252.4 609.46 212.27 584.46" fill="#FFA5AB" stroke="#450920" stroke-linejoin="round" stroke-width="3"/> <polygon points="291.4 582.86 252.4 609.46 252.27 559.96 291.4 534.46 291.4 582.86" fill="#FFA5AB" stroke="#450920" stroke-linejoin="round" stroke-width="3"/> <polygon points="308.32 571.81 291.4 582.86 291.4 560.46 308.32 571.81" fill="#450920" stroke="#450920" stroke-linejoin="round" stroke-width="3"/> <polygon class="lidREnd-3" data-name="lidREnd" points="255.9 539.64 296.66 512.63 291.4 534.46 252.27 559.96 255.9 539.64" fill="#FFA5AB" stroke="#450920" stroke-linejoin="round" stroke-width="3"/> <polygon class="lidLEnd-3" points="212.27 534.46 251.4 509.96 243.49 491.5 201.5 515.65 212.27 534.46" fill="#FFA5AB" stroke="#450920" stroke-linejoin="round" stroke-width="3"/> </g> <g class="wholeBox-3" data-name="wholeBox"> <polygon points="112.27 604.46 151.4 579.96 191.4 604.46 152.27 629.96 112.27 604.46" fill="none" stroke="#450920" stroke-linejoin="round" stroke-width="3"/> <

评论收藏

内容反馈

版权申诉