html5使用SVG实现有机形状动画特效源码.zip资源-CSDN文库

共15个文件

png：10个

js：2个

css：2个

版权申诉

html5

158 浏览量 2022-11-04 23:42:34 上传评论收藏 515KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

html5使用SVG实现有机形状动画特效源码.zip （15个子文件）

132689892539402283

css

demo.css 5KB

normalize.css 2KB

img

5.png 46KB

9.png 59KB

bg.png 7KB

1.png 56KB

6.png 43KB

2.png 46KB

7.png 69KB

4.png 37KB

8.png 65KB

3.png 71KB

index.html 19KB

anime.min.js 11KB

main.js 5KB

<!DOCTYPE html> <html lang="en" class="no-js"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Organic Shape Animations</title> <link rel="stylesheet" type="text/css" href="css/normalize.css" /> <link rel="stylesheet" type="text/css" href="css/demo.css" /> <script>document.documentElement.className = 'js';</script> </head> <body class="loading"> <svg class="hidden"> <symbol id="icon-arrow" viewBox="0 0 24 24"> <title>arrow</title> <polygon points="6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 "/> </symbol> <symbol id="icon-drop" viewBox="0 0 24 24"> <title>drop</title> <path d="M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z"/><path d="M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z"/> </symbol> <symbol id="icon-github" viewBox="0 0 32.6 31.8"> <title>github</title> <path d="M16.3,0C7.3,0,0,7.3,0,16.3c0,7.2,4.7,13.3,11.1,15.5c0.8,0.1,1.1-0.4,1.1-0.8c0-0.4,0-1.4,0-2.8c-4.5,1-5.5-2.2-5.5-2.2c-0.7-1.9-1.8-2.4-1.8-2.4c-1.5-1,0.1-1,0.1-1c1.6,0.1,2.5,1.7,2.5,1.7c1.5,2.5,3.8,1.8,4.7,1.4c0.1-1.1,0.6-1.8,1-2.2c-3.6-0.4-7.4-1.8-7.4-8.1c0-1.8,0.6-3.2,1.7-4.4C7.4,10.7,6.8,9,7.7,6.8c0,0,1.4-0.4,4.5,1.7c1.3-0.4,2.7-0.5,4.1-0.5c1.4,0,2.8,0.2,4.1,0.5c3.1-2.1,4.5-1.7,4.5-1.7c0.9,2.2,0.3,3.9,0.2,4.3c1,1.1,1.7,2.6,1.7,4.4c0,6.3-3.8,7.6-7.4,8c0.6,0.5,1.1,1.5,1.1,3c0,2.2,0,3.9,0,4.5c0,0.4,0.3,0.9,1.1,0.8c6.5-2.2,11.1-8.3,11.1-15.5C32.6,7.3,25.3,0,16.3,0z"/> </symbol>  <defs> <path id="deco1" d="M 161,54.69 C 230.4,4.986 303.7,8.661 414.4,92.19 465.7,130.9 432.3,211.4 460,279.5 481,331.2 449.7,430.4 381.1,427 287.1,422.3 172.4,503.8 99.27,444.6 21.03,381.1 10.32,258.3 55.25,145.6 73.73,99.3 129.3,77.36 161,54.69 Z" /> <path id="deco2" d="M 119.8,69.41 C 213.5,18.01 367.2,-1.306 440.4,76.58 482.9,121.9 435.3,200.8 432.9,262.9 431.1,310.6 461.3,372.1 427.7,406 342.4,492 158.3,499.3 64.62,422.5 10.09,377.8 18.76,282.6 32.51,213.5 43.46,158.4 70.61,96.36 119.8,69.41 Z" /> <path id="deco3" d="M 77.03,75.72 C 147.9,0.2308 309,13.37 387.6,80.44 471.8,152.4 517.2,325.6 442.9,407.5 350.2,509.8 43.77,516.2 29.67,378.8 20.48,289.3 80.25,270.4 87.78,212 93.61,166.8 45.85,108.9 77.03,75.72 Z" /> <path id="deco4" d="M 38.35,160.1 C 74.92,86.34 178.1,44.04 260.1,51.51 348.2,59.54 441.6,126.9 473.5,209.4 499.3,276 485,371.9 431.9,419.6 348.2,494.9 185.6,517.4 95.49,449.9 16.71,390.8 -5.393,248.3 38.35,160.1 Z"/> <path id="deco5" d="M 49.94,386.5 C 9.795,286.4 7.674,129.7 94.72,65.99 188.4,-2.586 371.8,28.99 438.1,124.3 486.9,194.5 503.7,389.2 390.4,376.4 277.1,363.5 238.6,482 155.1,469.7 110.9,463.2 66.57,428 49.94,386.5 Z"/> <path id="deco6" d="M 261.7,380.3 C 204.7,399.8 154.1,482.7 98.91,458.5 26.64,426.9 13.2,309.8 29.35,232.6 43.76,163.6 101.4,97.37 167.4,72.34 248,41.97 422.1,-2.762 423.4,107.7 424.6,218.1 507.5,272.4 464.3,336.7 425.7,394.2 327,357.9 261.7,380.3 Z" /> <path id="deco7" d="M 451.9,392.4 C 365.4,455.1 212.9,465.1 131.6,395.9 55.74,331.3 2.509,152.7 87.24,100.3 135.8,70.3 177.8,170.2 227.3,198.6 307.2,244.4 442.2,228.9 478.7,313.5 489.7,339 474.4,376.1 451.9,392.4 Z" /> </defs> </svg> <main> <div class="content content--grid"> <a class="github" href="https://github.com/codrops/OrganicShapeAnimations/" title="Find this project on GitHub"> <svg class="github__deco" width="100%" height="100%" viewBox="0 0 200 200"> <path d="M 175.6,194.6 C 140.6,193.5 116.7,156.4 86.84,138.3 64.14,124.3 30.23,121.6 18.09,97.94 -2.925,57.04 -0.4009,-5.464 30.58,-39.44 64.64,-76.8 133.6,-87.78 179.7,-67.02 248.9,-35.86 316.7,54.76 297,128 284.9,172.5 221.7,196.1 175.6,194.6 Z"/> </svg> <svg class="icon icon--github"><use xlink:href="#icon-github"></use></svg> </a> <header class="codrops-header"> <h1 class="codrops-header__title">Organic <br> Shape <br/>Animations</h1> <p class="codrops-header__subtitle">Hover effects with SVG clipPath</p> </header> <div class="item item--style-1" data-animation-path-duration="800" data-animation-path-easing="easeInOutCubic" data-path-elasticity="300" data-morph-path="M 189,80.37 C 232.6,46.67 352.5,67.06 350.9,124.1 349.5,173.4 311.7,168 312.4,248.1 312.9,301.1 382.5,319.2 368.5,379.1 349.4,460.6 137.7,467.5 117.6,386.3 98.68,309.7 171.5,292.2 183.6,240.1 195.7,188.2 123.8,130.7 189,80.37 Z" data-path-scaleX="0.8" data-path-scaleY="1.1" data-path-translateX="0" data-path-translateY="30" data-path-rotate="5" data-animation-image-duration="800" data-animation-image-easing="easeInOutQuart" data-image-elasticity="300" data-image-scaleX="1.2" data-image-scaleY="1.2" data-image-translateX="-20" data-image-translateY="-45" data-image-rotate="-5" data-animation-deco-duration="1300" data-animation-deco-easing="easeOutQuad" data-deco-elasticity="300" data-deco-scaleX="0.8" data-deco-scaleY="0.9" data-deco-translateX="-5" data-deco-translateY="-5" data-deco-rotate="2"> <svg class="item__svg" width="500px" height="500px" viewBox="0 0 500 500"> <clipPath id="clipShape1"> <path class="item__clippath" d="M 189,80.37 C 243,66.12 307.3,87.28 350.9,124.1 389.3,156.6 417,211.2 418.1,263.4 419.1,305.7 401.8,355.6 368.5,379.1 298.8,428 179.2,446.4 117.6,386.3 65.4,335.3 78.55,230.3 105.5,160.5 119.7,123.6 152.6,89.85 189,80.37 Z" /> </clipPath> <g class="item__deco"> <use xlink:href="#deco1" /> </g> <g clip-path="url(#clipShape1)"> <image class="item__img" xlink:href="img/1.png" x="0" y="0" height="500px" width="500px" /> </g> </svg> <div class="item__meta"> <div class="item__number"> <span class="item__specimen">21</span> <span class="item__reference">BX3</span> </div> <h2 class="item__title">Codium fasciculatus</h2> <h3 class="item__subtitle">Exoplanet Gliese 180 b</h3> </div> </div> <div class="item item--style-2" data-animation-path-duration="1500" data-animation-path-easing="easeOutElastic" data-morph-path="M 418.1,159.8 C 460.9,222.9 497,321.5 452.4,383.4 417.2,432.4 371.2,405.6 271.3,420.3 137.2,440 90.45,500.6 42.16,442.8 -9.572,381 86.33,289.1 117.7,215.5 144.3,153.4 145.7,54.21 212.7,36.25 290.3,15.36 373.9,94.6 418.1,159.8 Z" data-path-scaleY="1.1" data-image-scaleX="1.3" data-image-scaleY="1.3" data-animation-deco-duration="2000" data-animation-deco-delay="100" data-deco-rotate="-10"> <svg class="item__svg" width="500px" height="500px" viewBox="0 0 500 500"> <clipPath id="clipShape2"> <path class="item__clippath" d="M 378.1,121.2 C 408.4,150 417.2,197.9 411,245.8 404.8,293.7 383.5,341.7 353.4,370.7 303.2,419.1 198.7,427.7 144.5,383.8 86.18,336.5 67.13,221.3 111.9,161 138.6,125 188.9,99.62 240.7,90.92 292.4,82.24 345.6,90.32 378.1,121.2 Z" /> </clipPath> <g class="item__deco"> <use xlink:href="#deco2" /> </g> <g clip-path="url(#clipShape2)"> <image class="item__img" xlink:href="img/2.png" x="0" y="0" height="500px" width="500px" /> </g> </svg> <div class="item__meta"> <div class="item__number"> <span class="item__specimen">65</span> <span class="item__reference">AG9</span> </div> <h2 class="item__title">Amphiroa corymbosa</h2> <h3 class="item__subtitle">Exoplanet Kepler-174d</h3> </div> </div> <div class="item item--style-3" data-animation-path-duration="3500" data-path-elasticity="500" data-morph-path="M 193.7,217.3 C 236.4,228.3 279.7,242.7 320.9,231.8 362.6,220.9 446.8,197.1

评论收藏

内容反馈

版权申诉