利用HTML5实现SVG五角星圆点背景特效



9 32 11



特效描述:利用HTML5实现 SVG 五角星圆点 背景特效,利用HTML5实现SVG五角星圆点背景特效

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script  src="js/index.js"></script>

3. HTML代码

<canvas id='canv'></canvas>
<svg class="one" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 2000">
  <path class="f5" d="M1000 140.8c-5.5 6.5-24.2 30-24.8 65.6-.7 37.8 19.6 63 24.8 69.2 5.2-6.2 25.5-31.4 24.8-69.2-.6-35.5-19.3-59-24.8-65.6zM1387.5 812c-3-8-14-36-44.4-54.4-32-19.5-64-14.6-72-13 3 7.5 15 37.7 48 56 31 17.3 61 13 69 11.3zm-775 0c8.4 1.4 38 5.8 69.2-11.4 33-18.3 44.8-48.5 47.5-56-8-1.6-40-6.5-72.3 13-31 18.4-42 46.4-45 54.4z"/>
  <path class="f4" d="M931.5 242c-3 8-12.5 36.6-1 70.2 12.4 35.7 40 52.5 47 56.5 3-7.6 13.3-38.2-.2-73.5-12.8-33-38.4-48.8-45.8-53zm-197 578.6c8.4-1.4 38-7.5 61.2-34.3 24.8-28.5 25.5-61 25.5-69-8 1.4-39.7 7.7-63.5 37-22.4 27.7-23.2 57.8-23.2 66.3zM1334 702c-5.4-6.7-25.4-29.2-60.3-36-37-7-65.5 8.4-72.5 12.5 5.2 6.2 26.5 30.6 63.8 36.5 35.2 5.5 61.6-8.8 69-13zm-265.5-460c3 8 12.5 36.6 1 70.2-12.4 35.7-40 52.5-47 56.5-3-7.6-13.3-38.2.2-73.5 12.8-33 38.4-48.8 45.8-53zM666 702c5.4-6.7 25.4-29.2 60.3-36 37-7 65.5 8.4 72.5 12.5-5.2 6.2-26.5 30.6-63.8 36.5-35.2 5.5-61.6-8.8-69-13zm599.5 118.6c-8.4-1.4-38-7.5-61.2-34.3-24.8-28.5-25.5-61-25.5-69 8 1.4 39.7 7.7 63.5 37 22.4 27.7 23.2 57.8 23.2 66.3z"/>
  <path class="f3" d="M892.2 351c0 8.6.8 38.7 23 66.3 24 29.4 55.6 35.7 63.6 37 0-8-.7-40.4-25.5-69-23.2-26.7-52.7-32.8-61-34.2zm-43.7 449c7.4-4 33-20 45.8-53 13.5-35.3 3.2-66 .3-73.5-7 4-34.7 20.8-47 56.5-11.5 33.6-2 62.2 1 70zm410.7-186.5c-7.3-4.3-33.8-18.6-69-13-37.2 5.8-58.6 30-63.7 36.4 7 4 35.4 19 72.5 12 34.8-7 54.8-30 60.2-36zM1107.8 351c0 8.6-.8 38.7-23 66.3-24 29.4-55.6 35.7-63.6 37 0-8 .7-40.4 25.5-69 23.2-26.7 52.7-32.8 61-34.2zm-367 262.5c7.3-4.3 33.8-18.6 69-13 37.2 5.8 58.6 30 63.7 36.4-7 4-35.4 19-72.5 12-34.8-7-54.8-30-60.2-36zM1151.5 800c-7.4-4-33-20-45.8-53-13.5-35.3-3.2-66-.3-73.5 7 4 34.7 20.8 47 56.5 11.5 33.6 2 62.2-1 70z"/>
  <path class="f2" d="M892.2 452.4c.7 8.5 4 38.4 28.8 64 26.2 27 58.4 30.6 66.5 31.3-.7-8-4.2-40.2-31.4-66.5-25-24.7-55-28.2-63-28.8zm44 297c7-4.7 31.2-22.7 41-57 10.3-36-2.7-66-6.2-73-6.6 4.5-32.7 23.7-42 60.3-8.4 34.5 3.6 62 7.2 69.8zM1171.6 563c-7.7-3.6-35.3-15.6-69.8-7-36.7 9-55.8 35.2-60.4 42 7.3 3.4 37 16.4 73.3 6 34-9.8 52-34 57-41zm-63.8-110.4c-.7 8.5-4 38.4-28.8 64-26.2 27-58.4 30.6-66.5 31.3.7-8 4.2-41 31.4-67 25-25 55-28 63-29zM828.4 562.8c7.7-3.6 35.3-15.6 69.8-7 36.7 9 55.8 35.2 60.4 42-7.3 3.4-37 16.4-73.3 6-34-9.8-52-34-57-41zm235.4 186.7c-7-4.8-31.2-22.8-41-57-10.3-36.2 2.7-66 6.2-73.2 6.6 4.6 32.7 23.8 42 60.4 8.4 34.5-3.6 62-7.2 69.8z"/>
</svg>
<svg  class="two" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 1000">
  <path class="f10" d="M1000 140.8c-5.5 6.5-24.2 30-24.8 65.6-.7 37.8 19.6 63 24.8 69.2 5.2-6.2 25.5-31.4 24.8-69.2-.6-35.5-19.3-59-24.8-65.6zM1387.5 812c-3-8-14-36-44.4-54.4-32-19.5-64-14.6-72-13 3 7.5 15 37.7 48 56 31 17.3 61 13 69 11.3zm-775 0c8.4 1.4 38 5.8 69.2-11.4 33-18.3 44.8-48.5 47.5-56-8-1.6-40-6.5-72.3 13-31 18.4-42 46.4-45 54.4z"/>
  <path class="f9" d="M931.5 242c-3 8-12.5 36.6-1 70.2 12.4 35.7 40 52.5 47 56.5 3-7.6 13.3-38.2-.2-73.5-12.8-33-38.4-48.8-45.8-53zm-197 578.6c8.4-1.4 38-7.5 61.2-34.3 24.8-28.5 25.5-61 25.5-69-8 1.4-39.7 7.7-63.5 37-22.4 27.7-23.2 57.8-23.2 66.3zM1334 702c-5.4-6.7-25.4-29.2-60.3-36-37-7-65.5 8.4-72.5 12.5 5.2 6.2 26.5 30.6 63.8 36.5 35.2 5.5 61.6-8.8 69-13zm-265.5-460c3 8 12.5 36.6 1 70.2-12.4 35.7-40 52.5-47 56.5-3-7.6-13.3-38.2.2-73.5 12.8-33 38.4-48.8 45.8-53zM666 702c5.4-6.7 25.4-29.2 60.3-36 37-7 65.5 8.4 72.5 12.5-5.2 6.2-26.5 30.6-63.8 36.5-35.2 5.5-61.6-8.8-69-13zm599.5 118.6c-8.4-1.4-38-7.5-61.2-34.3-24.8-28.5-25.5-61-25.5-69 8 1.4 39.7 7.7 63.5 37 22.4 27.7 23.2 57.8 23.2 66.3z"/>
  <path class="f8" d="M892.2 351c0 8.6.8 38.7 23 66.3 24 29.4 55.6 35.7 63.6 37 0-8-.7-40.4-25.5-69-23.2-26.7-52.7-32.8-61-34.2zm-43.7 449c7.4-4 33-20 45.8-53 13.5-35.3 3.2-66 .3-73.5-7 4-34.7 20.8-47 56.5-11.5 33.6-2 62.2 1 70zm410.7-186.5c-7.3-4.3-33.8-18.6-69-13-37.2 5.8-58.6 30-63.7 36.4 7 4 35.4 19 72.5 12 34.8-7 54.8-30 60.2-36zM1107.8 351c0 8.6-.8 38.7-23 66.3-24 29.4-55.6 35.7-63.6 37 0-8 .7-40.4 25.5-69 23.2-26.7 52.7-32.8 61-34.2zm-367 262.5c7.3-4.3 33.8-18.6 69-13 37.2 5.8 58.6 30 63.7 36.4-7 4-35.4 19-72.5 12-34.8-7-54.8-30-60.2-36zM1151.5 800c-7.4-4-33-20-45.8-53-13.5-35.3-3.2-66-.3-73.5 7 4 34.7 20.8 47 56.5 11.5 33.6 2 62.2-1 70z"/>
  <path class="f7" d="M892.2 452.4c.7 8.5 4 38.4 28.8 64 26.2 27 58.4 30.6 66.5 31.3-.7-8-4.2-40.2-31.4-66.5-25-24.7-55-28.2-63-28.8zm44 297c7-4.7 31.2-22.7 41-57 10.3-36-2.7-66-6.2-73-6.6 4.5-32.7 23.7-42 60.3-8.4 34.5 3.6 62 7.2 69.8zM1171.6 563c-7.7-3.6-35.3-15.6-69.8-7-36.7 9-55.8 35.2-60.4 42 7.3 3.4 37 16.4 73.3 6 34-9.8 52-34 57-41zm-63.8-110.4c-.7 8.5-4 38.4-28.8 64-26.2 27-58.4 30.6-66.5 31.3.7-8 4.2-41 31.4-67 25-25 55-28 63-29zM828.4 562.8c7.7-3.6 35.3-15.6 69.8-7 36.7 9 55.8 35.2 60.4 42-7.3 3.4-37 16.4-73.3 6-34-9.8-52-34-57-41zm235.4 186.7c-7-4.8-31.2-22.8-41-57-10.3-36.2 2.7-66 6.2-73.2 6.6 4.6 32.7 23.8 42 60.4 8.4 34.5-3.6 62-7.2 69.8z"/>
</svg>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 加载动画 h5弹窗动画 html5弹窗动画 h5动画 h5背景动画 h5场景动画 h53D动画 h5界面动画 html5动画 h5按钮动画 html5按钮动画 h5飘落动画 html5飘落动画
×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到